Help using the DOM to resize content

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
snowrhythm
Forum Commoner
Posts: 75
Joined: Thu May 04, 2006 1:14 pm
Location: North Bay Area, CA

Help using the DOM to resize content

Post by snowrhythm »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I've written a script (in javascript no less, hope i'm not ruffling any feathers by posting in a php forum!) that resizes 

content based on the size of the window.   I needed to do this because the application it's written for is one that I 

developed here at my company and it uses a fixed-height header, and one of the columns in the page is fixed-width.

Now I would've just used percents to size the rest of the content, but the the monitors of all the users vary in size...from 17"

all the way up to 30" widescreen and everything in between.   So I can't use percents because the 165px header is like 20% 

of the height on a 17" monitor  resolution but only about 7%  of a 30" monitor's resolution.   I went through all that so I wouldn't

have a bunch of people saying "just use percents!".  

The problem is that the script works great in firefox but doesn't work at all in internet explorer...     hilarious!

Here it is:

[syntax="javascript"]

function WindowSizeListener(){

	if(window.addEventListener){

		window.addEventListener('resize', ChangeSearchHeight(), false);

	} else {   // use the code below for explorer

		document.attachEvent('onResize', ChangeSearchHeight(), false);

	}
	
}

function ChangeSearchHeight(){

	var newHeight;

	var getFrameId;

	var newFrameSize;

	var getId;

	var heightNo;

	var widthNo;

	if(window.innerHeight){

	heightNo = window.innerHeight;

	widthNo = window.innerWidth;

	getId = document.getElementById('retrieved');

	getFrameId = document.getElementById('bodydiv');

	newHeight = getId.setAttribute('style', '{height:' + (heightNo - 175) + ';}');

	newFrameSize = getFrameId.setAttribute('style', '{width:' + (widthNo - 250) + '; height:' + (heightNo - 175) + ';}');

	} else {   // use the code below for explorer

		heightNo = document.body.clientHeight;

		widthNo = document.body.clientWidth;

		getId = document.getElementById('retrieved');

		getFrameId = document.getElementById('bodydiv');

		newHeight = getId.setAttribute('style', '{height:' + (heightNo - 175) + ';}');

		newFrameSize = getFrameId.setAttribute('style', '{width:' + (widthNo - 250) + '; height:' + (heightNo - 175) + ';}');

	}
}


Any ideas? Every bit of help is appreciated. Thanks!


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I'm not seeing how this applies to PHP so.. Moved to Client side.
Post Reply