unobstrusive browser width detection

jquery.responsive.js

/**
 * unobstrusive browser width detection
 *
 * Originally inspired by: http://designedbythomas.co.uk/blog/how-detect-width-web-browser-using-jquery
 * Original source by https://gist.github.com/highrockmedia/3710930
 * Contribution https://gist.github.com/RyanBrackett/6107983
 *
 * Copyright (c) 2013 Sven Schüring
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is furnished
 * to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * @author Sven Schüring <[email protected]>
 * @see jQuery 1.7 | http://jquery.com/
 * @version 0.1
 */


 (function ($) {
	"use strict";

	$.fn.responsive = function (opts) {
		var options = this.extend({
			"css320":          "m320",
			"css480":          "m480",
			"css768":          "m768",
			"cssDesktop":      "desktop",
			"cssMobile":       "mobile",
			"cssTablet":       "tablet",
			"cssDesktopMenu":  "desktop-menu",
			"cssMobileMenu":   "mobile-menu",
			"sfMenu":          $('.sf-menu'),
			"cssSfJsEnabled":  "sf-js-enabled",
			"cssSfJsDisabled": "sf-js-disabled"

		}, opts);

		/**
		 * Plugin Begin
		 * turn plugin on all matched nodes
		 */
		return this.each(function () {

			var current_width = $(window).width();
			var node = $(this);
			//do something with the width value here!
			if(current_width < 481)
				node.addClass(options.css320).removeClass(options.css768).removeClass(options.cssDesktop).removeClass(options.css480);

			else if(current_width < 739)
				node.addClass(options.css768).removeClass(options.cssDesktop).removeClass(options.css320).removeClass(options.cssTablet);

			else if (current_width < 970)
				node.addClass(options.tablet).removeClass(options.cssDesktop).removeClass(options.css320).removeClass(options.css768);

			else if (current_width > 971)
				node.addClass(options.cssDesktop).removeClass(options.css320).removeClass(options.css768).removeClass(options.cssTablet);

			if(current_width < 650) {
				node.addClass(options.cssMobileMenu).removeClass(options.cssDesktopMenu);
				options.sfMenu.removeClass(options.cssSfJsEnabled).addClass(options.cssSfJsDisabled);
			}

			if(current_width > 651) {
				node.addClass(options.cssDesktopMenu).removeClass(options.cssMobileMenu);
				options.sfMenu.removeClass(options.cssSfJsDisabled).addClass(options.cssSfJsEnabled);
			}

		}); //this.each
	}; // $.fn
})(jQuery); //$closure

jquery.settings.js

$(document).ready(function() {

/**
 * $('html').responsive({
 *	"css320":          "m320-custom",
 *	"css480":          "m480-custom",
 *	"css768":          "m768-custom",
 *	"cssDesktop":      "desktop-custom",
 *	"cssMobile":       "mobile-custom",
 *	"cssTablet":       "tablet-custom",
 *	"cssDesktopMenu":  "desktop-menu-custom",
 *	"cssMobileMenu":   "mobile-menu-custom",
 *	"cssSfJsEnabled":  "sf-js-enabled-custom",
 *	"cssSfJsDisabled": "sf-js-disabled-custom"
 *	});
 * /

	$(window).resize(function () {
		$('html').responsive();
	}).resize();

});