Question

$(window).resize is not working, what am I missing?

So I have this page with a single vertical menu of 350px width, centered horizontally. The links open iframe’s that show different content. The iframe that shows an external site gets his width through: $("#iframeweb").width($(document).width() - $('#menu').width()) so that it fills up the screen, pushing the menu to the side.

That part works, but it also needs to change the width on resize of the window, but it does nothing…

the code:

<div id="wrapper">
    <div id="outer">
    <div id="inner">
        <iframe name="iframeweb" id="iframeweb"></iframe>
        <div id="menu">
                </div>
        <iframe name="iframeA4" id="iframeA4"></iframe>
    </div>
    </div>
    </div>

<script type="text/javascript">
$(window).resize(function() {
    $("#iframeweb").width($(document).width() - $('#menu').width());
};
</script>

<script type="text/javascript">
$("#linkA4").click(function(){
    $("#iframeA4")
        .hide('fast')
        .animate({"width": "0px"}, 'fast')
        .animate({"width": "210mm"}, 'fast')
        .show('fast');  
    $("#iframeweb").hide('fast');
});

$("#linkweb").click(function(){
    $("#iframeA4")
        .animate({"width": "0px"}, 'fast')
        .hide('fast');
    $("#iframeweb")
        .hide('fast')
        .width($(document).width() - $('#menu').width())
        .show('fast');
});
</script>

Answer 1

You have a simple syntax error, closing the parenthesis

$(window).resize(function() {
    $("#iframeweb").width($(document).width() - $('#menu').width());
}); // <--