div refresh javascript

Question

I am using a div refresh script (Given below). The contents of the div contains an auto scroll ul (code from http://www.dynamicdrive.com/). The refresh is working properly. But after the refresh the auto scrolling is not working

Code for refresh

    <script type="text/javascript">
        window.onload = setupRefresh;
        function setupRefresh()
        {
            setInterval("refreshBlock();",1000);
        }

        function refreshBlock()
        {
            $('#list4').load("refreshpage");

        }
    </script>

Code for auto scroll

    <script type="text/javascript">

        var delayb4scroll=2000 //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)?

        var copyspeed=marqueespeed
        var pausespeed=(pauseit==0)? copyspeed: 0
        var actualheight=''

        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 initializemarquee(){
            cross_marquee=document.getElementById("vmarquee")
            cross_marquee.style.top=0
            marqueeheight=document.getElementById("list4").offsetHeight
            actualheight=cross_marquee.offsetHeight
            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>

Could some one please help?

Answer 1

You just need:

function refreshBlock()
        {
            $('#list4').load("refreshpage");
            initializemarquee();

        }

Answer 2

It seems like you need to call initializemarquee() after the load is complete. You can do this in the .load()'s callback.

function refreshBlock(){
  $('#list4').load("refreshpage", function(){
    clearInterval(lefttime);
    initializemarquee()
  });
}

I almost forgot to add that you'd also want to stop that interval.

Answer 3

Why the mix of plain JS and jQuery? If you have jQuery use it

Here is my rewrite. Not tested but apart from typos or things that I thought could be done in jQuery and cannot, it should do the whole thing

$(function() {
  var sId = setInterval(function {
    $('#list4').load("refreshpage");
  },1000);
  var $cross_marquee=$("#vmarquee")
  var delayb4scroll=2000 //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=true //Pause marquee onMousever (false=no. true=yes)?
  var copyspeed=marqueespeed;
  var pausespeed=(pauseit==0)? copyspeed: 0;
  var actualheight=$cross_marquee.height();
  var marqueeheight=$("#list4").height();
  $cross_marquee.top(0);

  if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    $cross_marquee.height(marqueeheight);
    $cross_marquee.css("overflow","scroll");
  }
  else var tId = setTimeout(function() { 
    lefttime=setInterval(
    function() { 
      var top = $cross_marquee.top(); 
      if (top>(actualheight*(-1)+8)) $cross_marquee.top(top-copyspeed)
      else $cross_marquee.top(marqueeheight+8);
     }

    },30)
    , delayb4scroll);

});