Eroots
asked on
Javascript Div scroller does not work in chrome
I have a simple javascript div scroller that doesn't seem to want to work outside of IE. I am also looking to see if I can stop the script at the bottom as it's currently going infinitely.
Here is the javascript:
And here's the implementation in the wordpress template code (note it is using a plugin called advanced post list to generate a list of news articles):
Can anyone see any glaring errors in the javascript? As noted it works in IE (it does not stop at the end of the list, but at least it works).
Here is the javascript:
// JavaScript Document
var scrollspeed = "1" // SET SCROLLER SPEED 1 = SLOWEST
var speedjump = "30" // ADJUST SCROLL JUMPING = RANGE 20 TO 40
var startdelay = "2" // START SCROLLING DELAY IN SECONDS
var nextdelay = "5" // SECOND SCROLL DELAY IN SECONDS 0 = QUICKEST
var topspace = "0" // TOP SPACING FIRST TIME SCROLLING
var frameheight = "277" // IF YOU RESIZE THE WINDOW EDIT THIS HEIGHT TO MATCH
current = (scrollspeed)
if (isIE) {
function HeightData(){
AreaHeight=dataobj.offsetHeight
if (AreaHeight==0){
setTimeout("HeightData()",( startdelay * 1000 ))
} else {
ScrollNewsDiv()
}
}
function NewsScrollStart(){
dataobj=document.all? document.all.ticker : document.getElementById("ticker")
dataobj.style.top=topspace
setTimeout("HeightData()",( startdelay * 1000 ))
}
function ScrollNewsDiv(){
dataobj.style.top = (parseInt(dataobj.style.top) - (scrollspeed)) + "px";
if (parseInt(dataobj.style.top)<AreaHeight*(-1)) {
dataobj.style.top=frameheight
setTimeout("ScrollNewsDiv()",( nextdelay * 1000 ))
} else {
setTimeout("ScrollNewsDiv()",speedjump)
}
}
NewsScrollStart();
}
And here's the implementation in the wordpress template code (note it is using a plugin called advanced post list to generate a list of news articles):
<body onload="ScrollNewsDiv();">
<div id="ticker" style="display: block;">
<?php if (method_exists($advanced_post_list, "APL_display")){echo $advanced_post_list->APL_display("NEWSFEED");} ?>
<p style="padding-top: 20px; text-align:center;"><a href="http://www.website.com/in-the-news/">See all news articles</a></p>
</div>
Can anyone see any glaring errors in the javascript? As noted it works in IE (it does not stop at the end of the list, but at least it works).
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The height of the body minus innerHeight (that is the height of the viewport) should give you the amount number of pixels to scroll to get to the bottom. So you just do the setTimeout conditionally until you scroll that amount. I would add A few pixels to the value so you get a little margin at the bottom.
Cd&
Cd&
ASKER
My delimiting on the lines was off, I thought the first function was the only thing wrapped by IE.
I have it operating now. Any clue how I can stop it from scrolling once it reaches the end of my list?