Skip to content

Instantly share code, notes, and snippets.

@nfeldman
Created July 8, 2011 16:31
Show Gist options
  • Save nfeldman/1072203 to your computer and use it in GitHub Desktop.
Save nfeldman/1072203 to your computer and use it in GitHub Desktop.
add/remove class from custom HTML Wibiya 'app' when media queries aren't supported
/**
* A quick and dirty function to apply a className to a custom html snippet
* in the Wibiya toolbar in browsers that do not support media queries, w/out
* bothering to learn the Wibiya API. Include before the closing </body> tag.
*
* Was written specifically to provide IE support for the following snippet
* of html and css:
*/
// <style type="text/css">
// @media screen and (max-width: 740px) {#wibiyaToolbar_support_key span { display:none; padding-left:60px;padding-right:0}}
// #wibiyaToolbar_support_key {color:#e1e1e1;font-weight:bold;line-height:1;display:block;width:auto;height:18px;padding:6px 10px 0 65px;background:#675388 url(http://example.com/images/keyicon.png) no-repeat 5px top}
// #wibiyaToolbar_support_key:hover,
// #wibiyaToolbar_support_key:focus {color:#FFF}
// #wibiyaToolbar_support_key > .n {display:none!important}
// </style>
// <a title="your support is the key" id="wibiyaToolbar_support_key" href="http://example.com/"><span>This is a label</span></a>
(function() {
var ct = 0, id = 'wibiyaToolbar_support_key';
function w() {
if (typeof wibiyaToolbar == 'object') {
if ((function () {
var style = document.createElement('style'),
div = document.createElement('div'),
uid = '__nsf_rand-' + (+new Date()),
ret;
div.id = uid;
style = ['&shy;', '<style>', '@media screen and (max-width: 9999px) { #' + uid + ' { display:none !important } }', '</style>'].join('');
div.innerHTML += style;
document.documentElement.appendChild(div);
ret = (window.getComputedStyle ? getComputedStyle(div,null).getPropertyValue('display') : div.currentStyle['display']) != 'none';
div.parentNode.removeChild(div);
return ret}()))
(function() {
var label = document.getElementById(id).firstChild;
function resize() {
return label.className = ((document.documentElement.offsetWidth || window.innerWidth) < 710) ? 'n' : '';
};
if (window.attachEvent)
window.attachEvent('onresize', resize);
else if (window.addEventListener)
window.addEventListener('resize', resize, false);
}())
} else if (ct++ < 4) {
setTimeout(w, 200 * ct);
} else
return;
}
return w();
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment