Scrollable content II [Archive] - Dynamic Drive Forums

Msmeeple

08-05-2006, 09:49 PM

I followed the code on this site for this and need some information. Is it possible to put more than one of these content boxes on the same page?

I put three of them on my page and the arrows for all three scroll the first box.

You can see it here:
http://www.hetblauwedorp.nl/Laatste_ontwikkelingen3.html

I tried changing the names of the arrow gifs but that made no difference.

Thanks,
MsMeeple

jscheuer1

08-06-2006, 05:08 AM

Not in its present form unless you put additional Scrollable content II script(s) on separate page(s) and have them show through onto your page via (an) iframe(s).

jscheuer1

08-06-2006, 07:03 PM

Here is a more modular version of the script that allows for multiple version on a single page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Modular Scroller (Scrollable content script III) - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/******************************************
* Scrollable content script III- © John Davenport Scheuer
* As first seen in: http://www.dynamicdrive.com/forums - membername: jscheuer1
* Very freely adapted from Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full original source code
* This notice must stay intact for legal use
******************************************/

////// No Need to Edit this Head Section ///////

var iens6=document.all||document.getElementById, moveupvar, movedownvar, speed, contentid, scrollerwidth, scrollerheight, scrollerborder;

function movedown(id, speed){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
var contentheight=crossobj.offsetHeight;
if (parseInt(crossobj.style.top)-speed<(contentheight*(-1)+crossobj.parentNode.offsetHeight-10))
crossobj.style.top=contentheight*(-1)+crossobj.parentNode.offsetHeight-10+'px';
if (parseInt(crossobj.style.top)-speed>=(contentheight*(-1)+crossobj.parentNode.offsetHeight-10))
crossobj.style.top=parseInt(crossobj.style.top)-speed+'px';
movedownvar=setTimeout("movedown('"+id+"', "+speed+")",20);
}

function moveup(id, speed){
var crossobj=document.getElementById? document.getElementById(id) : document.all? document.all[id] : null;
if (parseInt(crossobj.style.top)+speed>0)
crossobj.style.top=0;
if (parseInt(crossobj.style.top)+speed<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+'px';
moveupvar=setTimeout("moveup('"+id+"', "+speed+")",20);
}

function topwrite(){
if (iens6){
document.write('<div style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;border:'+scrollerborder.join(' ')+';overflow:hidden;">\n');
document.write('<div id="'+contentid+'" style="position:absolute;width:'+[scrollerwidth-5]+'px;left:0;top:0">\n');
}
}

function bottomwrite(){
if (iens6){
document.write('</div></div>\n');
document.write('<table style="width:'+scrollerwidth+'px;"><td style="text-align:right;height:1em;">\n');
document.write('<a href="javascript:void(0);" onmouseover="moveup(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(moveupvar)"><img style="padding:1ex .5ex 1ex 1ex;" src="up.gif" border="0"></a> <a href="javascript:void(0);" onmouseover="movedown(\''+contentid+'\', '+speed+')" onmouseout="clearTimeout(movedownvar)"><img style="padding:1ex 1ex 1ex .5ex;" src="down.gif" border="0"></a></td></tr>\n');
document.write('</table>\n');
}
}

</script>
</head>
<body>
<script type="text/javascript">

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

//specify speed of scroller (greater=faster)
speed=3;
//specify unique content id
contentid="content";
//specify scroller width
scrollerwidth=175;
//specify scroller height
scrollerheight=160;
//specify scroller border [width, style, color]
scrollerborder=['1px', 'solid', 'black']

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


<p style="margin-top:.5ex;"><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
<p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
content on a page to change on the fly, without reloading the page</font></p>
<p><font size="2" face="Arial">- CSS allows for the separation between content
definition and formatting</font></p>
<p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
<p style="margin-bottom:0;"><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and paste DHTML scripts</font></p>


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



<script type="text/javascript">

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

//specify speed of scroller (greater=faster)
speed=7;
//specify unique content id
contentid="content2";
//specify scroller width
scrollerwidth=210;
//specify scroller height
scrollerheight=115;
//specify scroller border [width, style, color]
scrollerborder=['4px', 'outset', 'blue']

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


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


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


</body>
</html>