Simple jQuery plugin for dynamic changing classes of html elements. The main goal of this simple plugin is to allow changing bootstrap spanX classes dynamically. For example on large display, you want to have two divs with classes 'span3' and 'span9'. On small displays you might want to have class 'span5' for first div and 'span6' for second. Th…

switchClass.js

/*
 *  Author: Tadeas 'donarus' Palusga - www.palusga.cz - [email protected]
 *  Licence: Do whatever you want and let me know if it helps :)
 */

if (typeof  Object.create !== 'function') {
    // function Object.create could be undefined in older browsers
    Object.create = function (obj) {
        function F() {
        };
        F.prototype = obj;
        return new F();
    };
}


(function ($, window, document, undefined) {

    var Switcher = {

        /**
         * Initialize Switcher.
         *
         * @param options user options which will overwrite default options
         * @param elem dom element on which the switcher has been created
         */
        init: function (options, elem) {
            var self = this;
            self.$elem = $(elem);
            self.options = $.extend({}, $.fn.switchClass.options, options);
        },

        /**
         * Removes all classes defined in '*Class' options and adds
         * correct classes defined in 'YYYYYClass' where YYYYY is
         * determined from current document width and restrictions
         * ('*MinSize' options) defined in options.
         */
        switchClass: function () {
            var self = this;

            var extraLargeClass = self.options.extraLargeClass;
            var largeClass = self.options.defaultClass;
            var smallClass = self.options.smallClass;
            var miniClass = self.options.defaultClass;

            self.$elem.removeClass(extraLargeClass);
            self.$elem.removeClass(largeClass);
            self.$elem.removeClass(smallClass);
            self.$elem.removeClass(miniClass);

            var docWidth = $(document).width();
            if (docWidth >= self.options.extraLargeMinSize) {
                self.$elem.addClass(extraLargeClass);
            } else if (docWidth >= self.options.largeMinSize) {
                self.$elem.addClass(largeClass);
            } else if (docWidth >= self.options.smallMinSize) {
                self.$elem.addClass(smallClass);
            } else {
                self.$elem.addClass(miniClass);
            }
        }
    };

    /**
     *
     * @param options user defined options
     */
    $.fn.switchClass = function (options) {
        this.each(function () {
            var switcher = Object.create(Switcher);
            switcher.init(options, this);
            switcher.switchClass();

            $(window).resize(function () {
                switcher.switchClass();
            });
        });
    };

    /**
     * Default options - can be globally rewritten.
     * @type {{extraLargeClass: null, defaultClass: null, smallClass: null, extraLargeMinSize: number, largeMinSize: number, smallMinSize: number}}
     */
    $.fn.switchClass.options = {
        /**
         * If defined, when document is considered as EXTRA LARGE (see extraLargeMinSize option), this class
         * will be used
         */
        extraLargeClass: null,

        /**
         * If defined, when document is considered as LARGE (see extraLargeMinSize option) or document is
         * not considered as LARGE nor EXTRA_LARGE nor SMALL, this class will be used
         */
        defaultClass: null,

        /**
         * If defined, when document is considered as SMALL (see extraLargeMinSize option), this class
         * will be used
         */
        smallClass: null,

        /**
         * when document is wider than this value, document is considered as EXTRA LARGE
         */
        extraLargeMinSize: 1200,

        /**
         * when document is wider than this value, document is considered as LARGE
         */
        largeMinSize: 980,

        /**
         * when document is wider than this value, document is considered as SMALL
         */
        smallMinSize: 740
    };

}(jQuery, window, document));

switchClassExample.html

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8"/>
    <link href="/css/bootstrap.css" rel="stylesheet"/>
    <style>
        body {
             overflow-y:scroll; /*  current version is not properly working in case that scrollbar is not visible by 
            default, because if previous operation resizes div and scrollbar is displayed on the page, next
            document width determination is not correct!! */
        }
    </style>
    <link href="/css/bootstrap-responsive.css" rel="stylesheet"/>
</head>

<body>

<div class="container">
    <div class="row">

        <div class="span5 relf-leftMenu">
            <div class="well" style="padding: 8px 0;">
                <ul class="nav nav-list">
                    <li class="nav-header">Menu</li>
                    <li><a href="#">XXX</a></li>
                    <li><a href="#">YYY</a></li>
                </ul>
            </div>
        </div>
        <div class="span20 relf-content">

            <ul class="thumbnails">
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
                <li class="span5 relf-thumb-list">
                    <div class="thumbnail">
                        <img data-src="holder.js/260x180" />
                    </div>
                </li>
            </ul>
        </div>

    </div>
</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/holder.js"></script>
<script src="/js/classSwitcher.js"></script>

<script language="JavaScript">
    $(document).ready(function () {

        $('.relf-leftMenu').switchClass({
            extraLargeClass: 'span5',
            defaultClass: 'span5',
            smallClass: 'span7'
        });

        $('.relf-content').switchClass({
            extraLargeClass: 'span20',
            defaultClass: 'span20',
            smallClass: 'span18'
        });

        $('.relf-thumb-list').switchClass({
            extraLargeClass: 'span4',
            defaultClass: 'span5',
            smallClass: 'span6'
        });
    })
</script>

</body>
</html>