?
Solved

Javascript Div scroller does not work in chrome

Posted on 2012-09-11
3
Medium Priority
?
947 Views
Last Modified: 2012-09-12
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).
0
Comment
Question by:Eroots
  • 2
3 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 38388686
As it is written, it could not work in any browser except IE.

I assume somewhere before it is run that isIE is being set, and the code only executes when isIE is true.

Cd&
0
 

Author Closing Comment

by:Eroots
ID: 38388749
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?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38391924
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&
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses
Course of the Month15 days, 10 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question