How To Hide Div When The Browser Is Resized?

Check out www.usatoday.com. The right now section is hidden when the browser is resized. Then it appears from nowhere when the button(which, in turn, appears when right now hides)

Solution 1:

Use media queries in your CSS

@mediaonly screen and (max-device-width: 480px) {
    .mydiv{display:none;}
}

Change your width accordingly.

Solution 2:

that will be achieved using media queries check http://mediaqueri.es/ for more examples

here are some tutorials on media queries

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://www.1stwebdesigner.com/css/media-queries-tutorial-convert-burnstudio-responsive-website/

Solution 3:

I suggest you very simple decision. Here is you html:

<div id="divToHide">
    TEXT THAT SHOUD DISAPPEAR
</div>
<button id="showDivToHide">
    Show div</button>

And that is javascript code:

$(document).ready(function () {
    $(window).resize(function () {
        $('#divToHide').hide();
    });

    $('#showDivToHide').click(function () {
        $('#divToHide').show();
    });
});

Of course you can describe your own rules to hide and show your div.