Manual Scroller - Three On One Page

**pfmdesigns** · 02-22-2005, 11:56 PM

I know you generally don't answer these types of questions, but I can really use some help here.

I am trying to get THREE SCROLLERS to work on the same page.
This is the scroller:
http://www.dynamicdrive.com/dynamici...nualscroll.htm

THIS IS WHERE I HAVE THE THREE SCROLLERS on one page:
http://pfmdzn.com/red/index2.html

Any help would be greatly appreciated.
Paul

**cr3ative** · 02-23-2005, 09:49 AM

:/

There's a link in my sig about multiple script management, and we don't usually carry out such time consuming modifications. Sorry.

cr3ative

**speedracer** · 02-23-2005, 10:12 AM

Originally Posted by pfmdesigns

THIS IS WHERE I HAVE THE THREE SCROLLERS on one page:
http://pfmdzn.com/red/index2.html

i saw your page and it will not work like that. seems you just have three copies of the script.

you will have to rename(different name in each of the scrollers) all relevant: functions, var, id, etc.

example:

scroller 1 (original)

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

scroller 2 (i have renamed all the relevant functions, varibles, id by adding a "2")

function movedown2(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj2.style.top)>=(contentheight2*(-1)+100))
crossobj2.style.top=parseInt(crossobj2.style.top)-speed+"px"
else if (ns4&&crossobj2.top>=(contentheight2*(-1)+100))
crossobj2.top-=speed
movedownvar=setTimeout("movedown2()",20)
}

i did not for instance, rename "speed" varible because its within the "movedown2" function and it will trigger only when that function is called.

after renaming them (now you have two different script), you will need to combine the scroller's onload functions in the <head>tag. here's more info: http://www.javascriptkit.com/javatut...iplejava.shtml
you will need to disable(or delete) the onload event in the script like this:

by adding the bold:
//window.onload=getcontent_height

hope this will give you little idea as to what you want to do on your page. this is a great scroller but its not written for multiple scroller. and honestly, i might be giving you bad approach to having multiple scripts but its an easy option. for mission critical and enterprise level projects, you might want to use little more advanced method to using mutiple layers on one page. there are other scripts already written for that purpose.

**pfmdesigns** · 02-24-2005, 12:38 AM

With your help, the three scrollers are working!

Thank you.
Paul

**W_C** · 11-30-2010, 02:36 AM

Hi there,
I'm new with script and coding. i dunno how to script and i know that this has been solved, but i tried and it's not working.

Can you elaborate more with full 3 of the scripts? Please

**vwphillips** · 11-30-2010, 11:22 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div style="background-color:#FFFFDD;width:155px"><center><a href="javascript:S1.movedown(-2);">Down</a>
 <a href="javascript:S1.movedown(2);">Up</a>
<a href="javascript:S1.stop()">Stop</a>  <a href="javascript:S1.top()">Top</a></center>
</div>
<div style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white">
<div id="content" style="position:absolute;width:155px;left:0px;top:0px">
<p><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><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>
<br />
<br />
</div>
</div>
<br />
<br />
<div style="background-color:#FFFFDD;width:155px"><center><a href="javascript:S2.movedown(-2);">Down</a>
 <a href="javascript:S2.movedown(2);">Up</a>
<a href="javascript:S2.stop()">Stop</a>  <a href="javascript:S2.top()">Top</a></center>
</div>
<div style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white">
<div id="content2" style="position:absolute;width:155px;left:0px;top:0px">
<p><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><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>
<br />
<br />
</div>
</div>

<br />
<br />
<div style="background-color:#FFFFDD;width:155px"><center><a href="javascript:S3.movedown(-2);">Down</a>
 <a href="javascript:S3.movedown(2);">Up</a>
<a href="javascript:S3.stop()">Stop</a>  <a href="javascript:S3.top()">Top</a></center>
</div>
<div style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white">
<div id="content3" style="position:absolute;width:155px;left:0px;top:0px">
<p><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><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>
<br />
<br />
</div>
</div>




<SCRIPT type="text/javascript">

function Scroller(id){
 this.obj=document.getElementById(id);
 this.height=this.obj.parentNode.offsetHeight-this.obj.offsetHeight;
 this.to=null;
}

Scroller.prototype={

 movedown:function(spd){
  this.stop();
  var oop=this,top=parseInt(this.obj.style.top);
  if ((spd<0&&top>=this.height)||(spd>0&&top<=0)){
   this.obj.style.top=top+spd+'px';
  }
  this.to=setTimeout(function(){ oop.movedown(spd); },50)
 },

 top:function(){
  this.stop();
  this.obj.style.top='0px';
 },

 stop:function(){
  clearTimeout(this.to);
 }

}

var S1=new Scroller('content');
var S2=new Scroller('content2');
var S3=new Scroller('content3');


</script>
</body>

</html>

**W_C** · 12-01-2010, 05:28 AM

thank you vwphillips.
It works. thanks a lot. Thank you. Thank you. Thank you.

Thread: Manual Scroller - Three On One Page

Thread Tools

Search Thread

Manual Scroller - Three On One Page

Thank You!

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions