jquery if statement based on screen size
I have a slide out开发者_如何学运维 nav bar that I would like open by default on screen width of >=1024 and closed by default < 1024. I have a button that toggles it open and closed it. I'm just starting to learn js. I imagine there's a way to set a default toggle state in an if statement if the window width is >=1024. Any help would be greatly appreciated. Here's what I have so far for the toggle.
$('a.expand').toggle(function() {
$(this).addClass("open");
$('#nav').animate({width: 50},{queue:false, duration:300});
$('.wrapify').animate({marginLeft: 50},{queue:false, duration:300});
$('.primarynav ul').hide();
$('.navlogo').hide();
}, function() {
$(this).removeClass("open");
$('#nav').animate({width: 200},{queue:false, duration:300});
$('.wrapify').animate({marginLeft: 200},{queue:false, duration:300});
$('.primarynav ul').show();
$('.navlogo').show();
});
$(document).ready(function() {
// This will fire when document is ready:
$(window).resize(function() {
// This will fire each time the window is resized:
if($(window).width() >= 1024) {
// if larger or equal
$('.element').show();
} else {
// if smaller
$('.element').hide();
}
}).resize(); // This will simulate a resize to trigger the initial run.
});
Edit:
Or maybe this is what you're after:
$(document).ready(function() {
if($(window).width() >= 1024) {
$('a.expand').click();
}
});
This will toggle the element when document is ready if the width is correct.
Just test for screen.width > 1024
.
https://developer.mozilla.org/en/DOM/window.screen.width
I was doing a similar project and this code worked out for me..
if($(window).width() >= 540) {
//code to execute
}
精彩评论