Question

Rather than repeat all my code for resize page, I tried this:

$(document).ready(myfunction);
$(window).resize(myfunction);

function myfunction() {
    // do whatever
}

I’m having some issues. I have some things that need to happen just when page loads (are always same) and some things that need to move on resize. My page is setup like:

jQuery(document).ready(function($) {

    //a bunch of static stuff here

    $wall.imagesLoaded(function(){
       //using an imagesloaded plugin
       //masonry is here & needs to reload on resize.
    });

});

I read somewhere to always put that jQuery at the beginning for WordPress, so I figured I might as well, since it worked. How do I jiggle the rest so Masonry will reload on window resize?

Thanks!

Edit for a solution: This is working for WordPress.

    (function($) {

    $(document).ready(documentReadyFunction);
    $(window).resize(windowResizeFunction);

    function documentReadyFunction() {
        // functions for document ready
        onPageLoadOrResize();
        onPageLoad();
    }

    function windowResizeFunction() {
        // functions for window resize
        onPageLoadOrResize();
    }

    function onPageLoad() {
        alert("pageload");
    }


    function onPageLoadOrResize () {
        alert ("Load or Resize");
    }

    })(jQuery);

Answer 1

Try using a pattern like this:

$(document).ready(documentReadyFunction);
$(window).resize(windowResizeFunction);

function documentReadyFunction() {
    genericStuffFunction()
    // do whatever for document ready
}

function windowResizeFunction() {
    genericStuffFunction()
    // do whatever for window resize
}

function genericStuffFunction() {
    // do whatever for document ready and window resize
}