Here is a more modular version of the script that allows for multiple version on a single page:
Code:
<!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>
<!-- INSERT CONTENT HERE -->
<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>
<!-- END CONTENT - Stop Editing -->
<script type="text/javascript">bottomwrite();</script>
<!-- End Scrollable content script III scroller module -->
<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>
<!-- 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>
<!-- END CONTENT - Stop Editing-->
<script type="text/javascript">bottomwrite();</script>
<!-- End Scrollable content script III scroller module -->
</body>
</html>
New Comer (less than 5 posts)
Scrollable content II
Posting Permissions
Reply With Quote
Bookmarks