CODEWITHSUNDEEP
javascriptjquerybrowserresponsive-design
Codesworth
Codesworth

Reputation: 115

Remove jQuery effects if browser is certain size?

I'm building a responsive layout and utilising a handful of jQuery plugins, such as Tabs, Drop menu, scroll to top etc, one thing I'm struggling with is once the browser is in it's smallest position how to take away the jQuery magic?

Currently it's looking awful with the effects in a smaller view, so I'm just looking for a couple of pointers or a code example if you don't mind.

e.g. If there's a jQuery IF browser viewpoint is =< 320px then don't run etc?

I have done a bit of research first before posting here, hopefully an expert can assist.

Upvotes: 3

Views: 3472

Answers (2)

dsgriffin
dsgriffin

Reputation: 68626

One way to do it could be to try wrapping a width condition inside a $(window).resize event:

$(document).ready(function(){
   $(window).resize(function() {
      if ($(window).width() <= 320) {
         // Leave empty
      }
      else {
        // Rest of your jQuery code can go here
      }
   });
});

Upvotes: 2

Eli
Eli

Reputation: 14827

$(window).resize(function(){
    var h = $(window).height();
    var w = $(window).width();

    if(w <= 320) {
         // Run your script
    }
});

But I'd suggest you using CSS3 media queries to build a responsive web design.

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

For example:

@media only screen and (max-width : 320px) {
    /* Your styles here */
}

Upvotes: 0

Related Questions