Click here to Skip to main content
15,886,518 members
Articles / Web Development / HTML

A jQuery plugin for an Adaptive 960 Grid System

Rate me:
Please Sign up or sign in to vote.
4.50/5 (4 votes)
3 Oct 2011GPL38 min read 33.6K   318   17  
Article discussing the development of a jQuery plugin to be used with adaptive 960 Grid System
; (function ($) {
    $.jQueryAdaptive960 = function (el, options) {
        var defaultOptions = {
            ranges: ['0px    to 760px  = mobile.css',
            '760px  to 980px  = 720.css',
            '980px  to 1280px = 960.css',
            '1280px to 1600px = 1200.css',
            '1600px to 1920px = 1560.css',
            '1940px to 2540px = 1920.css',
            '2540px           = 2520.css'],
            path: 'jquery960/css/',
            onResize: function () { },
            onRotate: function () { }
        }

        // save the element
        var pluginElement = el;

        var jQuery960 = this;

        var init = function () {
            if (options) {
                jQuery960.settings = $.extend(defaultOptions, options);
            }
            else {
                jQuery960.settings = options;
            }

            if (pluginElement.addEventListener) {
                pluginElement.addEventListener('resize', reactiveDisplay, false);

                if (pluginElement.onorientationchange) {
                    pluginElement.addEventListener('orientationchange', rotateDisplay, false);
                }

                setTimeout(checkDisplayOrientation, 1000);
            }
            else if (pluginElement.attachEvent) {
                // old ie support and there is no support for orientation
                pluginElement.attachEvent('onresize', reactiveDisplay);
            }
            else {
                // definitely no orientation support
                pluginElement.onresize = reactiveDisplay;
            }

            adaptDisplay();
        }

        var url, urlOld, timer, timerOrientation;

        var css = el.document.createElement('link');
        css.rel = 'stylesheet';

        var orientation = 0;

        var adaptDisplay = function () {
            clearTimeout(timer);

            var item, range, val_1, val_2, is_range, cssFile;

            var rangeLen = defaultOptions.ranges.length;
            var index = rangeLen;

            var width = pluginElement.innerWidth || pluginElement.document.documentElement.clientWidth || pluginElement.document.body.clientWidth || 0;

            while (index--) {
                item = defaultOptions.ranges[index].split('=');

                range = item[0];
                cssFile = item[1] ? item[1].replace(/\s/g, '') : index;

                is_range = range.match('to');

                val_1 = is_range ? parseInt(range.split('to')[0], 10) : parseInt(range, 10);
                val_2 = is_range ? parseInt(range.split('to')[1], 10) : undefined;

                if ((!val_2 && index === (rangeLen - 1) && width > val_1) || (width > val_1 && width <= val_2)) {
                    url = defaultOptions.path + cssFile;
                    break;
                }
                else {
                    url = '';
                }
            }

            if (urlOld) {
                css.href = url;
                urlOld = url;
            }
            else {
                css.href = url;
                urlOld = url;

                (pluginElement.document.head || pluginElement.document.getElementsByTagName('head')[0]).appendChild(css);
            }
        }

        var reactiveDisplay = function () {
            clearTimeout(timer);
            defaultOptions.onResize();
            timer = setTimeout(adaptDisplay, 50);
        }

        var checkDisplayOrientation = function () {
            if (pluginElement.orientation) {
                var newOrientation = pluginElement.orientation;
                if (newOrientation != orientation) {
                    orientation = newOrientation;

                    defaultOptions.onRotate(orientation);
                }
            }
        }

        var rotateDisplay = function () {
            var newOrientation = pluginElement.orientation;
            if (newOrientation != orientation) {
                orientation = newOrientation;

                clearTimeout(timer);
                timer = setTimeout(adaptDisplay, 50);
            }

            defaultOptions.onRotate(orientation);
        }

        init();
    }
})(jQuery);    

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


Written By
Software Developer
United States United States
I am software developer with over 20 years of professional experience. I have been employed as a software developer since the early 90′s back when Microsoft’s Windows 3.1x was gaining popularity and IBM’s OS/2 was the predominant leader in 32-bit PC based Operating Systems.

Prior to choosing this as my profession I had studied architecture and then later Electrical and Mechanical engineering in college. As a young kid growing up I always played with computers, my first computer was a TRS-80 that I would spend countless hours writing programs for, I never really thought of programming as a profession. The story goes that in my final year of college I took a C/C++ programming class and had so much fun working on the various projects that my professor told me something that changed everything.

“You know they pay people to do stuff like this for a living?” – Professor Bolman

Check out my blog here.

My current and ever evolving projects:

jqAlert javascript alerts done right for those using jQueryUI.
DooScrib Doodle and scribble pad written in javascript for use with HTML5 Canvas.

Comments and Discussions