2 Replies Latest reply: Jan 31, 2011 2:51 AM by NeilSBob RSS

    News feed box

    NeilSBob

      <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">

       

       

      var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
      var marqueespeed=2 //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+"p x" //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"
      cross_marquee.style.overflow="scroll"
      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>

       


      <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>

       

       

      This is the code i am using it seems to be working fine when i have only one of these on the page, but if add one more, then the second box does'nt work, infact the two get mixed up.. take a look at it http://www.haramausic.com/test.html, notice how the boxes are mixed up.

       

      Please help. Thank you.

        • 1. Re: News feed box
          Robert Heist II Community Member

          Well the problem with just putting 2 marquees on the same page is you aren't changing your variable names to make each one unique and therefore the script confuses the 2 marquees.

           

          The solution is to make 2 different marquee IDs:

           

          <style type="text/css">

           

          #marqueecontainer1{
          position: relative;
          width: 200px; /*marquee width */
          height: 200px; /*marquee height */
          background-color: white;
          overflow: hidden;
          border: 3px solid orange;
          padding: 2px;
          padding-left: 4px;
          }

           

          #marqueecontainer2{
          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>

           

          Then you need to use the javascript to activate each one.  Something like this:

           

          function initializemarquee1(){
          cross_marquee=document.getElementById("vmarquee1")
          cross_marquee.style.top=0
          marqueeheight=document.getElementById("marqueecontainer1").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"
          cross_marquee.style.overflow="scroll"
          return
          }
          setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
          }

           

          function initializemarquee2(){
          cross_marquee=document.getElementById("vmarquee2")
          cross_marquee.style.top=0
          marqueeheight=document.getElementById("marqueecontainer2").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"
          cross_marquee.style.overflow="scroll"
          return
          }
          setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
          }

          and then you need to call both functions when the page loads:
          if (window.addEventListener)
          window.addEventListener("load", initializemarquee1, false)
          else if (window.attachEvent)
          window.attachEvent("onload", initializemarquee1)
          else if (document.getElementById)
          window.onload=initializemarquee1
          if (window.addEventListener)
          window.addEventListener("load", initializemarquee2, false)
          else if (window.attachEvent)
          window.attachEvent("onload", initializemarquee2)
          else if (document.getElementById)
          window.onload=initializemarquee2
          Of course this means you need to have 2 different marquees in the body too:
          <div id="marqueecontainer1" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
          <div id="vmarquee1" style="position: absolute; width: 98%;">
          <div id="marqueecontainer2" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
          <div id="vmarquee2" style="position: absolute; width: 98%;">

          • 2. Re: News feed box
            NeilSBob Community Member

            hello,

             

            This is what i have brought it down to:

             

              <style type="text/css">

             

            #marqueecontainer1{

            position: relative;

            width: 200px; /*marquee width */

            height: 200px; /*marquee height */

            background-color: white;

            overflow: hidden;

            border: 3px solid blue;

            padding: 2px;

            padding-left: 4px;

            }

             

            </style>

             

            <script type="text/javascript">

             

             

             

            var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)

            var marquee1speed=2 //Specify marquee scroll speed (larger is faster 1-10)

            var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

             

             

            var copyspeed=marquee1speed

            var pausespeed=(pauseit==0)? copyspeed: 0

            var actualheight=''

             

            function scrollmarquee1(){

            if (parseInt(cross_marquee1.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height

            cross_marquee1.style.top=parseInt(cross_marquee1.style.top)-copyspeed+"px" //move scroller upwards

            else //else, reset to original position

            cross_marquee1.style.top=parseInt(marquee2height)+8+"px"

            }

            function initializemarquee1(){

            cross_marquee1=document.getElementById("vmarquee1")

            cross_marquee1.style.top=0

            marquee1height=document.getElementById("marqueecontainer1").offsetHeight

            actualheight=cross_marquee1.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_marquee1.style.height=marquee1height+"px"

            cross_marquee1.style.overflow="scroll"

            return

            }

            setTimeout('lefttime=setInterval("scrollmarquee1()",30)', delayb4scroll)

            }

             

            if (window.addEventListener)

            window.addEventListener("load", initializemarquee1, false)

            else if (window.attachEvent)

            window.attachEvent("onload", initializemarquee1)

            else if (document.getElementById)

            window.onload=initializemarquee1

             

             

            </script>

             

             

            <div id="marqueecontainer1" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marquee1speed">

            <div id="vmarquee1" style="position: absolute; width: 98%;">

             

            <!--YOUR SCROLL CONTENT HERE-->

             

            <h4>hi</h4>

            hi

            hi

            hi

            <!--YOUR SCROLL CONTENT HERE-->

             

            </div>

            </div>

            </td>

                                </tr>

                                </table>

                                <table width="100%" border="0" cellspacing="0" cellpadding="1">

                                  <tr>

                                    <td align="center"><span class="a">BOLLYWOOD NEWS:</span>

                                    <style type="text/css">

             

            #marqueecontainer2{

            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">

             

             

             

            var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)

            var marquee2speed=2 //Specify marquee scroll speed (larger is faster 1-10)

            var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

             

             

             

            var copyspeed=marquee2speed

            var pausespeed=(pauseit==0)? copyspeed: 0

            var actualheight=''

             

            function scrollmarquee2(){

            if (parseInt(cross_marquee2.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height

            cross_marquee2.style.top=parseInt(cross_marquee2.style.top)-copyspeed+"px" //move scroller upwards

            else //else, reset to original position

            cross_marquee2.style.top=parseInt(marquee2height)+8+"px"

            }

             

            function initializemarquee2(){

            cross_marquee2=document.getElementById("vmarquee2")

            cross_marquee2.style.top=0

            marquee2height=document.getElementById("marqueecontainer2").offsetHeight

            actualheight=cross_marquee2.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_marquee2.style.height=marquee2height+"px"

            cross_marquee2.style.overflow="scroll"

            return

            }

            setTimeout('lefttime=setInterval("scrollmarquee2()",30)', delayb4scroll)

            }

             

            if (window.addEventListener)

            window.addEventListener("load", initializemarquee2, false)

            else if (window.attachEvent)

            window.attachEvent("onload", initializemarquee2)

            else if (document.getElementById)

            window.onload=initializemarquee2

             

             

            </script>

             

             

            <div id="marqueecontainer2" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marquee2speed">

            <div id="vmarquee2" style="position: absolute; width: 98%;">

             

            <!--YOUR SCROLL CONTENT HERE-->

             

            <h4>hi</h4>

            hi

            hi

            hi

             

            <!--YOUR SCROLL CONTENT HERE-->

             

            </div>

            </div>

            It still does'nt work perfectly.. Pleas check out : http://www.hamaramusic.com/test.html ..
            Please help
            Thank you.