Post
Ask Question

Display Multiple Marquee Div on Page

  1. <html>  
  2.   
  3.     <head>  
  4.         <title>Multiple Scroll Marquee on Page With Dynamic</title>  
  5.         <style type="text/css">  
  6.         .marqueecontainer {  
  7.             position: relative;  
  8.             width: 200px;  
  9.             /*marquee width */  
  10.             height: 200px;  
  11.             /*marquee height */  
  12.             background-color: white;  
  13.             overflow: hidden;  
  14.             border: 3px solid orange;  
  15.             padding: 2px;  
  16.             padding-left: 4px;  
  17.         }  
  18.         </style>  
  19.         <script type="text/javascript">  
  20.         function Marquee(o)  
  21.         {  
  22.             var oop = this,  
  23.                 obj = document.getElementById(o.ID),  
  24.                 top = 0;  
  25.             var marquee = obj.getElementsByTagName('DIV')[0];  
  26.             this.marqueeheight = marquee.offsetHeight;  
  27.             marquee.style.top = -this.marqueeheight + 'px';  
  28.             this.marquee = [marquee];  
  29.             while(top < obj.offsetHeight)  
  30.             {  
  31.                 marquee = marquee.cloneNode(true);  
  32.                 marquee.style.top = top + 'px';  
  33.                 obj.appendChild(marquee);  
  34.                 this.marquee.push(marquee);  
  35.                 top += this.marqueeheight;  
  36.             }  
  37.             this.Speed = o.marqueespeed;  
  38.             setTimeout(function ()  
  39.             {  
  40.                 setInterval(function ()  
  41.                 {  
  42.                     oop.scroll();  
  43.                 }, 30);  
  44.             }, o.delayb4scroll)  
  45.         }  
  46.         Marquee.prototype.scroll = function ()  
  47.         {  
  48.             for(var top, z0 = 0; z0 < this.marquee.length; z0++)  
  49.             {  
  50.                 top = parseInt(this.marquee[z0].style.top) - this.Speed  
  51.                 this.marquee[z0].style.top = top + "px";  
  52.                 if(top < -this.marqueeheight)  
  53.                 {  
  54.                     this.marquee[z0].style.top = top + this.marqueeheight * this.marquee.length + "px";  
  55.                 }  
  56.             }  
  57.         }  
  58.         </script>  
  59.     </head>  
  60.   
  61.     <body>  
  62.         <div style="float:left;">  
  63.             <div id="marqueecontainer" class="marqueecontainer" onmouseover="M1.Speed=0;" onmouseout="M1.Speed=2;" onfocus="M1.Speed=0;">  
  64.                 <div style="position: absolute; width: 98%;"> <a class='link_up' title='Utter Pradesh' href='#'><span>1. Utter Pradesh</span></a>  
  65.                     <hr /> <a class='link_up' title='Delhi' href='#'><span>2. Delhi</span></a>  
  66.                     <hr /> <a class='link_up' title='Madhya Pradesh' href='#'><span>3. Madhya Pradesh</span></a>  
  67.                     <hr /> <a class='link_up' title='Bihar' href='#'><span>4. Bihar</span></a>  
  68.                     <hr /> </div>  
  69.             </div>  
  70.             <div style='float: left; margin: 10px 10px 10px 0px;'> <a href='javascript:M1.Speed=2;'>Start Scroll</a></div>  
  71.             <div style='float: left; margin: 10px 10px 10px 0px;'> <a href='javascript:M1.Speed=0;'>Pause Scroll</a></div>  
  72.             <script type="text/javascript">  
  73.             var M1 = new Marquee(  
  74.             {  
  75.                 ID: 'marqueecontainer',  
  76.                 delayb4scroll: 2000,  
  77.                 marqueespeed: 2  
  78.             });  
  79.             </script>  
  80.             <br />  
  81.             <br />  
  82.             <div id="marqueecontainer1" class="marqueecontainer" onmouseover="M2.Speed=0;" onmouseout="M2.Speed=2" ; onfocus="M2.Speed=0;">  
  83.                 <div style="position: absolute; width: 98%;"> <a class='link_up' title='Utter Pradesh' href='#'><span>1. Utter Pradesh</span></a>  
  84.                     <hr /> <a class='link_up' title='Delhi' href='#'><span>2. Delhi</span></a>  
  85.                     <hr /> <a class='link_up' title='Madhya Pradesh' href='#'><span>3. Madhya Pradesh</span></a>  
  86.                     <hr /> <a class='link_up' title='Bihar' href='#'><span>4. Bihar</span></a>  
  87.                     <hr /> </div>  
  88.             </div>  
  89.             <div style='float: left; margin: 10px 10px 10px 0px;'> <a href='javascript:M2.Speed=2;'>Start Scroll</a></div>  
  90.             <div style='float: left; margin: 10px 10px 10px 0px;'> <a href='javascript:M2.Speed=0;'>Pause Scroll</a></div>  
  91.             <script type="text/javascript">  
  92.             var M2 = new Marquee(  
  93.             {  
  94.                 ID: 'marqueecontainer1',  
  95.                 delayb4scroll: 2000,  
  96.                 marqueespeed: 2  
  97.             });  
  98.             </script>  
  99.         </div>  
  100.     </body>  
  101.   
  102. </html>