Hello, I'm writing software to display notices on a plasma screen via a web page. The function that's giving me grief works fine in Safari, firefox, and chrome. The problem is Internet Explorer 6 and 7.

Here is the code:

//Function to ajust font size so that its large enough to fill the screen, but ;
//small enough to negate the need to scroll. This is to display a newsfeed on a;
//Signboard.;
function setfsize(plmin,done){
	//if plmin isnt set then the base font size will be that.;
	if(!plmin){var fsize = Math.floor(1.15*(window.innerWidth-16) / 50);}
	//otherwise, get globally stored fontsize, increase or decrease it based on;
	//whether plmin is a plus sign or a minus sign.;
	else{
		var fsize = fontsize;
		if(plmin=="+"){fsize++;}
		else{fsize--;}
	}
	//Get reference to the element, and apply the font size style attribute;
	ph = document.getElementById("page");
	ph.style.fontSize = fsize+"pt";
	//Store the font size globally;
	fontsize=fsize;
	if(!done){done=0;}
	if(done==0){
		//if the content has overrun the viewing area, make it smaller until it fits;
		if (window.innerHeight < this.getScrollHeight()){setfsize("-",1);return;}
		if (window.innerWidth < this.getScrollWidth()){setfsize("-",1);return;}
		//otherwise keep increasing the font size until the above is true;
		else{
			setfsize('+',0);return;
		}
	}
	//if the content is larger than the viewing area, make it smaller until it fits;
	//this one is for if the content started out larger, or if it needs to be shrunk;
	//more than once to get rid of the scrollbars.;
	else{
		if (window.innerHeight < this.getScrollHeight()){setfsize("-",1);return;}
		if (window.innerWidth < this.getScrollWidth()){setfsize("-",1);return;}	
	}
}

My problem seems to be the fsize variable, which according to the Visual Studio debugger thing for IE, keeps ending up as NaN. That doesn't make sense though, because it works fine in the browsers mentioned above, and probably Opera also, though I haven't had a chance to test it.

An other problem is the window.innerHeight/Width, but I tried document.body.clientWidth/Height and that causes the text to be enormous, which defeats the purpose...

Anyway, could someone please help me, because I've been working at this for about 7 hours straight, and I'm really missing something.

Well Thank you to anyone for any sort of suggestions/help...

(Sorry if my post seems a bit irritated, but I really have been working on this since about 19:00 and it's now 6 minutes to 2 in the morning...)

IE doesn't support window.innerWidth or .innerHeight

use document.body.clientWidth



<edited to correct my copy and haste >

Yes, I tried document.body.clientWidth/Height, but that causes it to make the text way too large in other browsers. Also, IE continues to complain about the fsize variable, which for some reason continues to be NaN, even though it should be set to a number by the if statements above.

Well I had a good night's sleep, so now hopefully I'll be able to take a fresh angle on it.

Any help would still be appreciated though, and if someone knows of a script that does what I'm trying to do, please tell me about it!

I'm basically trying to increase the font size for an Div containing text until it fills the screen, or decrease the font size if it's already too big so that it all fits on screen without having to scroll.

Yes, I tried document.body.clientWidth/Height, but that causes it to make the text way too large in other browsers.

I suggest you reset the font-size to a percent in the body{} of your CSS document, then use "em" instead of "pt" for the font-size in your script. This way you will have consistency across browsers.

I figured it out. It was a problem with the logic.
I was attempting to get a base font size from:

Math.floor(1.15*(window.innerWidth-16) / 50);

... and then make it larger or smaller until it filled the screen via looping.
For the other locations in the function I swapped window.innerWidth for a function that returned the viewport width based on the available properties.

I just forgot that bit, and so that ended up evaluating to NaN, and IE was complaining about trying to set the font size to NaNpt.


I will post a link here to the finished application when it's done, which should be by tomorrow from the looks of it.

Happy Holidays!