Changing CSS with jQuery on browser resize

Question

I've got the following code: it changes the position of some navigation elements, depending on the browser width.

It does this by using $(window).width() , and then making the change in pixels (not percentages). This works great. However, when the user changes the browser window, the calculations are off.

Is there a way for me to refire the css changes on browser resize -- or just reload the div? Reloading the page on resize works okay, but it's only a small div that needs fixing.

if (window.location.href.indexOf('archive') >= 0) {
    archive.css({left: nw / 2 - aw / 2});
    films.css({right: - nw / 2 - fw / 2});
        $('.index').css({left: nw / 2 - iw / 2 });

} else if (window.location.href.indexOf('films') >= 0) {
    archive.css({left: - nw / 2 - aw / 2});
    films.css({right:  nw / 2 - fw / 2});
        $('a.index').css({left: - nw / 2 + iw / 2 });
} else if (window.location.href.indexOf('index') >= 0) {


}

Answer 1

$(window).resize(function() {
    // do something on resize
});

should do the trick.

By the way, CSS media queries could be a better choice.