/*
sizeit.js
by John Polacek (@johnpolacek)
Docs: http://johnpolacek.github.com/sizeit.js/
License: http://www.opensource.org/licenses/mit-license.php
*/
(function()
{
var config = {};
var screenW;
function windowSize() {
var wSize;
// Internet Explorer
if (document.body && document.body.offsetWidth) {
wSize = document.body.offsetWidth;
}
// Internet Explorer
else if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
wSize = document.documentElement.offsetWidth;
}
// All other browsers
else if (window.innerWidth) {
wSize = window.innerWidth;
}
return wSize;
}
function update() {
screenW = windowSize();
var newSize;
var i;
for (i = 0; i < config.settings.length; i++) {
var setting = config.settings[i];
if (screenW < setting.max) {
newSize = setting;
break;
}
else if (!setting.max) {
newSize = setting;
}
}
if (!config.size || newSize.name != config.size.name) {
config.size = newSize;
} else {
newSize = null;
}
if (config.size.css && newSize) {
// If there is a stylesheet, update it, otherwise make new
if (config.css) {
var links = document.getElementsByTagName('link');
for (i = 0; i < links.length; i++) {
if (links[i].getAttribute('title') == 'sizeit') {
config.css.href = config.size.css;
break;
}
}
}
else {
config.css = document.createElement('link');
config.css.href = config.size.css;
config.css.type = 'text/css';
config.css.rel = 'stylesheet';
config.css.title = 'sizeit';
document.getElementsByTagName('head')[0].appendChild(config.css);
}
}
}
window.sizeit = {
configure : function() {
config.settings = arguments;
// sort by breakpoints, lowest to highest
for (var i = 0; i < config.settings.length; i++) {
// set name to css href if not assigned
if (config.settings[i].name === undefined) {
config.settings[i].name = config.settings[i].css;
}
for (var j = i + 1; j < config.settings.length; j++) {
if (config.settings[i].max > config.settings[j].max) {
s = config.settings[j];
config.settings[j] = config.settings[i];
config.settings[i] = s;
}
}
}
update();
if (window.addEventListener) {
window.addEventListener('resize', update, false);
}
else if (window.attachEvent) {
window.attachEvent('resize', update);
}
else {
window.onresize = update;
}
},
size : function() {
return config.size.name;
},
width : function() {
return screenW;
}
};
}());
sizeit.configure(
{ max: 600, css: "http://jquerymobile.com/demos/1.1.1/css/themes/default/jquery.mobile-1.1.1.css", name: "small" },
{ max: 1024, css: "example.css", name: "medium" },
{ css: "http://jquerymobile.com/demos/1.1.1/css/themes/default/jquery.mobile-1.1.1.css", name: "large" }
);
<ul data-role="listview" data-inset="true">
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">hoge</a></li>
<li><a href="#">huga</a></li>
<li><a href="#">piyo</a></li>
</ul>