Question

I have 2 jQuery functions that basicly are written the same except for their 1st lines:

$(document).ready(function() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
});

$(window).resize(function() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
});

so I was wondering if its possible to merge them into 1 some how?

As always thanks in advance.

Answer 1

You can trigger the resize event manually:

$(function() { // shortcut for $(document).ready(function() {...});
    $(window).resize(function() {   // bind the handler
        $('#foo').css({
            'height': $(window).height(),
            'width': $(window).width()
        });
    }).resize(); // trigger the resize event
});

or create an extra function and bind it to both events:

function resizeHandler() {
    $('#foo').css({
        'height': $(window).height(),
        'width': $(window).width()
    });
}

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

---

Btw. $(function(){...}); is a shortcut for $(document).ready(function(){...});.