danny-englander · September 13, 2012 00:16 · Sep 13, 2012 · Sep 13, 2012 · Sep 13, 2012 · Sep 13, 2012
diff --git a/jquery.responsive-classes.js b/jquery.responsive-classes.js
@@ -1,5 +1,6 @@
 /*
-* originally from: http://designedbythomas.co.uk/blog/how-detect-width-web-browser-using-jquery
+* Inspired by: 
+* http://designedbythomas.co.uk/blog/how-detect-width-web-browser-using-jquery
 * 
 * This script is ideal for getting specific class depending on device width 
 * for enhanced theming. Media queries are fine in most cases but sometimes

diff --git a/jquery.responsive-classes.js b/jquery.responsive-classes.js
@@ -1,4 +1,6 @@
 /*
+* originally from: http://designedbythomas.co.uk/blog/how-detect-width-web-browser-using-jquery
+* 
 * This script is ideal for getting specific class depending on device width 
 * for enhanced theming. Media queries are fine in most cases but sometimes
 * you want to target a specific JQuery call based on width. This will work 

diff --git a/jquery.responsive-classes.js b/jquery.responsive-classes.js
@@ -2,7 +2,8 @@
 * This script is ideal for getting specific class depending on device width 
 * for enhanced theming. Media queries are fine in most cases but sometimes
 * you want to target a specific JQuery call based on width. This will work 
-* for that. Be sure to put it first in your script file. 
+* for that. Be sure to put it first in your script file. Note that you could
+* also target the body class instead of 'html' as well. 
 * Modify as needed
 */
 

diff --git a/jquery.responsive-classes.js b/jquery.responsive-classes.js
@@ -1,6 +1,8 @@
 /*
 * This script is ideal for getting specific class depending on device width 
-* for enhanced theming. be sure to put it first in your script file. 
+* for enhanced theming. Media queries are fine in most cases but sometimes
+* you want to target a specific JQuery call based on width. This will work 
+* for that. Be sure to put it first in your script file. 
 * Modify as needed
 */
 

diff --git a/jquery.responsive-classes.js b/jquery.responsive-classes.js
@@ -1,5 +1,7 @@
 /*
-*This script is ideal for getting specific class depending on device width for enhanced theming. be sure to put it first in your script file. 
+* This script is ideal for getting specific class depending on device width 
+* for enhanced theming. be sure to put it first in your script file. 
+* Modify as needed
 */
 
 (function( $ ){

diff --git a/script.js → jquery.responsive-classes.js b/script.js → jquery.responsive-classes.js
@@ -1,5 +1,5 @@
 /*
-*This is ideal for getting specific class depending on device width for enhanced theming.
+*This script is ideal for getting specific class depending on device width for enhanced theming. be sure to put it first in your script file. 
 */
 
 (function( $ ){

diff --git a/script.js b/script.js
@@ -0,0 +1,55 @@
+/*
+*This is ideal for getting specific class depending on device width for enhanced theming.
+*/
+
+(function( $ ){
+
+  $(document).ready(function(){
+
+    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");
+
+    if(current_width > 651)
+      $('html').addClass("desktop-menu").removeClass("mobile-menu");
+
+  });
+
+  //update the width value when the browser is resized (useful for devices which switch from portrait to landscape)
+  $(window).resize(function(){
+    var current_width = $(window).width();
+    //do something with the width value here!
+    if(current_width < 481)
+      $('html').addClass("m320").removeClass("m768").removeClass("desktop").removeClass("tablet");
+
+    else if(current_width < 669)
+      $('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");
+
+    if(current_width > 651)
+      $('html').addClass("desktop-menu").removeClass("mobile-menu");
+
+  });
+
+})( jQuery );
No results found