Javascript window sizing help.

[rrhode]

Hi there,

Any help will be extremely welcomed here!

I am having troubles with Firefox and Javascript. I noticed there is some sort of security issue or some junk like that that happened. Maybe thats what the 1.03 update was?

Anyway, if you can look through my javascript code at mambo-templates.ty2u.com and help me find out why it doesnt stop resizing in Firefox.

If you try to resize the screen in IE it will stop at 800px small and not get bigger than 1024. But in Firefox I cant seem to get this to work properly.

Thank you in advance for any help that you might be able to give me.

Ryan

P.S.

I also noticed that in Firefox the margins arent right. It creates a scroll bar. I dont want it to do this. The link to the Wrapper also does this and I cant get it to work. Also, in IE, the contact page is messed up and I dont know why but it works fine in Firefox. Blah!

 

[rrhode]

ok, well i fixed the contact form. width was set to 100% not 50% which is hard coded into the html but i manged to find the class and change that in the css

also fixed the polls which i see i didnt even mention anyway. Now all I need is for the code to work in firefox. If you know.... please please help!!!

<script type="text/javascript" language="JavaScript">
/*This function gets the available width of the window.*/
function getAvailableWidth(){
	var theWidth=null;
	/*Netscape uses window.innerWidth */
	if (window.innerWidth) {
	theWidth = window.innerWidth;
	}
	/*IE uses document.body.clientWidth */
	if (document.body.clientWidth) {
	theWidth = document.body.clientWidth;
	}
	return theWidth;
}
/*this function resizes the outer div*/
function sizeObj() {
	var newSize = null;
	/*gets available width*/
	var windWidth = getAvailableWidth();
	/*gets size of outer div*/			
	var newSize = document.getElementById("outer");
	/*if available width is between the set sizes*/	
	if (windWidth > 775 && windWidth < 999){
	/*set the outer div width to the available width*/		
	newSize.style.width = windWidth;				
	}
	/*if available width is more than 1024*/
	if (windWidth > 1023){
	/*sets the size of the outer div taking scroll bar into account*/							
	newSize.style.width = 999;						
	}
	/*if available width is less than 800*/
	if (windWidth < 801){
	/*sets the size of outer div taking scroll bar into account*/							
	newSize.style.width = 775;						
	}
}
/*these window commands call the resize*/
window.onload = sizeObj;
window.onresize = sizeObj;
</script>

 

[spewn]

post the html that calls this, or a smaller, functional example of the html...

curiously, what isn't it doing in firefox that it is in IE?

do you see the javascript errors?

- g

 

[rrhode]

Hey g

Or should I call you - g ?

I am so happy that someone is repying!

I have been playing with this but have not yet gotten it to work.

The problem is simply that in IE, as you resize the window from 800px wide to 1024 it will resize the outer div and stop resizing outside of those parameters and remain 800 or 1024. Or at least it should. I know it doesnt exactly yet but thats ok enough for now I guess.

The problem in Firefox is that it does not stop resizing at 800 or 1024.

Say your screen is at 950px wide when you open it up, it should resize the window to whatever works taking into account the scroll bars and whatnot in the browsers so it looks right. And then if you drag the window bigger it resizes the outer div up to 1024 and then stays at 1024 wide but the window can go bigger if it likes. I also am having troubles getting it to work just upon maximization or restore to resize. If anyone knows this I would sure love to figure it out

I noticed that you asked for the html. Perhaps this is my problem because I dont call it from html at all. Just runs as the page loads. I will test out calling some javascript from the html.

I did a test in Firefox. It says that newSize property invalid or something. I will check it out. I suspect it has something to do with the getElementById.

Anyway, the javascript errors I get in Firefox console is...
newSize has no properties.


So I suspect something but I dont know what

The html... the source at http: mambo-templates.ty2u.com

Thanks for the help!!!

Ryan

 

[spewn]

i ran the code in a page and it stopped when it looked for the element in the document named 'outer'...

also, i'm curious what you want this to do...i put an alert to tell me what the size was each time it resized and reloaded, and it was accurate past 1024 in netscape 7.2, i was told that they function the same, netscape and firefox...

i must be misunderstanding your question...

- g

 

[rrhode]

g, I appologize for not being able to explain this clearly.

The question is, how do I get it to stop resizing at 800px and 1024px in Firefox. In IE it will resize properly. Perhaps there is some sort of code error? I dont really know. I have gone over it a million times.

The outer div should only resize to a max of 1024 and a min of 800 but everything in between. I also cant get it to resize the outer div when maximizing or restoring the window.

I have as of yet had no luck but I can feel it coming closer Thank you!

Ryan

 

[Guest_imported]

For firefox (and every other browser that understands), why not use two CSS properties to achieve this, instead of all that JS code:

body {
   min-width: 800px;
   max-width: 1024px;
}

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[rrhode]

Thanks Dan but this does not work for me.

 

[rrhode]

I forgot to mention that what doesnt work is the min-width function. The max-width appears to be alright, but no min-width. Thank you!

Ryan

 

[rrhode]

Opps! Ran through css validator and I accidentally erased the ; on the previous line Awesome!

 

[BillyRayPreachersSon]

You'll still need the JS code for IE (and for any other browsers that don't support the CSS), but that should get you going for FF / NN, etc.

Oh yes - and the newest version of Safari that was released a few days ago supports these now.

Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[rrhode]

Ok, works in Firefox but not IE so I will use Javascript for IE and CSS for Firefox. Oddness!!! But it works so thank you for all your help. I really like these forums!!!!

Peace!

Ryan