Take a wonderful script to the next level

On this page:

You can see a wonderful example of a javascript scrolling a div up and down. Just rollover the up and down arrows and watch the text scroll!
It even stops scrolling when it has reached the end of the div. Meaning that you can actually put any quantity of content in it! It will always scroll 'till the end of the div.

The .js file can be found here:

So far so good, now I would like to use two of these scrollable DIVs in one page without using frames, in fact I’m trying to follow the standards by avoiding frames and tables. This means that there will be two identical javascripts on one page… leading to a conflict between these scripts.

Does anybody has any suggestions how to make this idea work?

I don’t know much about JS but here is one thing that made sense to me. Here is your html:

<div id="sidescroll"><div id="scrollMeUp"><a href="#" onfocus="if(this.blur)this.blur()" onmouseover="scrollIt('Scroll Up',1); return true" onmouseout="scrollIt('',0); return true"><img src="../img/pijlboven.gif" width="18" height="18" border="0"></a></div>
    <div id="scrollMeDown"><a href="#" onfocus="if(this.blur)this.blur()" onmouseover="scrollIt('Scroll Down',2); return true" onmouseout="scrollIt('',0); return true"><img src="../img/pijlbeneden.gif"width="18" height="18" border="0"></a></div>

Make a new var at the top. Under

var newsId = "news"; 


var newsId2 = "news2";

and prolly the same thing for var newsClipId.

In your JS make duplicate functions of scrollIT, scrollUp, and scrollDown. Obviously rename them, like scrollIT2, scrollUp2, etc.

Change your new scrollUp2 where it says newsId… to the new newsId2.

Last, in the function init() under
theObj = getObject(newsClipId);
theObj = getObject(newsId);

theObj = getObject(newsClipId2);
theObj = getObject(newsId2);

anyway… all theory… but I think it should work.

I have implemented your code
on this page:

the both DIVs scroll, but there still a conflict
here’s the adapted .js file:

any ideas?

LoL, well it took me forever to figure out what error you were talkin about… but… I finally found it.

It seems the issue is

var yplace = 0;
var ymax = 0;
var ymin = 0;
var xplace = 0;

all that is being shared between your 2 version… since I dunno anything about JS I don’t know if those vars are common vars that can be changed. Anyway, what you can try to do is make a second version of those vars too… and in your duplicates change those vars to the new version.

var yplace2 = 0;
var ymax2 = 0;
var ymin2 = 0;
var xplace2 = 0;

But, again… I dunno if this will work… those look like common variables that may not be able to be changed… but I’d check it out.

or maybe change

function redrawScreen() {
  return false

to true instead of false, LoL again I don’t know what that does. It’s just all theory.

Lemme know if that works.

Hi, thanks for the suggestions but now there’s only one DIV scrolling,
so my guess is that it yplace and the other vars are common variables that can’t be changed.

ok, thanks, I made the code work i needed to duplicate some more variables and suddenly it worked. Thanks a lot for your help simplistik.

Dunno if you’re gonna make your way back here but i was just wondering if you could share that JS w/ us since we helped you solve it, and from what I can tell it seems to be a widely used script.

oh, well not a problem the modified js-file is to be found here:

and the demopage here:

have fun!

The scroller is very nice (in Explorer) but what is the point of conforming with standards if it doesn’t work in all browsers? In Safari and Netscape (on a Mac) the text is all over the place…

works fine in all browsers for me… safari, ff, netscape. dunno which versions you’re using.

Safari 1.0, Netscape 7

Hmm… I have Safari, 1.2 works fine… I guess I was still in FF when I thought I was in NS7.1 but yea… it does screw up in NS

But you can’t always cater to every browser type. PPL put way to much emphasis on that.

No of course, my question has more to do with “standards” than raphaeld’s choice for the page/site. And I think it should work in Netscape at least. I’ll have to upgrade my Safari. Good that it works in 1.2!