ASP.NET Masterpage Javascript Marquee Animation Stops when button pressed

Question

I have a Javascript function for Marquee animation in my ASP.NET Masterpage that runs fine when the page is first loaded, but then stops when a page button is pressed. Any idea how to fix this?

I got help from here, Javascript Marquee to replace <marquee> tags

Using the second answer

window.addEventListener('load', function () {
    function go() {
        i = i < width ? i + step : 1;
        m.style.marginLeft = -i + 'px';
    }
    var i = 0,
        step = 3,
        space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    var m = document.getElementById('marquee');
    var t = m.innerHTML; //text
    m.innerHTML = t + space;
    m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
    var width = (m.clientWidth + 1);
    m.style.position = '';
    m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
    m.addEventListener('mouseenter', function () {
        step = 0;
    }, true);
    m.addEventListener('mouseleave', function () {
        step = 3;
    }, true);
    var x = setInterval(go, 50);
}, true);

HTML

<div id="marquee">
    1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a>
</div>

CSS

#marquee {
    background:#eee;
    overflow:hidden;
    white-space: nowrap;
}

Answer 1

This problem relates to your button being within an UpdatePanel as you mentioned in the comments above. An UpdatePanel will cause the page to postback without re-triggering the PageLoad event, so any javascript tied to that will be lost.

However, you can use a PageRequestManager. This will allow us to also trigger a function on UpdatePanel postback. This allows us to run the pageload script both on initial load and UpdatePanel postback. The only caveat is that the script block has to come after your ScriptManager. I'd suggest moving it just before your </body> if possible.

Basic example:

//Add a page request manager
var prm = Sys.WebForms.PageRequestManager.getInstance();

//On postback of UpdatePanel
prm.add_endRequest(function () {
    alert("UpdatePanel was just triggered!");
});

//On pageload
window.addEventListener('load', function () {
    alert("Initial page load!");
}, true);

Your example:

//Because we now have to call our function on both Page Load AND UpdatePanel postback, let's put it in function
function pageInit() { 
    function go() {
        i = i < width ? i + step : 1;
        m.style.marginLeft = -i + 'px';
    }
    var i = 0,
        step = 3,
        space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
    var m = document.getElementById('marquee');
    var t = m.innerHTML; //text
    m.innerHTML = t + space;
    m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
    var width = (m.clientWidth + 1);
    m.style.position = '';
    m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
    m.addEventListener('mouseenter', function () {
        step = 0;
    }, true);
    m.addEventListener('mouseleave', function () {
        step = 3;
    }, true);
    var x = setInterval(go, 50);
}

//Add a page request manager
var prm = Sys.WebForms.PageRequestManager.getInstance();

//On postback of UpdatePanel
prm.add_endRequest(function () {
    pageInit();
});

//On pageload
window.addEventListener('load', function () {
    pageInit();
}, true);

If there are certain things you only want to happen on the initial load and not on the UpdatePanel postback, you can take them out of the pageInit() function and put them back in your load event instead.