CODEWITHSUNDEEP
twitter-bootstrap
cardi777
cardi777

Reputation: 563

twitter bootstrap add class to body referring to it's mode

Is there a way to make twitter bootstrap add a class to the body tag (or even the html tag) which will indicate what responsive mode it is in?

I want to make an adjustment to a certain element when it is in mobile mode.

But i can't reference it, because bootstrap doesn't append classes in this manor when it changes the responsive mode.

I guess i'm looking at getting a js hack of some kind if possible, unless there is a simple setting that will do this for me.

There are 3 modes, something like this:

  1. desktop
  2. tablet
  3. phone

And im looking at this kind of class:

<body class='desktop'>

Then when it changes to tablet:

<body class='tablet'>

Upvotes: 2

Views: 5467

Answers (4)

below43
below43

Reputation: 547

I'm a bit late to the party here, but just did this...

$(document).ready(function(){
    assign_bootstrap_mode();
    $(window).resize(function() {
        assign_bootstrap_mode();
    });
});

function assign_bootstrap_mode() {
    width = $( window ).width();
    var mode = '';
    if (width<768) {
        mode = "mode-xs";
    }
    else if (width<992) {
        mode = "mode-sm";
    }
    else if (width<1200) {
        mode = "mode-md";
    }
    else if (width>1200) {
        mode = "mode-lg";
    }
    $("body").removeClass("mode-xs").removeClass("mode-sm").removeClass("mode-md").removeClass("mode-lg").addClass(mode);
}

Upvotes: 1

Jovica Aleksic
Jovica Aleksic

Reputation: 111

Here is my approach. It respects the media query breakpoints set in bootstrap, so even if you changed e.g. @screen-sm-min in LESS, you don't need to make any settings on te javascript side.

/**
 * Adds the current bootstrap media-query class to the body element and keeps it updated.
 * Attaches empty spans with bootstrap responsive utitlity classes and checks their visibility.
 * Updates the classes on window resize.
 *  
 * examples:
 * var bsc = $('body').bsClasses(); // classes available and up-to-date from now on
 * $('body').bsClasses('deactivate'); // event listeners removed, span elements removed
 * bsc.activate(); event listeners back on, spans attached again
 * 
 * @see http://getbootstrap.com/css/#responsive-utilities 
 * @see http://getbootstrap.com/css/#grid-media-queries
 */

$.fn.bsClasses = function() {

    var pluginName = 'bsClasses',
        args = Array.prototype.slice.call(arguments),
        element = $(this),

        // these are the "modes" we check for.
        modes = [
           {className: 'phone', element: $('<span class="visible-xs"></span>')},
           {className: 'tablet', element: $('<span class="visible-sm"></span>')},
           {className: 'desktop', element: $('<span class="visible-md"></span>')},
           {className: 'large', element: $('<span class="visible-lg"></span>')}
        ],
        plugin = null,
        fn = null
    ;


    function Plugin() {

        this.update = function() {
            $.each(modes, function(i) {
                element[modes[i].element.is(':visible') ? 'addClass' : 'removeClass'](modes[i].className);
            });
        };

        this.activate = function() {
            $(window).bind('resize.' + pluginName, this.update);
            $.each(modes, function(i) {
                element.append(modes[i].element);
            });
            this.update();
        };

        this.deactivate = function() {
            $(window).unbind('resize.' + pluginName);
            $.each(modes, function(i) {
                element.removeClass(modes[i].className);
                modes[i].element.remove();
            });
        };

        this.activate();
    }





    // if there already is an instance for this element, try to call functions on the instance and bail out.
    if (element.data(pluginName)) {
        plugin = element.data(pluginName);
        fn = args.shift(); 
        if (plugin[fn] instanceof Function ) {
            plugin[fn].apply(plugin, args);
        }
        else {
            window.console.warn('no such method', fn);
        }
        return plugin;
    }


    // otherwise, create a new instance and return it
    plugin = new Plugin(element);
    element.data(pluginName, plugin);
    return plugin;


};

Upvotes: 4

Mauno V&#228;h&#228;
Mauno V&#228;h&#228;

Reputation: 9788

Twitter boostrap is based on media queries so what I would do, would be for example creating own css file where I use those same media queries with the styles I want to adjust. See this link to get the idea and look examples from bootstrap.css source how they are applying styles. This way you would not need to add js stuff. And yes, based on your question info, I assume that you just want to adjust styles not something which is loaded from db etc.

Edit:

If you want to do something more complicated or even with javascript I would do it by inspecting user agents which has good discussion here: user agent stuff to detect mobile

If your intention is to provide much changes from UX point of view (not just styles but like adjusting jQuery animations also or how javascript is used), I would inspect user agent using yepnope.js and then doing corresponding actions. For example I recently used it to toggle jQuery animations off when user is visiting site via mobile, works like a charm and no need to watch laggy animations (mostly problem of bad performing android tablets etc.)

Upvotes: 1

joshb
joshb

Reputation: 5220

If all you need to do is adjust styles on the element in mobile mode I'd go with Mauno's suggestion. If you need to do more than that, you could use Modernizr's media query testing to conditionally change the element (or add a class to the body like you described). The test would be something like:

Modernizr.mq('only screen and (max-width: 768px)')

The Modernizr docs have more details on how to test media queries.

Upvotes: 1

Related Questions