Skip to content

Instantly share code, notes, and snippets.

@RyanBrackett
Last active November 5, 2019 14:16
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save RyanBrackett/6107983 to your computer and use it in GitHub Desktop.
Save RyanBrackett/6107983 to your computer and use it in GitHub Desktop.
How About This...
/*
*
* Originally inspired by: http://designedbythomas.co.uk/blog/how-detect-width-web-browser-using-jquery
*
* Original source by https://gist.github.com/highrockmedia/3710930
*
* My contribution: I re-wrote some code it to fire as one function, so you're only editing values in one place.
*
*/
// Change width value on page load
$(document).ready(function(){
responsive_resize();
});
// Change width value on user resize, after DOM
$(window).resize(function(){
responsive_resize();
});
function responsive_resize(){
var current_width = $(window).width();
//do something with the width value here!
if(current_width < 481)
$('html').addClass("m320").removeClass("m768").removeClass("desktop").removeClass("m480");
else if(current_width < 739)
$('html').addClass("m768").removeClass("desktop").removeClass("m320").removeClass("tablet");
else if (current_width < 970)
$('html').addClass("tablet").removeClass("desktop").removeClass("m320").removeClass("m768");
else if (current_width > 971)
$('html').addClass("desktop").removeClass("m320").removeClass("m768").removeClass("tablet");
if(current_width < 650){
$('html').addClass("mobile-menu").removeClass("desktop-menu");
$('.sf-menu').removeClass("sf-js-enabled").addClass("sf-js-disabled");
}
if(current_width > 651){
$('html').addClass("desktop-menu").removeClass("mobile-menu");
$('.sf-menu').removeClass("sf-js-disabled").addClass("sf-js-enabled");
}
}
@mindplay-dk
Copy link

Just messing around, but what if you could just do this?

new Responsive(window)
    .upTo(480, "m320")
    .upTo(740, "m768")
    .upTo(971, "tablet")
    .orHigher("desktop")
    .update(document.body)

new Responsive(window)
    .upTo(650, "mobile-menu")
    .orHigher("desktop-menu")
    .update("ul.menu")

I hammered out a quick prototype which seems to work :-)

@Tsunamijaan
Copy link

Thanks for updating

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment