clientWidth
Calculates clientWidth.
by psycketom
JavaScript
/* jQuery */
var pseudo = document.createElement('div');
$(pseudo).css({
position : 'absolute',
width : '100%',
height : '111%', // a little overflow
top : 0,
left : 0
}).appendTo(document.body);
var clientWidth = window.innerWidth - ( window.innerWidth - $(pseudo).width() );
$(pseudo).remove();
document.write('without plugin = ' + clientWidth + '<br/>');
/* jQuery plugin */
(function($){
return $.extend({
clientWidth : function(){
var pseudo = $(document.createElement('div')).css({
position : 'absolute',
width : '100%',
height : '111%', // a little overflow
left : 0,
top : 0
}).appendTo(document.body);
var _cw = window.innerWidth - ( window.innerWidth - pseudo.width() );
pseudo.remove();
return _cw;
}
});
})(jQuery);
document.write('with plugin = ' + $.clientWidth() + '<br/>');
/* Vanilla polyfill */
(function() {
var e = document.createElement('div');
e.style = 'position:absolute;width:100%;height:111%;top:0;left:0;';
document.body.appendChild(e);
window.usableWidth = window.innerWidth - (window.innerWidth - e.offsetWidth);
e.parentNode.removeChild(e);
})();
document.write('with vanilla sickfuck polyfill = ' + window.usableWidth+ '<br/>');