Multiple Instances of Scrollable Content II?

[ph8ed]

1) Script Title: Scrollable Content II

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

3) Describe problem: I have 2 instances of the script on my page. However, both sets of scroll arrows only seem to control one box. I have changed the names of the divs/containers but that doesn't work. I tried the solutions suggested for when you have two scripts that use the same event... in this case window.load by combining the calls into (named differently) the body onload event but that through the entire layout off and didn't resolve the problem anyway.

Any ideas? I HAVE to have both of these boxes displayed at the same time on the same page.

[jscheuer1]

http://home.comcast.net/~jscheuer1/s...side_table.htm

Which was first introduced here:

http://www.dynamicdrive.com/forums/s...7653#post47653

[ph8ed]

That's exactly what I needed! One slight problem, it seems to align everything against the bottom of the scrollbox and I can't figure out how to align output starting at the top of the scrollbox?

[jscheuer1]

Well, if you were to copy the demo page's code exactly, and then alter only the content, it should work out, as those scrollers don't start at the bottom. Or:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[ph8ed]

I did copy as is because I'm not good with javascript to change anything. The site isn't on a public webserver just yet, it's on an intranet development box. I put the code onto multiple pages and it seems like pages that only have one line of text (place holders) seem to have this problem. Pages with lots of content don't. Has me scratching my head.

[jscheuer1]

In that case, you could add some empty lines using:

<br>&nbsp;

a number of times after each placeholder. Or use some good old 'nonsense' text to simulate the amount of content expected to eventually be there.

Alternatively, in each invocation in the body of the page where you have:

<script type="text/javascript">

// * Scrollable content script III scroller module * configure this scroller:

//specify speed of scroller (greater=faster)
speed=6;
//specify unique content id * REQUIRED FOR EACH SCROLLER *
contentid="content2";
//specify scroller width
scrollerwidth=210;
//specify scroller height
scrollerheight=115;
//specify scroller border [width, style, color]
scrollerborder=['4px', 'outset', 'blue']
//specify location of controls, 1 for side, 0 for bottom
sidecontrols=0
//specify control images
upimage="up.gif"
downimage="down.gif"

//Note: Variables set for a previous scroller will carry through to the next if omitted.
//All variables must be present and set for the first scroller on a page.

//Do Not Edit or Remove:
topwrite();
</script>

<!-- INSERT CONTENT HERE -->
<div style="font-family:sans-serif;font-size:90%;margin-left:.5ex;margin-top:-.8em!important;margin-top:.2em;"><p>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dictum. Pellentesque quis purus vitae risus cursus aliquet.
</p>
<p>
- Donec elementum. Nam malesuada pellentesque leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p style="margin-bottom:.5ex">
- Sed eu mi. Phasellus nec sapien nec orci consequat ultrices. Aliquam interdum justo ac libero.
</p>
<div style="position:relative;left:-1em;"><ul>
<li>Integer cursus lacinia quam.</li>
<li>Quisque vehicula sem nec arcu.</li>
<li>Cras vel mauris varius mi suscipit mollis.</li>
<li>Nam vulputate facilisis erat.</li>
<li>Praesent tempus elit eu nulla.</li>
</ul>
<ul style="margin-bottom:1ex;">
<li>Vestibulum aliquam sapien vitae tortor auctor vulputate.</li>
<li>Morbi feugiat auctor diam.</li>
<li>Nullam non velit vel ante interdum tincidunt.</li>
<li>Mauris vel tellus non urna venenatis elementum.</li>
</ul></div>
</div>
<!-- END CONTENT - Stop Editing-->

<script type="text/javascript">bottomwrite();</script>

<!-- End Scrollable content script III scroller module -->

If the (highlighted in the above) height setting is taller than the content, this could be the cause.

In any case, once you fill these scrollers with actual content, the problem should disappear.