Dynamic Drive DHTML Scripts- George's Expandable ticker

New Revised CSS Library Forums Web Tools

George's Expandable ticker

Author: Dynamic Drive

Description: Quite possibly the only ticker of its kind out there, George's Expandable Ticker brings together the best of two worlds to create a ticker that can be viewed both sequentially and simultaneously. Some great features of this script are:

Uses CSS to control most visual aspects of the scroller, for easy customization.
Script automatically creates a "summary" of each ticker message and adds it to the "Expand" menu.
Cross browser functional- NS4, NS6+, IE4+, Opera 7.

This script is a variation on the original Expandable Ticker Script. This original is suitable for single-lined messages, while this one, multi-lined. Finally, George is one of our in-house developers, and hence the name. :)

Demo:

Directions

Step 1: Copy the below style sheet into the HEAD section of your page:

This style sheet controls most non-essential visual aspects of the ticker. Feel free to modify some of the values.

Step 2: Then, put the below script where you wish the ticker to appear in the BODY section of your page:

Select All
<script language="JavaScript1.2"> /*********************************************** * George's Expandable Ticker- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //configure tickercontents[] to set the messges you wish be displayed (HTML codes accepted) var tickercontents=new Array() tickercontents[0]='Visit our partner site <a href="http://freewarejava.com">Freewarejava.com</a> for free Java applets and resources!' tickercontents[1]='Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online. Also features a developer\'s help forum.' tickercontents[2]='Show your support for Dynamic Drive by linking to us on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.' //specify how many characters of a message (for each msg) to show in expanded menu: var charslimit=30 //Below specifies the "expand text". Do not remove onClick=".." portion. var expandtext='<a href="#" onClick="dropdownit(event);return false">Expand</a> <img src="tridown.gif" border=0>' //configure below variables to set dimensions and main color of the ticker var tickerwidth='275px' var tickerheight='75px' //not including "Expand" text var tickerbgcolor='#DDDDFF' //configure the below variable to determine the delay between ticking of messages (in miliseconds) var tickdelay=2500 ////Do not edit pass this line//////////////// var ie4=document.all || navigator.userAgent.search(/opera.7/i)!=-1 //lump Opera 7 with IE var ns6=document.getElementById && !document.all && !window.opera var ns4=document.layers function ietruebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } if (ns4){ expandtext=expandtext.replace(/dropdownit\(event\); *return false/gi, "return dropdownitNS4(event,this)") tickerheightNS4=parseInt(tickerheight)+19 tickerlistheightNS4=tickerheight } var currentmessage=0 var tickercontentstotal='' if (ie4||ns6) //OUTPUT DROP DOWN MENU document.write('<div id="tickerexpand" class="expandmenu" style="visibility:hidden"></div>') function rotatecontent(){ if (ns4){ //OUTPUT HTML for ticker area for NS4 tickerobj.document.tickernssub.document.write(tickercontents[currentmessage]+'') tickerobj.document.tickernssub.document.close() } else if (ie4||ns6){ tickerobj.innerHTML=tickercontents[currentmessage] previousmessage=(currentmessage==0)? tickercontents.length-1 : currentmessage-1 tickerexpand_item=ns6? document.getElementById("expand"+currentmessage) : eval("expand"+currentmessage) tickerexpand_previousitem=ns6? document.getElementById("expand"+previousmessage) : eval("expand"+previousmessage) tickerexpand_previousitem.className="" tickerexpand_item.className="expandmenu_highlight" } currentmessage=(currentmessage==tickercontents.length-1)? 0 : currentmessage+1 rotatemsgtimer=setTimeout("rotatecontent()",tickdelay) } function dropdownit(e){ if (ns6) e.stopPropagation() else e.cancelBubble=true tickerexpandobj.style.visibility=tickerexpandobj.style.visibility=="hidden"? "visible" : "hidden" expandbuttonLeft=ns6? e.pageX-e.layerX : ietruebody().scrollLeft+event.clientX-event.offsetX expandbuttonTop=ns6? e.pageY-e.layerY : ietruebody().scrollTop+event.clientY-event.offsetY tickerexpandobj.style.left=expandbuttonLeft+"px" tickerexpandobj.style.top=expandbuttonTop+expandbuttonobj.offsetHeight-3+"px" } function dropdownitNS4(e, currentobj){ tickerexpandobj.left=tickerobj.pageX tickerexpandobj.top=tickerobj.pageY+parseInt(tickerlistheightNS4)+tickerobj.document.expandbuttonNS4.document.height tickerexpandobj.visibility=(tickerexpandobj.visibility=="hide")? "show" : "hide" return false } function jumptomsg(whichmsg){ clearTimeout(rotatemsgtimer) if (ie4||ns6) tickerexpand_item.className="" currentmessage=whichmsg rotatecontent() } function initialize_ticker(){ if (ns4) document.tickernsmain.visibility="show" tickerobj=ie4? tickerlist : ns6? document.getElementById("tickerlist") : ns4? document.tickernsmain : "" tickerexpandobj=ie4? tickerexpand : ns6? document.getElementById("tickerexpand") : ns4? document.expandlayer : "" expandbuttonobj=ie4? expandbutton : ns6? document.getElementById("expandbutton") : "" for (i=0;i<tickercontents.length;i++){ //get total scroller contents tempstringcontainer=tickercontents[i].replace(/\<[^\>]+\>/g, ''); //remove HTML tags tickercontentstotal+='<div id="expand'+i+'">- <a href="javascript:jumptomsg('+i+')">'+tempstringcontainer.substring(0, charslimit)+'...</a></div>' } if (ie4||ns6){ tickerexpandobj.innerHTML=tickercontentstotal expandbuttonobj.innerHTML=expandtext document.onclick=function(){ tickerexpandobj.style.visibility="hidden" } } else if (ns4){ tickerexpandobj.document.write(tickercontentstotal) tickerexpandobj.document.close() tickerexpandobj.clip.width=parseInt(tickerwidth)*0.9 tickerobj.document.expandbuttonNS4.document.write(expandtext) tickerobj.document.expandbuttonNS4.document.close() tickerexpandobj.captureEvents(Event.CLICK) tickerexpandobj.onclick=function(){ tickerexpandobj.visibility="hide" } } rotatecontent() } if (ie4||ns6) //OUT HTML FOR TICKER AREA for IE/NS6 document.write('<table id="tickerarea" border="0" style="width:'+tickerwidth+';" bgcolor="'+tickerbgcolor+'" cellspacing="0" cellpadding="0"><tr><td id="tickerlist" width="100%" height="'+tickerheight+'" style="padding-left:3px" valign="top"></td></tr><tr><td width="90%"><div id="expandbutton" style="position:relative"></div></td></tr></table>') window.onload=initialize_ticker </script> <ilayer id="tickernsmain" width=&{tickerwidth}; height=&{tickerheightNS4}; bgColor=&{tickerbgcolor}; visibility=hide><layer id="tickernssub" width=&{tickerwidth}; left=0 top=0></layer><layer id="expandbuttonNS4" left=0 top=&{tickerlistheightNS4};></layer></ilayer> <layer id="expandlayer" bgColor=&{tickerbgcolor}; visibility=hide></layer>

Please refer to the comments inside script to customize the ticker's width, colors, and content.

This script uses an arrow image as part of its interface:

(enlarged for better viewing. Download by right clicking, and selecting "save as")

Enjoy!