jquery for an if statement to act like CSS media query

Question

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?

Taha Paksu · Accepted Answer · 2012-08-29 12:50:58Z

6

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

answered Aug 29, 2012 at 12:50

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery for an if statement to act like CSS media query

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related