CODEWITHSUNDEEP
jqueryhtmlcssmedia-queries
jarofghosts
jarofghosts

Reputation: 21

jQuery .hide() not undone by media query

So, I have a layout that is 2up on wide monitors and then a list view on smaller monitors using media queries. Everything works really well except for I also have jQuery .show()/.hide()ing elements on the widescreen setup. That works well also, but when I resize my window: anything that jQuery has currently .hide()d does not show up, despite my media queries defining display: block; for those elements at that size.

The site in question is located here, and the source is on GitHub.

What am I doing wrong and how can I fix this?

Upvotes: 2

Views: 1179

Answers (1)

Jorge Luis Vargas
Jorge Luis Vargas

Reputation: 174

first of all jQuery replaces the style of the element you change, so no matter what's the previous CSS if you use:

$("#myelement").hide();

it will forcefully change the CSS display property, you have 2 options here.

1) Create a hidden class, this way you can create a media query for the class, so when the window is > 1000px it will have display:none; but if it have 1000< it can have display:block; using:

$("#myElement").addClass("hidden");

instead of hide().

2) Play with the resize() event of jQuery http://api.jquery.com/resize/ binded to the window, this way you can do this:

$(window).resize(function(){
    if($(window).width()> 1000){
        //Hide or show, or do some pirate stuff
    }else{
        //More pirate stuff
    }
});

I hope this was what you were looking for.

Upvotes: 3

Related Questions