CODEWITHSUNDEEP
jqueryif-statementmedia-queriesbrowser-width
egr103
egr103

Reputation: 4018

jquery for an if statement to act like CSS media query

I have this jquery code which works great:

$(document).scroll(function(){
    if ($(this).scrollTop()>175){
        // animate fixed div to small size:
        $('header').stop().animate({ height: 90 },100);
    } else {
        //  animate fixed div to original size
        $('header').stop().animate({ height: 175 },100);
    }
});

I need the above to be present and read by all browsers/devices at all times but I also need to adjust the height of the smaller header (currently 90px - beneath the line // animate fixed div to small size:) for ONLY browser widths between 641px and 959px. I need the height of the header to be 120px for those browser widths only otherwise use the above code.

A bit like Media queries where I'd like it update itself as the browser is resized.

How do I do this exactly?

Upvotes: 0

Views: 5890

Answers (1)

Taha Paksu
Taha Paksu

Reputation: 15616

$(window).width();

is what you are looking for. And,

$(window).on("resize",function(){  
   if($(window).width()>641 && $(window).width()<959){
          // do the animations
   }    
}

is the main idea of it.

Upvotes: 6

Related Questions