asked on

JavaScript rotating pictures and scrolling box

Hello,
My rotating images on the right (written in javascript) stopped working after I added the newsletter box (also written in javascript) on the left.

Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<basefont face = "arial">
<body onLoad = "movePictures()">
<table width = "100%" bgcolor = "ecedb3" border = "1" cellpadding="2"
cellspacing="0">
<tr>
<td valign = "abstop">
<table width = "170" border = "1" cellpadding="0"
cellspacing="0">
<tr><td bgcolor = "black"><font color = "white" size =
"-1">Newsletters</font></td></tr>
<tr><td>
<script language="javascript">
var scrollerwidth="170"
var scrollerheight="450"
var scrollerspeed="1";
var scrollercontent="<font size='-1'>Lots of scrolling
content here...</font>"

var pauseit=1

scrollerspeed=(document.all)? scrollerspeed :
Math.max(1, scrollerspeed-1) //slow speed down by 1 for NS
var copyspeed=scrollerspeed
var iedom=document.all||document.getElementById
var actualheight=''
var cross_scroller, ns_scroller
var pausespeed=(pauseit==0)? copyspeed: 0

function populate(){
if (iedom){
cross_scroller=document.getElementById?
document.getElementById("iescroller") : document.all.iescroller
cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
cross_scroller.innerHTML=scrollercontent
actualheight=cross_scroller.offsetHeight
}
else if (document.layers){
ns_scroller=document.ns_scroller.document.ns_scroller2
ns_scroller.top=parseInt(scrollerheight)+8
ns_scroller.document.write(scrollercontent)
ns_scroller.document.close()
actualheight=ns_scroller.document.height
}
lefttime=setInterval("scrollscroller()",20)
}
window.onload=populate

function scrollscroller(){

if (iedom){
if
(parseInt(cross_scroller.style.top)>(actualheight*(-1)+8))

cross_scroller.style.top=parseInt(cross_scroller.style.top)-copyspeed+"px"
else
cross_scroller.style.top=parseInt(scrollerheight)+8+"px"
}
else if (document.layers){
if (ns_scroller.top>(actualheight*(-1)+8))
ns_scroller.top-=copyspeed
else
ns_scroller.top=parseInt(scrollerheight)+8
}
}

if (iedom||document.layers){
with (document){
if (iedom){
write('<div
style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';o
verflow:hidden" onMouseover="copyspeed=pausespeed"
onMouseout="copyspeed=scrollerspeed">')
write('<div id="iescroller"
style="position:absolute;left:0px;top:0px;width:100%;">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+scrollerwidth+'
height='+scrollerheight+' name="ns_scroller">')
write('<layer name="ns_scroller2"
width='+scrollerwidth+' height='+scrollerheight+' left=0 top=0
onMouseover="copyspeed=pausespeed"
onMouseout="copyspeed=scrollerspeed"></layer>')
write('</ilayer>')
}
}
}
</script>

</td></tr>
</table>
</td>

.
.
.

<td valign = "abstop">
<table width = "225" border = "1" cellpadding="0" cellspacing="0">
<tr><td>
<script language = "javascript">
var banner = new Array("images/network_web.gif",
"images/ugs_web.gif", "images/nlos-c_web.gif", "images/nlos-ls_web.gif" );
var imgIndex = -1;
function movePictures() {
imgIndex ++;
if (imgIndex > banner.length - 1) {
imgIndex = 0;
}
window.document.images[0].src = banner[imgIndex];
setTimeout("movePictures();", 2000);
}
</script>
<img src = "images/network_web.gif"><br>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

ASKER CERTIFIED SOLUTION

StormyWaters

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

StormyWaters

The problem was the onload events conflicting.

dakyd

You're overwriting the onload handler, so that movePictures() is never called. Remove this line:
window.onload=populate

and then change the body tag to this:
<body onLoad="movePictures(); populate();">

That should guarantee you call both functions, and should get you back on track. Hope that helps.

dakyd

Sorry Stormy, I had a stale window. Didn't mean to re-post.