JS or jQuery or window resize or when window width is less than npx
Meh, You can use jQuery, but...
You can subscribe to the window resize event like this:
$(window).on("resize", function(event){
console.log( $(this).width() );
});
Just be careful with this, since a if-statement that executes code when the width is less than n would execute that code a ridiculous number of times while you resize a window that meets those conditions. Better to set some flags or add classes to the document, and make those part of your condition as well.
CSS Media Queries is Where It's At!
However, what you're asking sounds like it would most appropriately be solved with CSS Media Queries. For instance, if we wanted to change the body background color when the window is less than 900px:
@media screen and (max-width: 900px) {
body {
background: #ccc;
}
}
There's even a great polyfill for older version of IE: https://github.com/scottjehl/Respond
jQuery:
$(window).resize(function() {
//do something
var width = $(document).width();
if (width < 900) {
// do something else
}
});
You can use $(window).resize()
like follows
$(window).resize(function() {
if($(this).width() < 900)
//do whatever you want
});
Here is the documentation for $.resize