Search code examples
jqueryfunctionresizewindowmedia-queries

How can I reset a function implemented with a jquery media query


I have implemented a function on resizing browser window below 1024, it works fine when reducing the size of the browser but if you enlarge the browser window back to over 1024 the newly introduced function stays. How can I removed or reset this function?

$(window).resize(function() {
var width = $(window).width();

// Define Screen
if( width >= 768 && width <= 1024 ) {
// Do Something
    $(function() {
// Move
$("article img").each(function() {
    var item = $(this);
    item.insertAfter(item.next());
});        
});
} 


});

Solution

  • Not sure I get it, but you're moving the images, to get it back to what it was originally, you would have to move the images back ?

    $(function() {
        $(window).on('resize', function() {
            var width = $(window).width();
    
            if ( width >= 768 && width <= 1024 ) {
    
                $("article img").each(function() {
                    var item = $(this);
                    item.insertAfter(item.next());
                });        
            }else{
                $("article img").each(function() {
                    var item = $(this);
                    item.insertBefore(item.prev());
                });        
            }
        });
    });