Link to home
Start Free TrialLog in
Avatar of Eroots
ErootsFlag for United States of America

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:
// 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();
}

Open in new window


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>

Open in new window


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
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Eroots

ASKER

of all the things....

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?
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&