The following script, largely obtained online (which is used to select css stylesheets called thin, medium and large) has stopped executing in IE8 when the page loads. It is fine in IE7, IE6 and IE5 where it executes both on load and resize. In IE8 it only executes when the page is resized?
It works in FF and recent versions of Opera. Interestingly FF will execute on load even if only the resize event is called. In Safari and Chrome it behaves the same way as IE8.
Having spent considerable time altering parameters and trying other events such as focus I would appreciate any feedback.
function getBrowserWidth(){
if (window.innerWidth){
return window.innerWidth;}
else if (document.documentElement && document.documentElement.clientWidth != 0){
return document.documentElement.clientWidth; }
else if (document.body){return document.body.clientWidth;}
return 0;
}
// dynamicLayout by Kevin Hale
function dynamicLayout(){
var browserWidth = getBrowserWidth();
if (browserWidth < 950) {
changeLayout("thin");
}
if ((browserWidth >= 950) && (browserWidth <= 1024)){
changeLayout("medium");
}
if ((browserWidth >= 1025) && (browserWidth <= 1280)){
changeLayout("large");
}
if (browserWidth >= 1281){
changeLayout("large");
}
}
// changeLayout is based on setActiveStyleSheet function by Paul Sowdon
// http://www.alistapart.com/articles/alternate/
function changeLayout(description){
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
if(a.getAttribute("title") == description){a.disabled = false;}
else if(a.getAttribute("title") != "default"){a.disabled = true;}
}
}
//addEvent() by John Resig
function addEvent( obj, type, fn ){
if (obj.addEventListener){
obj.addEventListener( type, fn, false );
}
else if (obj.attachEvent){
obj["e"+type+fn] = fn;
obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
//Run dynamicLayout function when page loads and when it resizes.
addEvent(window, 'load', dynamicLayout);
addEvent(window, 'resize', dynamicLayout);