http://www.visitsaotome.com/plugins/system/t3/base/js/responsive.js

1/** 
2 *------------------------------------------------------------------------------
3 * @package       T3 Framework for Joomla!
4 *------------------------------------------------------------------------------
5 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
6 * @license       GNU General Public License version 2 or later; see LICENSE.txt
7 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
8 *                & Google group to become co-author)
9 * @Google group: https://groups.google.com/forum/#!forum/t3fw
10 * @Link:         http://t3-framework.org 
11 *------------------------------------------------------------------------------
12 */
13
14
15/* responsive */
16jQuery(document).ready(function($){
17  var current_layout = '';
18  var responsive_elements = $('[class*="span"], .t3respon');
19  // build data & remove data attribute - make the source better view in inspector
20  responsive_elements.each (function(){
21    var $this = $(this);
22    $this.data();
23    $this.removeAttr ('data-default data-wide data-normal data-xtablet data-tablet data-mobile');
24    if (!$this.data('default')) $this.data('default', $this.attr('class'));
25  });
26
27  // Get browser scrollbar width
28  var scrollbarWidth = (function () { 
29    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
30    // Append our div, do our calculation and then remove it 
31    $('body').append(div); 
32    var w1 = $('div', div).innerWidth(); 
33    div.css('overflow-y', 'scroll'); 
34    var w2 = $('div', div).innerWidth(); 
35    $(div).remove(); 
36    return (w1 - w2); 
37  })();
38
39  var update_layout_classes = function (new_layout){
40    if (new_layout == current_layout) return ;
41    responsive_elements.each(function(){
42      var $this = $(this);
43      // no override for all devices 
44      if (!$this.data('default')) return;
45      // keep default 
46      if (!$this.data(new_layout) && (!current_layout || !$this.data(current_layout))) return;
47      // remove current
48      if ($this.data(current_layout)) $this.removeClass($this.data(current_layout));
49      else $this.removeClass ($this.data('default'));
50      // add new
51      if ($this.data(new_layout)) $this.addClass ($this.data(new_layout));
52      else $this.addClass ($this.data('default'));
53    });
54    current_layout = new_layout;
55  };
56  var detect_layout = function () {
57    var devices = {
58      wide: 1200,
59      normal:    980,
60      xtablet:  768,
61      tablet:  600,
62      mobile:  0
63    };
64    var width = $(window).width() + scrollbarWidth;
65    for (var device in devices) {
66      if (width >= devices[device]) return device;
67    }
68  }
69  update_layout_classes (detect_layout());
70  
71  // bind resize 
72  $(window).resize(function(){
73    if ($.data(window, 'detect-layout-timeout')) {
74      clearTimeout($.data(window, 'detect-layout-timeout'));
75    }
76    $.data(window, 'detect-layout-timeout', 
77      setTimeout(function(){
78        update_layout_classes (detect_layout());
79      }, 200)
80    )
81  })
82});