Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Continuous JavaScript Scrolling Tweak?

    I am using the code below and was wondering if someone can help me. Right now, the code scrolls until the text is off the page before starting again. I have replaced the text with images and wanted them to scroll seamlessly to the first image starts again right after the last image. I expect it is simple, but I cannot figure it out. Thanks in advance...

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <style type="text/css">
    
    #wrapper {
    
    background-color: #C96;
    padding: 50px;
    height: 300px;
    width: 300px;
    }
    
    #marqueecontainer{
    position: relative;
    width: 300px; /*marquee width */
    height: 300px; /*marquee height */
    background-color: white;
    
    overflow: hidden;
    
    }
    
    
    }
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var actualheight=''
    
    function scrollmarquee(){
    if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
    else //else, reset to original position
    cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
    }
    
    function initializemarquee(){
    cross_marquee=document.getElementById("vmarquee")
    cross_marquee.style.top=0
    marqueeheight=document.getElementById("marqueecontainer").offsetHeight
    actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee
    
    
    </script>
    
    
    
    
    
    
    <body>
    <div id="wrapper"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee" style="position: absolute; width: 98%;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <h4>Your scroller contents</h4>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </div>
    
    </div><!--wrapper end div-->
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <style type="text/css">
    
    #wrapper {
    
    background-color: #C96;
    padding: 50px;
    height: 300px;
    width: 300px;
    }
    
    #marqueecontainer{
    position: relative;
    width: 300px; /*marquee width */
    height: 300px; /*marquee height */
    background-color: white;
    
    overflow: hidden;
    
    }
    
    
    }
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var actualheight=''
    
    function scrollmarquee(){
    if (parseInt(cross_marquee.style.top)>-actualheight) //if scroller hasn't reached the end of its height
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
    else //else, reset to original position
    cross_marquee.style.top=0+"px"
    }
    
    function initializemarquee(){
     var obj=document.getElementById("marqueecontainer"),h,d,ary=[],z0=0;
     marqueeheight=obj.offsetHeight
     cross_marquee=obj.getElementsByTagName('DIV')[0];
     actualheight=h=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
     while (h<marqueeheight+actualheight){
      ary.push(cross_marquee.cloneNode(true));
      h+=actualheight;
     }
     for (;z0<ary.length;z0++){
      cross_marquee.appendChild(ary[z0]);
     }
     cross_marquee.style.top=0
     if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
     cross_marquee.style.height=marqueeheight+"px"
    
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee
    
    
    </script>
    
    
    
    
    
    
    <body>
    <div id="wrapper"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div style="position:relative;left:0px; width: 98%;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <h4>Your scroller contents</h4>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </div>
    
    </div><!--wrapper end div-->
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Rick5150 (12-29-2011)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Beautiful, thank you! I put your javascript in a separate file and then modified all the HTML and CSS to fit my needs and it looks great. Thank you again.

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Another quick question... is this the code I need to edit to make the scroller move from top to bottom instead of bottom to top?

    Code:
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
    else //else, reset to original position
    cross_marquee.style.top=0+"px"
    }
    Then of course, the follow-up question is how would I do it?

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <style type="text/css">
    
    #wrapper {
    
    background-color: #C96;
    padding: 50px;
    height: 300px;
    width: 300px;
    }
    
    #marqueecontainer{
    position: relative;
    width: 300px; /*marquee width */
    height: 300px; /*marquee height */
    background-color: white;
    
    overflow: hidden;
    
    }
    
    
    }
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=-1 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var actualheight=''
    
    function scrollmarquee(){
     var top=parseInt(cross_marquee.style.top);
     if ((copyspeed>0&&top>-actualheight)||(copyspeed<0&&top<0)){ //if scroller hasn't reached the end of its height
      cross_marquee.style.top=top-copyspeed+"px" //move scroller upwards
     }
     else if (copyspeed!=0){//else, reset to original position
      cross_marquee.style.top=top+actualheight*(copyspeed<0?-1:1)+"px"
     }
    }
    
    function initializemarquee(){
     var obj=document.getElementById("marqueecontainer"),h,d,ary=[],z0=0;
     marqueeheight=obj.offsetHeight
     cross_marquee=obj.getElementsByTagName('DIV')[0];
     actualheight=h=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
     while (h<marqueeheight+actualheight){
      ary.push(cross_marquee.cloneNode(true));
      h+=actualheight;
     }
     for (;z0<ary.length;z0++){
      cross_marquee.appendChild(ary[z0]);
     }
     cross_marquee.style.top=0
     if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
     cross_marquee.style.height=marqueeheight+"px"
    
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee
    
    
    </script>
    
    
    
    
    
    
    <body>
    <div id="wrapper"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div style="position:relative;left:0px; width: 98%;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <h4>Your scroller contents</h4>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </div>
    
    </div><!--wrapper end div-->
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Rick5150 (12-30-2011)

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    That is great, but unfortunately, it interferes with other javascript I have on the page. Too bad, as I it looked better when scrolling downward.

    If you look here you can see what I mean. I will leave the page alone until you see what I mean.

    http://www.ricktheriault.net/new/test.html

    Basically, the scrolling of the top images is right to left and the advertisements on the left are bottom to top. I wanted the top images to remain right to left, and the advertisements to go from top to bottom.

    When I use your code to make the advertisements go from top to bottom, the top images scroll from left to right and do not flow continuously as they do in the other direction. In fact, they scroll right off the right edge and are never seen from again.

    I will leave it the way it is, I guess and appreciate the help though. You sure know your stuff and your responses are really quick. Thank you for that.

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    both scripts use global variable copyspeed

    change 1 to copyspeed2

    Code:
    var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=-1 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed2=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed2: 0
    var actualheight=''
    
    function scrollmarquee(){
     var top=parseInt(cross_marquee.style.top);
     if ((copyspeed2>0&&top>-actualheight)||(copyspeed2<0&&top<0)){ //if scroller hasn't reached the end of its height
      cross_marquee.style.top=top-copyspeed2+"px" //move scroller upwards
     }
     else if (copyspeed2!=0){//else, reset to original position
      cross_marquee.style.top=top+actualheight*(copyspeed2<0?-1:1)+"px"
     }
    }
    
    function initializemarquee(){
     var obj=document.getElementById("adcontainer"),h,d,ary=[],z0=0;
     marqueeheight=obj.offsetHeight
     cross_marquee=obj.getElementsByTagName('DIV')[0];
     actualheight=h=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
     while (h<marqueeheight+actualheight){
      ary.push(cross_marquee.cloneNode(true));
      h+=actualheight;
     }
     for (;z0<ary.length;z0++){
      cross_marquee.appendChild(ary[z0]);
     }
     cross_marquee.style.top=0
     if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
     cross_marquee.style.height=marqueeheight+"px"
    
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee
    and

    Code:
    <div id="adcontainer" onMouseover="copyspeed2=pausespeed" onMouseout="copyspeed2=marqueespeed">
    or

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <style type="text/css">
    
    #m1{
    position: relative;
    width: 300px; /*marquee width */
    height: 300px; /*marquee height */
    background-color: white;
    border:solid red 1px;
    overflow: hidden;
    
    }
    
    #m2{
    position: relative;
    width: 600px; /*marquee width */
    height: 150px; /*marquee height */
    background-color: white;
    border:solid red 1px;
    overflow: hidden;
    
    }
    
    #m2 IMG{
     float:left;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    
    function scrollmarquee(){
     var data=marquee.data,top,spd,z0=0;
     for (;z0<data.length;z0++){
      top=parseInt(data[z0][1].style[data[z0][3]]);
      spd=marquee[data[z0][0]];
      if ((spd>0&&top>-data[z0][2])||(spd<0&&top<0)){ //if scroller hasn't reached the end of its height
       data[z0][1].style[data[z0][3]]=top-spd+"px" //move scroller upwards
      }
      else if (spd!=0){//else, reset to original position
       data[z0][1].style[data[z0][3]]=top+data[z0][2]*(spd<0?-1:1)+"px"
      }
     }
    }
    
    function marquee(id,mde,spd){
     if (!marquee.data){
      marquee.data=[];
     }
     var obj=document.getElementById(id),cm=obj.getElementsByTagName('DIV')[0],mh=mde=='left'?obj.offsetWidth:obj.offsetHeight,ah=mde=='left'?cm.offsetWidth:cm.offsetHeight,h=ah,c,ary=[],z0=0;
     while (h<mh+ah){
      c=cm.cloneNode(true);
      c.style[mde]=h+'px';
      ary.push(c);
      h+=ah;
     }
     for (;z0<ary.length;z0++){
      cm.appendChild(ary[z0]);
     }
     cm.style[mde]=0+'px';
     marquee[id]=spd;
     marquee.data.push([id,cm,ah,mde]);
     clearTimeout(marquee.to);
     marquee.to=setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll);
    }
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
      marquee('m1','top',-1);
      marquee('m2','left',1);
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    
    </script>
    
    
    
    
    
    
    <body>
    
     <div id="m1" onmouseover="marquee['m1']=0;" onmouseout="marquee['m1']=-1;">
      <div style="position:absolute;left:0px; width: 98%;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <h4>Your scroller contents</h4>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
      </div>
     </div>
    
     <div id="m2" onmouseover="marquee['m2']=0;" onmouseout="marquee['m2']=1;">
      <div style="position:absolute;top:0px; width:400px;">
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
    <!--YOUR SCROLL CONTENT HERE-->
    
    <h4>Your scroller contents</h4>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
      </div>
     </div>
    
    </body>
    </html>
    Last edited by vwphillips; 12-31-2011 at 04:46 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Rick5150 (12-31-2011)


  •  

    Posting Permissions

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