jQuery add/remove from DOM on browser resize

Question

I am using a little bit of jQuery I wrote (I'm not too good with JavaScript/jQuery) that adds/removes a div (in this case, .show500, .hide500) on a browser resize. Here is the code:

//Completely add/remove divs completely from DOM on browser resize

        $(function(){

            $(window).resize(function(){

                var win = $(this); //this = window

                if (win.width() <= 500) { 

                    $('.show500').add();

                    $('.hide500').remove();

                } else if (win.width() > 500) { 

                    $('.hide500').add();

                    $('.show500').remove();

                }

            });

        });

So if the browser window is less than or equal to 500, add the .show500 into the DOM, and remove the .hide500 from the DOM.

Then, if the browser width is greator than 500, add the .hide500 into the DOM, and remove the .show500 from the DOM.

However, when I use this code, the .hide500 div shows up by default, and then when I shrink the browser size, the .hide500 div hides and the .show500 never shows up. Then when I expand the browser, both of the divs are gone.

Here is a jsFiddle of the code: http://jsfiddle.net/XzrPR/

I would appreciate any and all help from you guys!

Did you know you could do this 100% with css with media queries? — epascarello
– epascarello, Commented Apr 19, 2013 at 19:32
What do you think .add() does? Did you look it up? Here - api.jquery.com/add . You probably want to be using .hide() and .show(). The .remove() will (permanently) remove the element(s) from the page, so you wouldn't be able to show them later anyways. — Ian
– Ian, Commented Apr 19, 2013 at 19:33

Blazemonger · Accepted Answer · 2013-04-19 19:35:15Z

1

Your else if can be reduced to just else, and I think you meant to use .show() instead of .add() and .hide() instead of .remove():

if (win.width() <= 500) { 
    $('.show500').show();
    $('.hide500').hide();
} else {
    $('.hide500').show();
    $('.show500').hide();
}

However, you can also do this with pure CSS using media queries:

.show500 {
    display: none;
}
.hide500 {
    display: block;
}
@media all and (max-width: 500px) {
  .show500 {
     display: block;
  }
  .hide500 {
    display: none;
  }
}

http://css-tricks.com/css-media-queries/

answered Apr 19, 2013 at 19:35

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

Comments

epascarello · Accepted Answer · 2013-04-19 19:35:05Z

0

You want to use .show() not .add()
You want to use .hide() and not .remove()

answered Apr 19, 2013 at 19:35

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

Ian Over a year ago

And .hide(), not .remove()

Lowkase · Accepted Answer · 2013-04-19 19:35:59Z

0

A very simple Media Query example for hiding/showing, NOT adding/removing:

@media (mix-width:501px) and (max-width:9999px) {
    .show500    { display:none; }
    .hide500    { display:block; }
} 

@media (max-width:500px){
    .show500    { display:block; }
    .hide500    { display:none; }
}

answered Apr 19, 2013 at 19:35

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

Comments

Adil Shaikh · Accepted Answer · 2013-04-19 19:38:21Z

0

.remove() removes element from DOM, You can't get them back

Try this way

 if (win.width() <= 500) { 
    $('.show500').show();
    $('.hide500').hide();
 } else if (win.width() > 500) { 
    $('.hide500').show();
    $('.show500').hide();
 }

working fiddle

answered Apr 19, 2013 at 19:38

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Collectives™ on Stack Overflow

jQuery add/remove from DOM on browser resize

4 Answers 4

Comments

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Related