repeat an else/if closure function on window resize

Question

so i have this function:

(function() {

    var wwidth = $(window).width();

    function headroom() {

        // headroom

        $("nav").headroom({
            "tolerance" : 0,
            "offset" : 1300,

        });

        // to destroy
        $("nav").headroom("destroy");

    }

    function headroomMobile() {

        // headroom

        $("#nav-wrap").headroom({
            "tolerance" : 0,
            "offset" : 200,

        });

        // to destroy
        $("#nav-wrap").headroom("destroy");

    }

    if (wwidth >= 480) {

        headroom();
    }
    if (wwidth < 480) {

        headroomMobile();
    }



})();

i would this function to repeat everytime there's a window resize but i can't make it to work, maybe because it's a closure function.. i tried naming the whole function and trigger it on window.resize but it didn't work, i probably did some syntax error or misplaced the bit of code. I'm sure it's no difficult task but i can't make it to work :\ can you help?

thank you so much!

Remove the IIFE, make it a named function instead, and execute it on pageload and on window resize. — adeneo, Mar 02 '14 at 15:57
your looking for the `resize` event of the `window` object `window.addEventListener("resize",headroom,false);` or since your using jquery `$(window).resize(headroom);` — Mouseroot, Mar 02 '14 at 16:19

score 0 · Answer 1 · edited May 23 '17 at 12:03

If you want a function to be called everything the window is resized then just bind it to the

resize event like so:

(function () {

    var wwidth = $(window).width();

    function headroom() {

        // headroom

        $("nav").headroom({
            "tolerance": 0,
            "offset": 1300,

        });

        // to destroy
        $("nav").headroom("destroy");

    }

    function headroomMobile() {

        // headroom

        $("#nav-wrap").headroom({
            "tolerance": 0,
            "offset": 200,

        });

        // to destroy
        $("#nav-wrap").headroom("destroy");

    }

    function setHeader() {
        if (wwidth >= 480) {
            headroom();
        } else {
            headroomMobile();
        }
    }

    setHeader(); // on load

    $(window).resize(function () {
        wwidth = $(window).width();
        setHeader();
    });

})();

But this is not the most efficient way to do it.. checkout this

actually i want to fire onload and to repeat also on window.resize. is that possible? — valerio0999, Mar 02 '14 at 15:59
thanks lucky i saw your edits, i pasted this code but nothing happens at this point — valerio0999, Mar 02 '14 at 16:21

score 0 · Answer 2 · answered Mar 02 '14 at 16:02

Make it a named function, and use it for both things:

(function() {
    function handleWindowSizing() {
        // ...logic here...
    }

    $(window).load(handleWindowSizing).resize(handleWindowSizing);
})();

Note that the load event on window handles really late in the page load process, you may want to do your logic right away as well (make sure your code is at the very end of the HTML so that anything it acts on has been parsed and put in the DOM). E.g.:

<!-- ...content... -->
<script>
(function() {
    function handleWindowSizing() {
        // ...logic here...
    }

    handleWindowSizing();    
    $(window).load(handleWindowSizing).resize(handleWindowSizing);
})();
</script>
</body>
</html>

@omegaiori: Sounds like some unrelated error occurs, check your console. — T.J. Crowder, Mar 02 '14 at 16:07
@omegaiori: That's unfortunate. You'll have to walk through with the debugger, because there **is** something unrelated to the question going on. The above works - http://jsbin.com/beficace/1 — T.J. Crowder, Mar 02 '14 at 16:47

repeat an else/if closure function on window resize

2 Answers2