09-27-2011, 09:08 AM

Hello all,

Got a bit of a frustrating conundrum on my hands. I've built a website that uses particletree's dynamic resolution dependent layout in order to recognize the user's screen size and change the stylesheet accordingly.

Now, this script seems to work in every browser (firefox, IE, chrome, opera) except safari, and I can't figure out what I'm doing wrong. I know my javascript is enabled because other scripts on my website work fine in safari. Also, I ran the script debugger and it showed no errors.

The website is : www.sheket.co.il
(excuse the possible jibrish, the website is in hebrew)

And the specific bit of javascript code is:

window.onload= changeLayout;

	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;
	}



function dynamicLayout(){
	var browserWidth = getBrowserWidth();

	

	if (browserWidth < 900){
		changeLayout('small');
	}
	
	if ((browserWidth >= 900) && (browserWidth <= 1200)){
		changeLayout('medium');
	}
	
}




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;}
   }
}



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] ); 
	   } 
	}
 
	
	
addEvent(window, 'load', dynamicLayout);
	addEvent(window, 'resize', dynamicLayout);

Anyone have any ideas? Thanks!

09-27-2011, 10:59 PM

I'm not a huge javascript coder so sorry if this doesn't help you but when I want the size of the content to be proportional to the size of the browser window I simply use a css

width: 90%;

or something just so that it resizes according to browser window size. Sorry if that wasn't your intention but your webpage seems to do what you want it to just fine (at least on my computer). What kind of mac do you have and also be sure to have the latest update of Safari!