CODEWITHSUNDEEP
jqueryresolution
Machi
Machi

Reputation: 369

Launch jQuery only within certain resolution

I'm pretty new into jQuery world and I'm having troubles with launching code only for certain screen resolution. I have made a responsive website with a mobile menu that appears only on smallest version. Then I'm using toggle for show / hide menu container. This works fine but when resolution changes (someone enlarges browser's window or portrait is changed to landscape etc., the menu stays hidden because of toggled visibility: hidden property.

Is there please a way to launch jQuery only within this mobile resolution (less than 590 pixels).

The code is:

$('a.rollmenu').each(function() {
    $(this).click(function() {
        $('nav ul').toggle(200);
        $('a.rollmenu').toggleClass('active');
        $(window).resize(function(){
            $('nav ul').hide();
            $('a.rollmenu').removeClass('active');
        });
    });
});

Thanks a million! Jakub

Upvotes: 0

Views: 737

Answers (2)

Canser Yanbakan
Canser Yanbakan

Reputation: 3870

$(window).resize(){
    if($(window).width() <= 320) {
        doYourStuff();
    }
});

Or you just use a css template that supports responsive layouts like Bootstrap 3.

http://getbootstrap.com/

If you do not want to use any css frameworks, you can just use media queries such as;

/* Mobil vertical - Iphone 4 > */
@media only screen and (max-width: 320px) {
    .your-menu{display:none;}
}

Upvotes: 0

Rakesh Kumar
Rakesh Kumar

Reputation: 2855

Use below code for the find the screen resolution and than do your code.

if($(window).width() < 590 ){

//do something

}

Upvotes: 1

Related Questions