Results 1 to 4 of 4

Thread: Slide-in Scroller

  1. #1
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Slide-in Scroller

    1) Script Title: Slide-in scroller

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lidescroll.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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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></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>
    Last edited by jscheuer1; 11-01-2007 at 09:30 AM. Reason: improve code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That's awesome! Thank you!

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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>
    Last edited by jscheuer1; 11-02-2007 at 07:15 AM. Reason: add ie style fix
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •