Make Cross Browser Marquee II display content randomly on page load

**tellisonii** · 10-30-2013, 11:50 AM

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?

**vwphillips** · 10-30-2013, 04:35 PM

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>

**vwphillips** · 10-30-2013, 05:28 PM

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>

**tellisonii** · 10-30-2013, 05:56 PM

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

**vwphillips** · 10-31-2013, 11:25 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>
        <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');"

**tellisonii** · 10-31-2013, 09:32 PM

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

**vwphillips** · 11-01-2013, 07:25 AM

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>