removing html div content using jquery when resizing screen/window

Question

Using jQuery I need to remove this html code and the {menu} tag inside when the browser or window is resized to a smaller screen size for responsive web design.

<div id="menu">{menu}</div>

I'm new to jQuery so any help or advice will be greatly appreciated.

Does that mean that #menu should come back if the screen gets large enough again? — Explosion Pills
– Explosion Pills, Commented Jan 26, 2013 at 20:52

Vlad Magdalin · Accepted Answer · 2013-01-26 20:53:08Z

2

You don't necessarily need to use jQuery, just add a media query to your style sheet:

@media screen and (max-width:480px)
{
    #menu { display: none; }
}

This way, if the screen happens to change (e.g. goes to landscape, or perhaps the browser is resized), the menu will re-appear again.

answered Jan 26, 2013 at 20:53

Vlad Magdalin

1,69014 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nope Over a year ago

+1 this is very smooth. Nice one, I just played around with it in a basic fiddle and the results are nice. I don't even feel like my jQuery alternative answer is relevant and I remove it for now, unless OP can't amend CSS or has any other reservations/issues with the CSS solution.

Laurent Over a year ago

Man I was just about to implement JQuery when I saw this thanks!

Collectives™ on Stack Overflow

removing html div content using jquery when resizing screen/window

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related