jquery if statement based on screen size

Question

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(); 

  });

Sublunary

This sounds like a job for CSS3 Media Queries rather than jQuery. – Febrifacient

I had originally used CSS3 media Queries, but still need to have it toggle to animate open and closed. I can't seem to figure out how to set the default toggle state to closed, which I'm hoping to do with jquery. The problem I have is that when the media query kicks in the panel is technically still in the open state, so when I click it the fist time it just tries to close again, then works fine after that. – Sublunary

Answer 1

$(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.

Polynuclear

Amar, Could you explain a bit more, or show me an example using the code I provided? I appreciate your help. – Sublunary

Added some comments, and examples to show and hide an element with class name "element". In your current code it actually looks like you want something to show when something is clicked. Is it so or do you want it to change on the actual window resizing. Do you maybe want the element to act differently when clicked depending on the size of the window? – Polynuclear

Answer 2

Just test for screen.width > 1024.

https://developer.mozilla.org/en/DOM/window.screen.width

Zolazoldi

I've used this to test for screen width, but can't seem to figure out where to go from here to get the toggle default states to change based on said width. $(document).ready(function() { if ((screen.width>=1024) ) { } else { } }); – Sublunary

Do you want it to change when the window is resized by the user? If so, use this: $(window).resize(function() { if (screen.width>=1024) ... }); – Zolazoldi

I guess I need it to change when the screen size is 1024, or if they resize to below 1024. My main problem is getting the default state of the toggle to be closed when <1024, open when >1024. I could do the rest with css3 media queries, but looked to jquery to do the animation and the toggle. – Sublunary

CSS3 is great, but it's far from universal. Don't rely on it too much. – Zolazoldi

Answer 3

I was doing a similar project and this code worked out for me..

if($(window).width() >= 540) {
   //code to execute
}

Nucleonics