Hi I wanted to know using jQuery or javascript can I remove a certain div tag so that its not displayed at all when the screen gets to a certain size lets say 500px.
-
1Yes you can, but you'd have to post your code as well if you want help from others ;)Sang Suantak– Sang Suantak2013-01-15 12:12:49 +00:00Commented Jan 15, 2013 at 12:12
-
I'll give all your answer a go thanks for getting back to me so quickly. Sorry I didn't post any code I was looking so a starting point which I should have pointed out.Cmasterd– Cmasterd2013-01-15 12:25:03 +00:00Commented Jan 15, 2013 at 12:25
Add a comment
|
3 Answers
You should use the matchMedia Javascript API, which has a very good support across browsers nowadays.
For instance:
var width = window.matchMedia('screen and (width: 500px)');
matchMedia will return a MediaQueryList object, which among other things contains a matches boolean that indicates if the passed in media query currently matches or not.
The great thing about those MediaQueryList objects is, that they provide methods to add and remove listeners, when this state changes.
For instance:
width.addListener(function( mql ) {
if( mql.matches ) {
// yes, the device screen width is now 500 pixels
} else {
// no, the width is below 500 pixels
}
});
You can write something like this in jQuery
$(document).ready(function(){
$(window).resize(function(){
if($(window).width()==500)
$('div').hide();
else
$('div').show();
});
});
Comments
You can do this using CSS media queries:
@media screen and (min-width: 500px) {
div.whatever { display: none; }
}
1 Comment
Cmasterd
I have tried this I just wanted to try a javascript or jQuery solution for a change. Thanks tho for getting back to me so quickly!