Multiple 'scrollers' on web site

[slyredfox]

1) Script Title: Scrollable content II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

3) Describe problem: I'm using the above scroller on several areas of a web site I'm developing (not my idea to use multiple ;-). Here's the issue (and I know we shouldn't post 2x script conflict - but I think this may be a unique instance) :

I'm planning on using 2-3 of the above scrollable content scripts on the site:
One (1) on a side bar include file
Two (2) as a primary content scroller - page specific
Three (3) as a special function (scrolling sub nav links, etc.) when needed.

I'm also, setting these scrollers "relative" to other elements on the page.

My questions are: Do I need to have multiple copies of the same javascript code for all 3 instances or can I just have one copy of the <script> set into the body of each page?

And, my second question - How do I keep the scripts from interfering with each other? I had tried to resolve from this tutorial:
http://javascriptkit.com/javatutors/multiplejava3.shtml

But, I think it's a "trigger" issue on the scroll buttons themselves. (Not sure - can't figure it out - please, please help ;-)

You can view the "in-development" page here:
http://www.designrefresh.com/CLIENTS_Pinnacle/Pinnacle_Template.asp

One last note: I'm in no way a javascript programmer (it looks like ancient sandscript to me) I do get an idea of what the code is doing enough to manipulate it a bit. So, please be nice if I don't get exactly what you're trying to explain to me on the first shot. Thanks.

[Veronica]

A div is a unique identifier. So there can be only one div of a given name on a page. (Lots of divs is OK, but each one needs a unique name.)

Right now you have 2 divs called container and 2 called content. So rename one of those sets, calling them containertwo and contenttwo (or whatever). Then, re-write the second javascript so it uses those new names.

You'll also need to rename all the variables and functions for the second script to keep them from interfering with each other. And finally, you may need to combine the last line in each script into a single onload command in the body tag.

I'm sure there's a more elegant way to do this, but it will work this way too.

[jscheuer1]

Here's a multiple use version of that script that never quite made it into the DD library (yet):

http://www.dynamicdrive.com/forums/showthread.php?t=11899

Demo:

http://home.comcast.net/~jscheuer1/side/index_side_table.htm

If you have questions on its use, please post them in this thread or start a new thread.

[slyredfox]

Thanks - I think that's what I'm looking for and I'll review it.

The first "container" and "content" div id's in my code are actually the server side include file - (writing itself out when you view source). I started to change those 2 div id's ("container" and "content") to "containerside" and "contentside".

But, then the script didn't work. I'll review your supplied code

But, I also wanted to "learn" if in the following code snippet (from original site link) should I have changed all occurances of ("content") to ("contentside") - based on my new variable names ("containerside" and "contentside"):

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.newscontainer.document.newscontent
var contentheight=crossobj.clip.height
}

[jscheuer1]

If you are choosing to rewrite the old script to accommodate two scrollers, as Veronica suggested, you would need essentially two scripts and two sets of markup, each with unique names for most things.

The advantage with the multiple use version is that only one main script is required and it can power as many scroller modules as you like on a given page.

[Veronica]

For the 2 scripts to work, you'd need to change, not only the div id, but also every variable and function. moveup would become moveup_news, moveupvar would become moveupvar_news, crossobj would become crossobj_news, etc.
So, John's script is definitely the easier way to go, especially if you're going to add a third div down the road.
See - I knew there had to be a more "elegant" way to do it!

[slyredfox]

I'm definetly going to use John's demo (thanks John).

But, I also want to say thanks to Veronica - for that last clarification on variable and function declaration. That's what I had thought was looking at in the original scripts. But, I wasn't sure exactly what I was "seeing". So, now I'm one step closer to understanding how the 'syntax' of the code works in relationship to each other. When I look at the code now it doesn't "ALL" look like jibberish. (Some of it still does - but not all of it ;-)