resolution dependent script to change class

[joejoeknows]

I have to make a site that displays a few different items depending on the resolution of the client. I am having trouble with the scripting. I want to check the resolution and display the correct items accordingly. I set up two classes in my style sheet and I want to change the class. heres the script as it is.

function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}


if ((screen.width>=1280) && (screen.height>=960))
{
function reschange(){
change('header','highres');	
change('logo','highres');
change('title','highres');
change('headerbase','highres');
change('left','highres');
change('clearheader','highres');
change('main','highres');
}

}
else
{
function reschange(){
change('header','lowres');	
change('logo','lowres');
change('title','lowres');
change('headerbase','lowres');
change('left','lowres');
change('clearheader','lowres');
change('main','lowres');
}
}

window.onload=reschange();

The high resolution works fine, but when I switch it over to a lower one, there is no change.

[felgall]

Why do you care about the screen size. Most people with larger screen sizes would have their browser opened to only fill part of the screen. It is the size inside the browser window that you have to fit the page into not the whole screen.

[Buddy Bradley]

Here's what I've used recently:

function page_size_setup() {
	var browserWidth = getBrowserWidth();
	if (browserWidth < 1000 && document.getElementsByTagName('body')[0].className == '') {
		document.getElementsByTagName('body')[0].className = 'tc';
	} else if (browserWidth >= 1000 && document.getElementsByTagName('body')[0].className == 'tc') {
		document.getElementsByTagName('body')[0].className = '';
	}
}

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

window.onload = function() {
	page_size_setup();
}

window.onresize = function() {
	page_size_setup();
}

[joejoeknows]

Well, the reason I want the resolution is because I have a site that will be visited by alot of older people, and I have found that older people use older computers because they don't see the need of paying for a new one when they barely use it,(older computers have lower resolution) and they also have a hard time seeing the screen when the resolution is higher so they turn it down to 800X600 sometimes. The way I designed this site, there is a permanent header and footer with a scrolling center. When I put the machine into 800X600 the menu on the left is too big to fit in the screen. Instead of making the menu smaller for everyone, I want to make the header smaller for just those in a lower resolution. Make sense?

[felgall]

So use Buddy's code that tests the area inside the browser window rather than test for the screen resolution. Screen resolution is irrelevant. I can set up my screen to use 1600x1200 resolution and then set my browser so that it only has 400x300 visible within the browser (one quarter of the screen + browser chrome). If I do that then your page should try to fit in the 400 width available in the browser and not expand to the 1600 width of my screen.

[joejoeknows]

k, thanks