Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Select an option

  • Save HerrSteen/5b0d217ecbfa0cd4de04c62fe3e4775c to your computer and use it in GitHub Desktop.

Select an option

Save HerrSteen/5b0d217ecbfa0cd4de04c62fe3e4775c to your computer and use it in GitHub Desktop.
JQuery Responsive Classes
/*
*
* Originally inspired by: http://designedbythomas.co.uk/blog/how-detect-width-web-browser-using-jquery
*
* Original source by https://gist.github.com/highrockmedia/3710930
* Edited source by https://gist.github.com/RyanBrackett/6107983
*
* My contribution: Updateded classes to work with the sizes in Bootstrap 3.
*
*/
// 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 > 992) {
$('body').addClass("desktop").removeClass("mobile").removeClass("tablet");
}
else if(current_width > 768) {
$('body').addClass("tablet").removeClass("mobile").removeClass("desktop");
}
else if(current_width < 768) {
$('body').addClass("mobile").removeClass("tablet").removeClass("desktop");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment