PDA

View Full Version : Slide-in Scroller



theswimmer
11-01-2007, 03:46 AM
1) Script Title: Slide-in scroller

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/slidescroll.htm

3) Describe problem: The script works great. The question I have: what if I want to display more than one "slidescroll" on the page at a time. In lamen's terms, can anyone tell me how to do this? I would like them to display horizontally, 1, 2, 3. "1" being one set of information, scrolling, and "2" being another set of information, scrolling, etc. :confused:

jscheuer1
11-01-2007, 07:00 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
//Slide-in scoller- Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

var scroller1={
//Configure delay between messages (4000=4 secs):
delay:2000,
//Configure scroller width
scrollwidth:"200px",
//Configure scroller height
scrollheight:"75px",
//This variable specifies the initial negative offset of each msg
//You may wish to increase it if your scroller is to the right of page horizontally
hoffset:-10,
openingtag:'<font face="Arial" size=3>',
closingtag:'</font>',
m:[]};
with(scroller1){
//Configure messages. Extend array as needed:
m[0]='<b>message 1.1 here</b>'
m[1]='<b>message 1.2 here</b>'
m[2]='<b>message 1.3 here</b>'
};

var scroller2={
//Configure delay between messages (4000=4 secs):
delay:3000,
//Configure scroller width
scrollwidth:"400px",
//Configure scroller height
scrollheight:"75px",
//This variable specifies the initial negative offset of each msg
//You may wish to increase it if your scroller is to the right of page horizontally
hoffset:-10,
openingtag:'<div style="font-family:\'comic sans ms\',cursive;font-size:90%;color:red;">',
closingtag:'</div>',
m:[]};
with(scroller2){
//Configure messages. Extend array as needed:
m[0]='<b>A longer message 2.1 here</b>'
m[1]='<b>A longer message 2.2 here</b>'
m[2]='<b>A longer message 2.3 here</b>'
};

////////////////////// Stop Editing //////////////////////
function sis(inst){
if(!document.getElementById&&!document.all)
return;
this.inc=1;
this.inst=inst;
sis.id=sis.id? sis.id+1 : 1;
this.id=sis.id;
document.write(inst.openingtag+'<div id="flyin'+sis.id+'" style="position:relative;width:'+
inst.scrollwidth+';height:'+inst.scrollheight+';">'+inst.m[0]+'</div>'+inst.closingtag);
this.crossobj=document.getElementById? document.getElementById("flyin"+this.id) : document.all['flyin'+this.id];
var cacheobj=this;
setTimeout(function(){cacheobj.updatemsg();},this.inst.delay+1000);
}
sis.prototype.updatemsg=function(){
this.crossobj.style.left="-2000px";
this.crossobj.style.fontStyle="italic";
this.crossobj.innerHTML=this.inst.m[this.inc];
this.crossobj.style.left=this.crossobj.offsetWidth*(-1)+this.inst.hoffset+"px";
var cacheobj=this;
this.start=setInterval(function(){cacheobj.animatein();},50);
this.inc=(this.inc<this.inst.m.length-1)? this.inc+1 : 0;
}
sis.prototype.animatein=function(){
if (parseInt(this.crossobj.style.left)<0)
this.crossobj.style.left=parseInt(this.crossobj.style.left)+20+"px";
else{
this.crossobj.style.left=0;
this.crossobj.style.fontStyle="normal";
clearInterval(this.start);
var cacheobj=this;
setTimeout(function(){cacheobj.updatemsg();},this.inst.delay+1000);
}
}
</script>
</head>
<body>
<script type="text/javascript">
new sis(scroller1);
</script>
<script type="text/javascript">
new sis(scroller2);
</script>

</body>
</html>

theswimmer
11-01-2007, 06:03 PM
That's awesome! Thank you!

One more question: Is it possible to reverse it, make it slide in from the right?

jscheuer1
11-01-2007, 10:17 PM
Sure, but the left and the right side of the window are not equivalent in all ways. Here is a demo that includes the ability to set the direction. However, you should take a look at the body section and how I have altered it by adding a container division for the right entering scroller with float:right;overflow:hidden;position:relative, and cleared the float after both scrollers. Exactly how you would accommodate the right entering scroller could (probably will) depend on the rest of the markup of your page. And the styles for the added division(s) should be set in a stylesheet, but can be set inline as shown in the below:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

//Slide-in scoller- Dynamic Drive (www.dynamicdrive.com)
//For full source code, 100's more DHTML scripts, and TOS,
//visit http://www.dynamicdrive.com

var scroller1={
//Configure direction to scroll in from:
dir:'right',
//Configure delay between messages (4000=4 secs):
delay:2000,
//Configure scroller width
scrollwidth:"200px",
//Configure scroller height
scrollheight:"75px",
//This variable specifies the initial negative offset of each msg
//You may wish to increase it if your scroller is to the right of page horizontally
hoffset:-10,
openingtag:'<font face="Arial" size=3>',
closingtag:'<\/font>',
m:[]};
with(scroller1){
//Configure messages. Extend array as needed:
m[0]='<b>message 1.1 here<\/b>'
m[1]='<b>message 1.2 here<\/b>'
m[2]='<b>message 1.3 here<\/b>'
};

var scroller2={
//Configure direction to scroll in from:
dir:'left',
//Configure delay between messages (4000=4 secs):
delay:3000,
//Configure scroller width
scrollwidth:"400px",
//Configure scroller height
scrollheight:"75px",
//This variable specifies the initial negative offset of each msg
//You may wish to increase it if your scroller is to the right of page horizontally
hoffset:-10,
openingtag:'<div style="font-family:\'comic sans ms\',cursive;font-size:90%;color:red;">',
closingtag:'<\/div>',
m:[]};
with(scroller2){
//Configure messages. Extend array as needed:
m[0]='<b>A longer message 2.1 here<\/b>'
m[1]='<b>A longer message 2.2 here<\/b>'
m[2]='<b>A longer message 2.3 here<\/b>'
};

////////////////////// Stop Editing //////////////////////
function sis(inst){
if(!document.getElementById&&!document.all)
return;
this.inc=1;
this.inst=inst;
sis.id=sis.id? sis.id+1 : 1;
this.id=sis.id;
document.write(inst.openingtag+'<div id="flyin'+sis.id+'" style="position:relative;width:'+
inst.scrollwidth+';height:'+inst.scrollheight+';text-align:'+inst.dir+'">'+inst.m[0]+'<\/div>'+inst.closingtag);
this.crossobj=document.getElementById? document.getElementById("flyin"+this.id) : document.all['flyin'+this.id];
var cacheobj=this;
setTimeout(function(){cacheobj.updatemsg();},this.inst.delay+1000);
}
sis.prototype.updatemsg=function(){
this.crossobj.style[this.inst.dir]="-2000px";
this.crossobj.style.fontStyle="italic";
this.crossobj.innerHTML=this.inst.m[this.inc];
this.crossobj.style[this.inst.dir]=this.crossobj.offsetWidth*(-1)+this.inst.hoffset+"px";
var cacheobj=this;
this.start=setInterval(function(){cacheobj.animatein();},50);
this.inc=(this.inc<this.inst.m.length-1)? this.inc+1 : 0;
}
sis.prototype.animatein=function(){
if (parseInt(this.crossobj.style[this.inst.dir])<0)
this.crossobj.style[this.inst.dir]=parseInt(this.crossobj.style[this.inst.dir])+20+"px";
else{
this.crossobj.style[this.inst.dir]=0;
this.crossobj.style.fontStyle="normal";
clearInterval(this.start);
var cacheobj=this;
setTimeout(function(){cacheobj.updatemsg();},this.inst.delay+1000);
}
}
</script>
</head>
<body>
<div style="float:right;overflow:hidden;position:relative;"><script type="text/javascript">
new sis(scroller1);
</script></div>
<script type="text/javascript">
new sis(scroller2);
</script>
<div style="clear:right;"></div>
</body>
</html>