Change function on window.resize - JS Movie

Question

I'm using the plug-in jsMovie to display PNG sequences on my page. The problem is that I want to switch to a different function (smaller version of the PNG sequence) when the page is resized below 1500. I've went through quite a few if / if else options but haven't found anything that changes the function while resizing the browser. Here's what I have so far:

$(window).resize(function() {
if( $(this).width() > 1501 ) {

    $('.phoneicon').jsMovie({
        sequence: 'phoneicon_#####.png',
        folder : "images/Contact/PhoneIconPNG3/",
        from: 0,
        to: 63,
        height:410,
        width:551,
        fps:29.97,
        repeat:true,              
    });

    $('.play').mouseenter(function(){
        $('.phoneicon').jsMovie('playClips');
    });
    $('.play').mouseleave(function(){
        $('.phoneicon').jsMovie('stop');
    });

}

else {


    $('.phoneicon').jsMovie({
        sequence: 'Phoneiconsmall_#####.png',
        folder : "images/Contact/PhoneIconPNGSmall/",
        from: 0,
        to: 63,
        height:318,
        width:420,
        fps:29.97,
        repeat:true,              
    });

    $('.play').mouseenter(function(){
        $('.phoneicon').jsMovie('playClips');
    });
    $('.play').mouseleave(function(){
        $('.phoneicon').jsMovie('stop');
    });
}




});

This kind of works but it only displays the sequence when the browser is resized and doesn't dynamically change between the two functions (unless the page is physically refreshed). Also, I haven't found any way of targeting the function with CSS - the jsMovie plugin overrides any CSS that targets the PNG's width or height.

Here is a link the jsMovie Docs I've been using: http://jsmovie.konsultaner.de/#/

Any guidance would be greatly appreciated!

Answer 1

Maybe try this:

var timeout;

$(window).resize(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        $('.phoneicon').jsMovie("destroy");

        if( $(window).width() > 1501 ) {

            $('.phoneicon').jsMovie({
                sequence: 'phoneicon_#####.png',
                folder : "images/Contact/PhoneIconPNG3/",
                from: 0,
                to: 63,
                height:410,
                width:551,
                fps:29.97,
                repeat:true,              
            });

            $('.play').mouseenter(function(){
                $('.phoneicon').jsMovie('playClips');
            });
            $('.play').mouseleave(function(){
                $('.phoneicon').jsMovie('stop');
            });
        }
        else {
            $('.phoneicon').jsMovie({
                sequence: 'Phoneiconsmall_#####.png',
                folder : "images/Contact/PhoneIconPNGSmall/",
                from: 0,
                to: 63,
                height:318,
                width:420,
                fps:29.97,
                repeat:true,              
            });

            $('.play').mouseenter(function(){
                $('.phoneicon').jsMovie('playClips');
            });
            $('.play').mouseleave(function(){
                $('.phoneicon').jsMovie('stop');
            });
        }
    }, 100);

}).resize();

I have added a timeout so that the whole code does not get fired every time you resize the window, only when you have resized it, due to perfomance.

from the docs I believe the destroy function will "remove" the movie lib and then you can re-apply it.