Advanced Search

Results 1 to 7 of 7

Thread: Make Cross Browser Marquee II display content randomly on page load

  1. #1
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Make Cross Browser Marquee II display content randomly on page load

    1) Script Title: Cross Browser Marquee II

    2) Script URL (on DD): link to script

    3) Describe problem: I'm considering using this script for reviews on my website especially because I like the vertical scrolling instead of left to right. I would like for a random review to display on page load. Is there a way to add this functionality to this script?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
    <style type="text/css">
    
    #marqueecontainer{
    position: relative;
    width: 200px; /*marquee width */
    height: 200px; /*marquee height */
    background-color: white;
    overflow: hidden;
    border: 3px solid orange;
    padding: 2px;
    padding-left: 4px;
    }
    
    </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.
    Modified 30-October-2013
    ***********************************************/
    
    
    function scrollmarquee(){
     if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)){
      cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px";
     }
     else {
      cross_marquee.style.top=parseInt(marqueeheight)+8+"px";
     }
    }
    
    function marqueescroll(o){
     marqueePause(o.id);
     o.srt+=o.ss;
     if ((o.ss<0&&o.srt>o.h)||(o.ss>0&&o.srt<o.ph)){
      o.s.style.top=o.srt+'px';
     }
     else {
      o.srt=o.ss<0?o.ph:o.h;
      o.s.style.top=o.srt+'px';
     }
     o.to=setTimeout(function(){ marqueescroll(o); },30);
    }
    
    function marquee(o){
     var id=o.ID,ss=o.Speed,i=o.StartIndex,srt=o.AutoDelay,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,ary=[],z0=0;
     if (s){
      var clds=s.childNodes,o=marquee[id]={
       id:id,
       p:p,
       h:-s.offsetHeight,
       ph:p.offsetHeight,
       s:s,
       ss:typeof(ss)=='number'&&ss!=0?ss:-2,
       srt:0
      }
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        ary.push(clds[z0]);
       }
      }
      ary[i]?o.srt=-ary[i].offsetTop:null;
      o.s.style.position='absolute';
      o.s.style.top=o.srt+'px';
      typeof(srt)=='number'&&srt>1?marqueeAuto(id,srt):null;
     }
    }
    
    function marqueeAuto(id,ms){
     var o=marquee[id];
     o?o.to=setTimeout(function(){ marqueescroll(o); },ms||200):null;
    }
    
    function marqueePause(id){
     var o=marquee[id];
     o?clearTimeout(o.to):null;
    }
    
    function marqueeInit(){
     marquee({
      ID:'marqueecontainer', // the unique ID name of the parent DIV.                        (string)
      AutoDelay:2000,        //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
      Speed:-2,              //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
      StartIndex:Math.floor(Math.random()*4)           //(optional) the index number of the element to start.          (number, default = 0)
     });
    }
    
    if (window.addEventListener)
     window.addEventListener("load",marqueeInit,false);
    else if (window.attachEvent)
     window.attachEvent("onload",marqueeInit);
    else if (document.getElementById);
     window.onload=marqueeInit;
    
    
    </script>
    
    </head>
    
    <body>
    <div id="marqueecontainer" onMouseover="marqueePause('marqueecontainer');" onMouseout="marqueeAuto('marqueecontainer');">
    <div style="position: absolute; width: 98%;">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    <p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
    Ajax category added</a></b><br>
    The Dynamic Content category has just been branched out with a new
    <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
    to better organize its scripts.</p>
    <p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
    We're excited to introduce our latest web tool- Gradient Image Maker!</p>
    <p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
    Check out our new forums for help on our scripts and coding in general.</p>
    <p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
    Usage update</a></b><br>
    Please review our updated usage terms regarding putting our scripts in an
    external .js file. </p>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </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/

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

    tellisonii (10-30-2013)

  4. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    
    .marqueecontainer{
    position: relative;
    width: 200px; /*marquee width */
    height: 200px; /*marquee height */
    background-color: white;
    border: 3px solid orange;
    padding: 2px;
    padding-left: 4px;
    }
    .marqueecontainer .slide{
     width:200px;
    }
    
    .marqueecontainer .slide DIV{
     width:190px; /*marquee width */
     height:200px; /*marquee height */
     padding:5px;
    }
    
    </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.
    Modified 30-October-2013
    ***********************************************/
    
    
    function scrollmarquee(){
     if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)){
      cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px";
     }
     else {
      cross_marquee.style.top=parseInt(marqueeheight)+8+"px";
     }
    }
    
    function marqueescroll(o){
     marqueePause(o.id);
     o.srt+=o.ss;
     if ((o.ss<0&&o.srt>o.h)||(o.ss>0&&o.srt<o.ph)){
      o.s.style[o.m]=o.srt+'px';
     }
     else {
      o.srt=o.ss<0?o.ph:o.h;
      o.s.style[o.m]=o.srt+'px';
     }
     o.to=setTimeout(function(){ marqueescroll(o); },30);
    }
    
    function marquee(o){
     var id=o.ID,m=o.Mode,ss=o.Speed,i=o.StartIndex,srt=o.AutoDelay,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,clds=s?s.childNodes:[],ary=[],sz,l,z0=0;
     if (s){
      m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='H'?['left','offsetLeft','offsetWidth']:['top','offsetTop','offsetHeight'],sz=p[m[2]];
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        if (m[0]=='left'){
         clds[z0].style.position='absolute';
         clds[z0].style.left=sz*ary.length+'px';
         clds[z0].style.top='0px';
        }
        ary.push(clds[z0]);
       }
      }
      l=ary[ary.length-1];
      o=marquee[id]={
       m:m[0],
       id:id,
       p:p,
       h:-(l[m[1]]+l[m[2]]),
       ph:sz,
       s:s,
       ss:typeof(ss)=='number'&&ss!=0?ss:-2
      }
      o.srt=ary[i]?-ary[i][m[1]]:0;
      o.s.style.position='absolute';
      o.s.style[m[0]]=o.srt+'px';
      p.style.overflow='hidden';
      typeof(srt)=='number'&&srt>1?marqueeAuto(id,srt):null;
     }
    }
    
    function marqueeAuto(id,ms){
     var o=marquee[id];
     o?o.to=setTimeout(function(){ marqueescroll(o); },ms||200):null;
    }
    
    function marqueePause(id){
     var o=marquee[id];
     o?clearTimeout(o.to):null;
    }
    
    function marqueeInit(){
    
     marquee({
      ID:'marqueecontainer', // the unique ID name of the parent DIV.                        (string)
      Mode:'vertical',       // the display type, 'vertical' or 'horizontal'                 (string. defalut = 'vertical')
      AutoDelay:2000,        //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
      Speed:-2,              //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
      StartIndex:Math.floor(Math.random()*4)           //(optional) the index number of the element to start.          (number, default = 0)
     });
    
     marquee({
      ID:'marqueecontainer2', // the unique ID name of the parent DIV.                        (string)
      Mode:'horizontal',     // the display type, 'vertical' or 'horizontal'                 (string. defalut = 'vertical')
      AutoDelay:2000,        //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
      Speed:2,              //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
      StartIndex:0           //(optional) the index number of the element to start.          (number, default = 0)
     });
    
    }
    
    if (window.addEventListener)
     window.addEventListener("load",marqueeInit,false);
    else if (window.attachEvent)
     window.attachEvent("onload",marqueeInit);
    else if (document.getElementById);
     window.onload=marqueeInit;
    
    
    </script>
    
    </head>
    
    <body>
    <div id="marqueecontainer" class="marqueecontainer" onMouseover="marqueePause('marqueecontainer');" onMouseout="marqueeAuto('marqueecontainer');">
     <div  class="slide">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
      <div>
       <b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
       Ajax category added</a></b><br>
       The Dynamic Content category has just been branched out with a new
       <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
       to better organize its scripts.
      </div>
      <div>
       <b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
       We're excited to introduce our latest web tool- Gradient Image Maker!
      </div>
      <div>
       <b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
       Check out our new forums for help on our scripts and coding in general.
      </div>
      <div align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
       Usage update</a></b><br>
       Please review our updated usage terms regarding putting our scripts in an
       external .js file.
      </div>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </div>
    <div id="marqueecontainer2" class="marqueecontainer" onMouseover="marqueePause('marqueecontainer2');" onMouseout="marqueeAuto('marqueecontainer2');">
     <div  class="slide">
    
    <!--YOUR SCROLL CONTENT HERE-->
    
      <div>
       <b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
       Ajax category added</a></b><br>
       The Dynamic Content category has just been branched out with a new
       <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
       to better organize its scripts.
      </div>
      <div>
       <b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
       We're excited to introduce our latest web tool- Gradient Image Maker!
      </div>
      <div>
       <b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
       Check out our new forums for help on our scripts and coding in general.
      </div>
      <div align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
       Usage update</a></b><br>
       Please review our updated usage terms regarding putting our scripts in an
       external .js file.
      </div>
    
    <!--YOUR SCROLL CONTENT HERE-->
    
    </div>
    </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/

  5. #4
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    thanks vwphillips for your quick response. the first response you supplied works great. i was wondering however if there is a way to eliminate the blank space that shows up in the marquee between the last and first <p>'s while it is scrolling. is this possible?

    edit: i just noticed that the pause on mouse over is not working for some reason
    Last edited by tellisonii; 10-30-2013 at 06:08 PM.

  6. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    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>
            <style type="text/css">
    
            .marqueecontainer{
            position: relative;
            width: 200px; /*marquee width */
            height: 200px; /*marquee height */
            background-color: white;
            border: 3px solid orange;
            }
            .marqueecontainer .slide{
             width:200px;
             left:0px;top:0px;
             padding:0px;
            }
    
            .marqueecontainer .slide DIV{
             width:190px; /*marquee width */
             padding:5px;
            }
    
    
            </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.
            Modified 30-October-2013
            ***********************************************/
    
    
            function marqueescroll(o){
             marqueePause(o.id);
             o.srt+=o.ss;
             if ((o.ss<0&&o.srt>o.sz)||(o.ss>0&&o.srt<(o.w?-o.sz:o.psz))){
              o.s.style[o.m]=o.srt+'px';
             }
             else {
              o.srt=(o.w?0:o.ss<0?o.psz:o.sz)+o.ss;
              o.s.style[o.m]=o.srt+'px';
             }
             o.to=setTimeout(function(){ marqueescroll(o); },30);
            }
    
            function marquee(o){
             var id=o.ID,m=o.Mode,ss=o.Speed,i=o.StartIndex,srt=o.AutoDelay,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,clds=s?s.childNodes:[],ary=[],sz,l,z0=0;
             if (s&&!marquee[id]){
              var m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='H'?['left','offsetLeft','offsetWidth']:['top','offsetTop','offsetHeight'],sz=p[m[2]],slide=document.createElement('DIV'),c;
              slide.style.position=s.style.position='absolute';
              for (;z0<clds.length;z0++){
               if (clds[z0].nodeType==1){
                if (m[0]=='left'){
                 clds[z0].style.position='absolute';
                 clds[z0].style.left=sz*ary.length+'px';
                 clds[z0].style.top='0px';
                }
                ary.push([clds[z0],clds[z0][m[1]]]);
               }
              }
              l=ary[ary.length-1][0];
              o=marquee[id]={
               m:m[0],
               id:id,
               p:p,
               sz:-(l[m[1]]+l[m[2]]),
               psz:sz,
               s:slide,
               ss:typeof(ss)=='number'&&ss!=0?ss:-2,
               w:o.Wrap!==false
              }
              o.s.appendChild(s);
              c=s.cloneNode(true);
              c.style.left=c.style.top='0px';
              c.style[m[0]]=o.sz*(ss>0?1:-1)+'px';
              o.w?o.s.appendChild(c):null;
               o.srt=ary[i]?-ary[i][1]:0;
              o.s.style.position='absolute';
              o.s.style[m[0]]=o.srt+'px';
              p.appendChild(o.s);
              p.style.overflow='hidden';
              typeof(srt)=='number'&&srt>1?marqueeAuto(id,srt):null;
             }
            }
    
            function marqueeAuto(id,ms){
             var o=marquee[id];
             o?o.to=setTimeout(function(){ marqueescroll(o); },ms||200):null;
            }
    
            function marqueePause(id){
             var o=marquee[id];
             o?clearTimeout(o.to):null;
            }
    
            function marqueeInit(){
    
             marquee({
              ID:'marqueecontainer', // the unique ID name of the parent DIV.                        (string)
              Mode:'vertical',       // the display type, 'vertical' or 'horizontal'                 (string. defalut = 'vertical')
              AutoDelay:2000,        //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
              Speed:-2,              //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
              Wrap:true,             //(optional) true = no gap, false = gap.                        (boolean, default = true)
              StartIndex:Math.floor(Math.random()*4)           //(optional) the index number of the element to start.          (number, default = 0)
             });
    
             marquee({
              ID:'marqueecontainer2', // the unique ID name of the parent DIV.                        (string)
              Mode:'horizontal',     // the display type, 'vertical' or 'horizontal'                 (string. defalut = 'vertical')
              AutoDelay:2000,        //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
              Speed:2,               //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
              StartIndex:0           //(optional) the index number of the element to start.          (number, default = 0)
             });
    
            }
    
            if (window.addEventListener)
             window.addEventListener("load",marqueeInit,false);
            else if (window.attachEvent)
             window.attachEvent("onload",marqueeInit);
            else if (document.getElementById);
             window.onload=marqueeInit;
    
    
            </script>
    
            </head>
    
            <body>
            <div id="marqueecontainer" class="marqueecontainer" onMouseover="marqueePause('marqueecontainer');" onMouseout="marqueeAuto('marqueecontainer');">
             <div  class="slide">
    
            <!--YOUR SCROLL CONTENT HERE-->
    
              <div>
               <b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">1 Iframe &amp;
               Ajax category added</a></b><br>
               The Dynamic Content category has just been branched out with a new
               <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
               to better organize its scripts.
              </div>
              <div>
               <b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
               We're excited to introduce our latest web tool- Gradient Image Maker!
              </div>
              <div>
               <b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
               Check out our new forums for help on our scripts and coding in general.
              </div>
              <div align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
               Usage update</a></b><br>
               Please review our updated usage terms regarding putting our scripts in an
               external .js file.
              </div>
    
            <!--YOUR SCROLL CONTENT HERE-->
    
            </div>
            </div>
    
            <div id="marqueecontainer2" class="marqueecontainer" onMouseover="marqueePause('marqueecontainer2');" onMouseout="marqueeAuto('marqueecontainer2');">
             <div  class="slide">
    
    
              <div>
               <b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
               Ajax category added</a></b><br>
               The Dynamic Content category has just been branched out with a new
               <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
               to better organize its scripts.
              </div>
              <div>
               <b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
               We're excited to introduce our latest web tool- Gradient Image Maker!
              </div>
              <div>
               <b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
               Check out our new forums for help on our scripts and coding in general.
              </div>
              <div align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
               Usage update</a></b><br>
               Please review our updated usage terms regarding putting our scripts in an
               external .js file.
              </div>
    
    
            </div>
            </div>
    
          </body>
    
            </html>
    make sure the event calls have the correct IDs(the same as the marque DIV IDs)

    Code:
    onMouseover="marqueePause('marqueecontainer');" onMouseout="marqueeAuto('marqueecontainer');"
    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/

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

    tellisonii (10-31-2013)

  8. #6
    Join Date
    Oct 2013
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    thanks vwphillips. this fixed everything. i did have to edit the css some and write in an inherit width property through javascript to make this work for my fluid bootstrap site, but other than that great fix. you can check out the edits i made at this jsfiddle

  9. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,708
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    with dynamic resizing

    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>
            <style type="text/css">
    
            .marqueecontainer{
            position: relative;
            width: 200px; /*marquee width */
            height: 200px; /*marquee height */
            background-color: white;
            border: 3px solid orange;
            }
            .marqueecontainer .slide{
             width:200px;
             left:0px;top:0px;
             padding:0px;
            }
    
            .marqueecontainer .slide DIV{
             width:190px; /*marquee width */
             padding:5px;
            }
    
    
            </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.
            Modified 30-October-2013
            ***********************************************/
    
    
            function marqueescroll(o){
             marqueePause(o.id);
             o.psz=o.p[o.m[2]];
             o.sz=-(o.l[o.m[1]]+o.l[o.m[2]]);
             o.srt+=o.ss;
             if ((o.ss<0&&o.srt>o.sz)||(o.ss>0&&o.srt<(o.w?-o.sz:o.psz))){
              o.s.style[o.m[0]]=o.srt+'px';
             }
             else {
              o.srt=(o.w?0:o.ss<0?o.psz:o.sz)+o.ss;
              o.s.style[o.m[0]]=o.srt+'px';
             }
             o.to=setTimeout(function(){ marqueescroll(o); },30);
            }
    
            function marquee(o){
             var id=o.ID,m=o.Mode,ss=o.Speed,i=o.StartIndex,srt=o.AutoDelay,p=document.getElementById(id),s=p?p.getElementsByTagName('DIV')[0]:null,clds=s?s.childNodes:[],ary=[],sz,l,z0=0;
             if (s&&!marquee[id]){
              var m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='H'?['left','offsetLeft','offsetWidth']:['top','offsetTop','offsetHeight'],sz=p[m[2]],slide=document.createElement('DIV'),c;
              slide.style.position=s.style.position='absolute';
              for (;z0<clds.length;z0++){
               if (clds[z0].nodeType==1){
                if (m[0]=='left'){
                 clds[z0].style.position='absolute';
                 clds[z0].style.left=sz*ary.length+'px';
                 clds[z0].style.top='0px';
                }
                ary.push([clds[z0],clds[z0][m[1]]]);
               }
              }
              l=ary[ary.length-1][0];
              o=marquee[id]={
               l:l,
               m:m,
               id:id,
               p:p,
               sz:-(l[m[1]]+l[m[2]]),
               psz:sz,
               s:slide,
               ss:typeof(ss)=='number'&&ss!=0?ss:-2,
               w:o.Wrap!==false
              }
              o.s.appendChild(s);
              c=s.cloneNode(true);
              c.style.left=c.style.top='0px';
              c.style[m[0]]=o.sz*(ss>0?1:-1)+'px';
              o.w?o.s.appendChild(c):null;
               o.srt=ary[i]?-ary[i][1]:0;
              o.s.style.position='absolute';
              o.s.style[m[0]]=o.srt+'px';
              p.appendChild(o.s);
              p.style.overflow='hidden';
              typeof(srt)=='number'&&srt>1?marqueeAuto(id,srt):null;
             }
            }
    
            function marqueeAuto(id,ms){
             var o=marquee[id];
             o?o.to=setTimeout(function(){ marqueescroll(o); },ms||200):null;
            }
    
            function marqueePause(id){
             var o=marquee[id];
             o?clearTimeout(o.to):null;
            }
    
            function marqueeInit(){
    
             marquee({
              ID:'marqueecontainer', // the unique ID name of the parent DIV.                        (string)
              Mode:'vertical',       // the display type, 'vertical' or 'horizontal'                 (string. defalut = 'vertical')
              AutoDelay:2000,        //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
              Speed:-2,              //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
              Wrap:true,             //(optional) true = no gap, false = gap.                        (boolean, default = true)
              StartIndex:Math.floor(Math.random()*4)           //(optional) the index number of the element to start.          (number, default = 0)
             });
    
             marquee({
              ID:'marqueecontainer2', // the unique ID name of the parent DIV.                        (string)
              Mode:'horizontal',     // the display type, 'vertical' or 'horizontal'                 (string. defalut = 'vertical')
              AutoDelay:2000,        //(optional) the delay before starting scroll in milli seconds. (number, default = no auto scroll)
              Speed:2,               //(optional) the scroll speed, < 0 = up. > 0 = down.            (number, default = -2)
              StartIndex:0           //(optional) the index number of the element to start.          (number, default = 0)
             });
    
            }
    
            if (window.addEventListener)
             window.addEventListener("load",marqueeInit,false);
            else if (window.attachEvent)
             window.attachEvent("onload",marqueeInit);
            else if (document.getElementById);
             window.onload=marqueeInit;
    
    
            </script>
    
            </head>
    
            <body>
            <div id="marqueecontainer" class="marqueecontainer" onMouseover="marqueePause('marqueecontainer');" onMouseout="marqueeAuto('marqueecontainer');">
             <div  class="slide">
    
            <!--YOUR SCROLL CONTENT HERE-->
    
              <div>
               <b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">1 Iframe &amp;
               Ajax category added</a></b><br>
               The Dynamic Content category has just been branched out with a new
               <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
               to better organize its scripts.
              </div>
              <div>
               <b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
               We're excited to introduce our latest web tool- Gradient Image Maker!
              </div>
              <div>
               <b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
               Check out our new forums for help on our scripts and coding in general.
              </div>
              <div align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
               Usage update</a></b><br>
               Please review our updated usage terms regarding putting our scripts in an
               external .js file.
              </div>
    
            <!--YOUR SCROLL CONTENT HERE-->
    
            </div>
            </div>
    
            <div id="marqueecontainer2" class="marqueecontainer" onMouseover="marqueePause('marqueecontainer2');" onMouseout="marqueeAuto('marqueecontainer2');">
             <div  class="slide">
    
    
              <div>
               <b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &amp;
               Ajax category added</a></b><br>
               The Dynamic Content category has just been branched out with a new
               <a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
               to better organize its scripts.
              </div>
              <div>
               <b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
               We're excited to introduce our latest web tool- Gradient Image Maker!
              </div>
              <div>
               <b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
               Check out our new forums for help on our scripts and coding in general.
              </div>
              <div align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
               Usage update</a></b><br>
               Please review our updated usage terms regarding putting our scripts in an
               external .js file.
              </div>
    
    
            </div>
            </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/

Similar Threads

  1. Cross browser Marquee script- can I add text to display randomly?
    By a1000w in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-27-2010, 04:29 PM
  2. Can Cross Browser marquee II load data from external source?
    By ladyviola in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-12-2008, 05:54 AM
  3. Cross Browser Marquee does not display in IE7
    By charleyhankins in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-24-2008, 06:57 PM
  4. script works in html page but not in php page Cross Browser marquee II ?
    By leonidassavvides in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-17-2007, 12:17 PM
  5. Cross Browser marquee II - more than one scrolling div on a page
    By Mindzai in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-23-2006, 06:28 AM

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
  •