Date-controlled random rotating banner script
March 01, 2011
Javascript
This script text and HTML from an XML listing, based on the end date. It scans through the list, finds the first section with an end-date greater than today's date, then pulls random banner text/HTML from that section. The example shown here uses a flat color banner with white text, but you could also use this same script to generate image or flash-based banners. I've also added a nice jQuery fade-in effect but that is optional.

View Demo

Download source files

More after the jump...
Ads by Google
Posted by ellen at March 01, 2011 08:39 PM

"index.htm"

Sample HTML page: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Rotating banner example</title>
  <!-- layout style -->
  
  <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
  <!-- jquery -->
  
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="banner.js"></script>
  



 
  </head>
  <body>


 
  
  <div id="subheader">
  <!-- Box Start -->
  <div class="" style="display:none;" id='thebanner'>
  <div class="top"><span></span></div>
  <div class="box-content">
  <div class="box-content2">
  <div class="box-padding">
  
  <!-- Content Begin -->
  
  <div id="newsBanner"  align="center">
  <b>-Educators:</b> Brighten Your Learning Results: <b>Free sessions</b> for educators and course developers. <a href="#" target="blank">See calendar >>></a> 
  </div><!--end newsbanner-->
  
  <!-- Content End -->
  
  </div><!--boxpadding-->
  </div><!--end box-content2-->
  
  </div><!--end box-content-->
  <div class="bottom"><span></span></div>
  </div><!--end box-->
  <div class="clear"></div>
  <!-- Box End -->
  </div>



</body>
  </html>
banners.xml
Sample XML file: 
<?xml version="1.0" encoding="utf-8"?>
<dates>


<!--put sets in date order, oldest first-->


 <date enddate="02/24/2011" nm='24'>
  <items>
  <item nm="apples">
  <text><![CDATA[   1 ends Feb 24, 2011 and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>red</color>
  </item>
  <item nm="pears">
  <text><![CDATA[  2 ends Feb 24, 2011 of text and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="pineapples">
  <text><![CDATA[   3 ends Feb 24, 2011 <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="vgt">
  <text><![CDATA[   4 ends Feb 24, 2011bunch of text and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  </items>
  </date>
  <date enddate="02/25/2011" nm='25'>
  <items>
  <item nm="apples">
  <text><![CDATA[   1 ends Feb 25, 2011 and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="pears">
  <text><![CDATA[  2 ends Feb 25, 2011 of text and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>red</color>
  </item>
  <item nm="pineapples">
  <text><![CDATA[   3 ends Feb 25, 2011 <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="vgt">
  <text><![CDATA[   4 ends Feb 25, 2011bunch of text and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>green</color>
  </item>
  </items>
  </date>
  <date enddate="04/17/2011" nm='20'>
  <items>
  <item id="series_promo">
  <text><![CDATA[  UMHS Educator Learning Series. Free, limited seating.<a href="#">Register today. See calendar.</a>   ]]></text>
  <color>red</color>
  </item>
  <item nm="mih_promo">
  <text><![CDATA[   One-day Conference: Making it Happen. May 19. Ann Arbor.  <a href="#">Register</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="next_session_promo">
  <text><![CDATA[   Designing Short, Effective Inservices. Free session. April 12.<a href="#">Register</a>   ]]></text>
  <color>green</color>
  </item>
  
  </items>
  </date>
  
  <date enddate="05/17/2011" nm='20'>
  <items>
  <item id="series_promo">
  <text><![CDATA[  ends 05/17/2011 Free, limited seating.<a href="#">Register today. See calendar.</a>   ]]></text>
  <color>red</color>
  </item>
  <item nm="mih_promo">
  <text><![CDATA[   ends 05/17/2011 One-day Conference: Making it Happen. May 19. Ann Arbor.  <a href="#">Register</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="next_session_promo">
  <text><![CDATA[   ends 05/17/2011 Designing Short, Effective Inservices. Free session. April 12.<a href="#">Register</a>   ]]></text>
  <color>green</color>
  </item>
  
  </items>
  </date>
  <date enddate="06/23/2011" nm='28'>
  <items>
  <item nm="apples">
  <text><![CDATA[   1 ends June 23, 2011 and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="pears">
  <text><![CDATA[  2 ends  June 23, 2011 of text and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="pineapples">
  <text><![CDATA[   3 ends  June 23, 2011 <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>green</color>
  </item>
  <item nm="vgt">
  <text><![CDATA[   4 ends  June 23, 2011bunch of text and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>green</color>
  </item>
  </items>
  </date>
  
  <date enddate="07/23/2011" nm='28'>
  <items>
  <item nm="apples">
  <text><![CDATA[   1 ends July 23, 2011 and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="pears">
  <text><![CDATA[  2 ends  July 23, 2011 of text and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>blue</color>
  </item>
  <item nm="pineapples">
  <text><![CDATA[   3 ends  July 23, 2011 <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>green</color>
  </item>
  <item nm="vgt">
  <text><![CDATA[   4 ends  July 23, 2011bunch of text and <b>HTML</b> and <a href="http://google.com">links</a>   ]]></text>
  <color>green</color>
  </item>
  </items>
  </date>
  </dates>


Style sheet:


html, body, #wrapper { height: 100%; }

body > #wrapper{ height: auto; min-height: 100%; }

body {
	background: #fafafa url(../images/body_bg.gif) repeat-x left top;
	font-size: 13px;
	margin: 0;
}


/* Sub Header */
#sub-header {

	width: 960px;
	float: left;
}


/* box style */


.box {
	width: 100%;
	margin-bottom: 15px;
	float: left;	
	
}
		
.top {
	width:100%;
	height:12px;
	background:url(../images/blue/top.png) no-repeat left top;
}
.bluebox   .top  {background:url(../images/blue/top.png) repeat;}
.redbox   .top  {background:url(../images/red/top.png) repeat;}
.orangebox   .top  {background:url(../images/orange/top.png) repeat;}
.greenbox   .top  {background:url(../images/green/top.png) repeat;}
.purplebox   .top  {background:url(../images/purple/top.png) repeat;}

.top span {
	width: 13px;
	height:12px;
	background: #fafafa url(../images/blue/top-right.png) no-repeat right top;
	float: right;
	overflow: hidden;
}
.bluebox .top span  {background:#fafafa url(../images/blue/top-right.png) no-repeat right top;}
.redbox  .top span  {background:#fafafa url(../images/red/top-right.png) no-repeat right top;}
.orangebox .top span  {background:#fafafa url(../images/orange/top-right.png) no-repeat right top;}
.greenbox  .top span  {background:#1cab09 url(../images/green/top-right.png) no-repeat right top;}
.purplebox  .top span  {background:#4931c3 url(../images/purple/top-right.png) no-repeat right top;}


.box-content {
	/*background: url(../images/blue/bannertile.png) repeat ;*/
	width: 100%;
	float: left;
	/*background-color: #f0f0f0;*/
		
}


.box-content2 {
	/*background: url(../images/blue/bannertile.png) repeat-y left top;*/
	width: 100%;
	float: left;			
}
.bluebox   .box-content, .bluebox   .box-content2  {background:url(../images/blue/bannertile.png) repeat;}
.redbox    .box-content, .redbox    .box-content2  {background:url(../images/red/bannertile.png) repeat;}
.orangebox .box-content, .orangebox .box-content2  {background:url(../images/orange/bannertile.png) repeat;}
.greenbox  .box-content, .greenbox  .box-content   {background:url(../images/green/bannertile.png) repeat;}
.purplebox  .box-content, .purplebox  .box-content   {background:url(../images/purple/bannertile.png) repeat;}
 

.bottom {
	width:100%;
	height:12px;
	background:url(../images/blue/bottom.png) no-repeat left top;
	float: left;
}
.bluebox .bottom   { background:url(../images/blue/bottom.png) no-repeat left top; }
.redbox .bottom    { background:url(../images/red/bottom.png) no-repeat left top; }
.orangebox .bottom { background:url(../images/orange/bottom.png) no-repeat left top; }
.greenbox .bottom  { background:url(../images/green/bottom.png) no-repeat left top; }
.purplebox .bottom  { background:url(../images/purple/bottom.png) no-repeat left top; }

.bottom span {
	width: 13px;
	height:12px;
	background: #fafafa url(../images/blue/bottom_right.png) no-repeat right top;
	float: right;
	overflow: hidden;
}
.bluebox   .bottom span  {	background: #fafafa url(../images/blue/bottom_right.png) no-repeat right top;}
.redbox    .bottom span  {	background: #fafafa url(../images/red/bottom_right.png) no-repeat right top;}
.orangebox .bottom span  {	background: #fafafa url(../images/orange/bottom_right.png) no-repeat right top;}
.greenbox  .bottom span  {	background: #1cab09 url(../images/green/bottom_right.png) no-repeat right top;}
.purplebox  .bottom span  {	background: #4931c3 url(../images/purple/bottom_right.png) no-repeat right top;}

.box p {
	margin:5px 0 10px 0;
	padding-bottom: 5px;
	clear: both;
}
		
.box-padding {
	padding: 5px 15px 10px 15px;
}

#content .box-padding  p{
	padding-bottom: 10px;
}


.box-padding h2 {
	padding-top: 0px;
	margin-top: 0;

}
.box-padding h3 {
	padding-top: 0;
	margin-top: 10px;

}
"banner.js"
javascript file
if (typeof console == "undefined" || typeof console.log == "undefined") var console = { log: function() {} };   
//jquery stuff 
$(document).ready(function () {
	var c;
    var t;
    $.ajax({
        type: "GET",
        url: "banners.xml",
        dataType: "xml",
        success: xmlParser
    });
	
	
	

	
});

function xmlParser(xml) {
	 
     var todaysdatenumber=dayOfYear(new Date());
 

  
    $(xml).find("date").each(function () 
		  {
			  var itmend =  $(this).attr("enddate");
			 // console.log('itmend'+itmend);
			  var itmDate = new Date(itmend);
			  var itmendnumber = dayOfYear(itmDate);
			//  console.log('itmendnumber='+itmendnumber);
			  var bannerwritten = 0;
			//  console.log('todaysdatenumber='+todaysdatenumber);
			 
			 console.log(itmendnumber > todaysdatenumber);
				 if((itmendnumber >= todaysdatenumber)&&(bannerwritten==0))
					  {
					   var itemslength =$(this).find('items').find('item').length;              
					   var randomnumber=Math.floor(Math.random()*(itemslength))
					   console.log('itmend= '+itmend+' itmendnumber= '+ itmendnumber + ' itemslength='+itemslength);
					   c = $(this).find('items').find('item').filter(function(index) {return index  == randomnumber;}).find('color').text();
					   t = $(this).find('items').find('item').filter(function(index) {return index  == randomnumber;}).find('text').text();
					   console.log('c='+c);
					   console.log('t='+t);
					   $("#subheader").removeClass();
					   $("#subheader").addClass(c+"box");
					  //$("#newsBanner").text(t);
					   $("#newsBanner").html(t);
					   $("#thebanner").fadeIn(1000);
					   bannerwritten=1;	 
					   }//end if
					   else{
						    $("#subheader").addClass(c+"box");
						     $("#thebanner").fadeIn(1000);
						   }
		   }//end anon function assigned to each
	  );//end each
    
}	//end function xmlParser				 
 
  
function dayOfYear(dtVal){
	var dtNum;
	var firstDay = Date.UTC(dtVal.getFullYear(), 0, 0);
   	var thisDay = Date.UTC(dtVal.getFullYear(), dtVal.getMonth(), dtVal.getDate());    
	dtNum = Math.floor((thisDay - firstDay) / (1000 * 60 * 60 * 24))+1;
   return dtNum;
}
//http://www.webdeveloper.com/forum/showthread.php?t=125078



Ads by Google

Ads by Google

Related Entries:


 RSS   |   Contact Me
Ads by Google