Question

I’ve currently got this jQuery to prepend a div if the window is a certain size.

if ( $(window).width() < 480) {

   $('nav').css("display","none");

   $('#container').prepend('<div id="nav-btn"></div>');  
}

How do I get this to ‘continually’ check and hide the <div id="nav-btn"></div> when the browser is being resized?

EDIT: I want it so that when the window width then reaches 481px the <nav> element is set to display:block; and the #nav-btn is hidden. But dynamically so it all works on resize after resize, not just once.

Answer 1

The following achieves your requirements (so far as I can tell):

$(window).resize(function() {
    if ($(window).width() < 482){
       $('nav').css("display","none");
        if (!$('#nav-btn').length){ // makes sure there's only ever one nav-button div
           $('<div />', {'id' : 'nav-btn'})
               .text('This is text, in the nav button')
               .appendTo($('#container'));
        }
    }
    else {
        $('nav').css('display','block');
        $('#nav-btn').remove();
    }
});

$(document).ready(
    function(){
        $(window).trigger('resize'); // making sure the resize stuff happens on DOMReady
    });​

JS Fiddle demo.

References:

• appendTo().
• text().
• trigger().