Help with News Ticker - HTML Forums

betsy_ls · 10-26-2009, 01:12 AM

I am new to all of this, so please keep that in mind when reading this post.

I just put a news ticker on a website and I have a problem that I cannot figure out (well, actually a few, but just one that I need to ask about today). You will find the ticker here at the bottom of the page. If you click on the blue arrow to expand, you will notice that some of the text in the footer shows on top of the white background of the expanded area. I would like the text to be underneath the expanded list. Can anyone help me with that?

Here is my CSS code:

Code:

#ticker {  
	border:thin silver solid; 
	margin:0 15px 0 0;
	padding:0 0 5px 0;
	width:490px;
	height:15px; 
	float:right;
	text-align:left;
	
	
}

#ticker a {
	color:#555555;
}

#tickerexpand {
	margin-left:20px; 
	line-height:140%; 
	padding-top:3px; 
	border-left:thin silver solid; 
	border-top:thin silver solid; 
	border-bottom:thin silver solid; 
	background-color:#ffffff;

#listbutton{

background-color:#ffffff;
cursor:pointer;cursor:hand;
}

Here is the javascript:

Code:

<div id="ticker" style="background-image:url(images/news_background.gif)">

<script language="JavaScript1.2">

//Expandable ticker script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

//configure tickercontents[] to set the messges you wish be displayed (HTML codes accepted)
var tickercontents=new Array()
tickercontents[0]='<div style="padding:0 0 0 50px"><a href="http://66.147.242.84/~gttgrpco/htdocs/news_archive.php?newsID=30">GTT to sell Object Orientation Programming Portfolio</a></div>'
tickercontents[1]='<div style="padding:0 0 0 50px"><a href="http://66.147.242.84/~gttgrpco/htdocs/news_archive.php?newsID=29">GTT to Sell Display Technology Portfolio</a></div>'
tickercontents[2]='<div style="padding:0 0 0 50px"><a href="http://66.147.242.84/~gttgrpco/htdocs/news_archive.php?newsID=28">GTT Announces New Patent Valuation Tool</a></div>'
tickercontents[3]='<div style="padding:0 0 0 50px"><a href="http://66.147.242.84/~gttgrpco/htdocs/news_archive.php?newsID=27">GTT to Sell Network Transactions Portfolio</a></div>'

//configure the below 2 variables to set the width/background color of the ticker
var tickerwidth='491px'
var tickerbgcolor='#ffffff'

//configure the below variable to determine the delay between ticking of messages (in miliseconds)
var tickdelay=4000

////Do not edit pass this line////////////////

var ie4=document.all
var ns6=document.getElementById
var ns4=document.layers

var currentmessage=0
var tickercontentstotal=''

function changetickercontent(){
if (ns4){
tickerobj.document.tickernssub.document.write('<b><a href="#" onClick="return expandlist(event)">Expand</a></b> | '+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="expandhighlight"
}

currentmessage=(currentmessage==tickercontents.length-1)? 0 : currentmessage+1
setTimeout("changetickercontent()",tickdelay)
}

function start_ticking(){
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 : ""

for (i=0;i<tickercontents.length;i++) //get total scroller contents
tickercontentstotal+='<div id="expand'+i+'">'+tickercontents[i]+'</div>'
if (ie4||ns6)
tickerexpandobj.innerHTML=tickercontentstotal
else{
tickerexpandobj.document.write(tickercontentstotal)
tickerexpandobj.document.close()
}
changetickercontent()
}

function expandlist(e){
if (ie4||ns6){
tickerexpand_parent=ie4? tickerexpand.parentElement : document.getElementById("tickerexpand").parentNode
tickerexpand_parent.style.display=(tickerexpand_parent.style.display=="none")? "" : "none"
}
else{
document.expandlayer.left=e.pageX-e.layerX
document.expandlayer.top= e.pageY-e.layerY+20
document.expandlayer.visibility=(document.expandlayer.visibility=="hide")? "show" : "hide"
return false
}
}

if (ie4||ns6)
document.write('<table border="0" style="width:'+tickerwidth+'" bgcolor="'+tickerbgcolor+'" cellspacing="0" cellpadding="0"><tr><td width="90%" id="tickerlist" bgcolor="'+tickerbgcolor+'"></td><td width="10%" bgcolor="'+tickerbgcolor+'"><div id="listbutton" style="border-right:thin silver solid"onClick="expandlist()"><img src="images/arrow_down_blue.jpg" alt="Arrow" height="10px" style="padding:5px 5px 0 0" /></div></td></tr><tr style="display:none"><td id="tickerexpand"  width="90%"></td><td width="10%" style="border-right:thin silver solid; border-bottom:thin silver solid;  border-top:thin silver solid; background-color:#ffffff"></td></tr></table>')

window.onload=start_ticking
</script>

<ilayer id="tickernsmain" width=&{tickerwidth}; bgColor=&{tickerbgcolor}; visibility=hide><layer id="tickernssub" width=&{tickerwidth}; left=0 top=0></layer></ilayer>
<layer id="expandlayer" bgColor=&{tickerbgcolor}; visibility=hide></layer>

                  </div>

Please let me know if you need anything else. Thanks!
Betsy