0

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) is clicked. I want to do the same thing.

Michael Berkowski
  • 267,341
  • 46
  • 444
  • 390
Pranav Ballaney
  • 185
  • 1
  • 6
  • 13
  • 2
    The term for that behavior is "responsive design", whereby the content on the screen changes according to the viewport size available. Look it up and start reading all about it how it can be accomplished. It is a very broad topic. – Michael Berkowski Dec 16 '12 at 12:54

3 Answers3

8

Use media queries in your CSS

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

Change your width accordingly.

Ben
  • 692
  • 8
  • 25
5

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/

Nerdroid
  • 13,398
  • 5
  • 58
  • 69
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.

Evgenia
  • 86
  • 5