PDA

Click to See Complete Forum and Search --> : Script to adjust frameset based on screen resolution

jjohnstn
03-09-2003, 10:42 PM
If you have a page that uses frames, but wish to have it centered at all screen resolutions, then the left frame margin will need to be adjusted. the script below does just that, however it could be improved since it assumes the browser window is maximized and no Favorites bar, etc. is being used.

In the example below, the site content width is 720, and the 115 number is used as "padding", both will vary with your own requirements.

<HEAD>
<script language="JavaScript">
<!--
var left_margin = (screen.width - 720)/2;
var left_frame_width = left_margin + 115;
//-->
</script>
</HEAD>


<script>
document.write('<frameset BORDER="0" FRAMEBORDER="0" cols="' + left_frame_width + ',*" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="no">');
document.write('<frame name="leftframe" target="leftnav" src="frame_leftinteriornavigation.html" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="no">');
document.write('<frameset BORDER="0" FRAMEBORDER="0" rows="145,*" BORDER="no" FRAMEBORDER="no" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0" SCROLLING="no">');
document.write('<frame name="topframe" target="topbanner" src="frame_topinteriorpagebanner.html" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="no">');
document.write('<frame name="contentframe" target="main" src="http://www.fsnb.net<!--#echo var="QUERY_STRING"-->" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="auto">');
document.write('</frameset>');
document.write('</frameset>');
</script>


<NOSCRIPT>
<frameset BORDER="0" FRAMEBORDER="0" cols="123,*" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="no">
<frame name="leftframe" target="leftnav" src="frame_leftinteriornavigation.html" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="no">
<frameset BORDER="0" FRAMEBORDER="0" rows="145,*" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="no">
<frame name="topframe" target="topbanner" src="frame_topinteriorpagebanner.html" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="no">
<frame name="contentframe" target="main" src="http://www.fsnb.net<!--#echo var="QUERY_STRING"-->" BORDER="no" FRAMEBORDER="no" FRAMESPACING="0" SCROLLING="auto">
</frameset>
</frameset>
</NOSCRIPT>

I've tried to use something like this to get a more accurate width number, but it doesn't seem to work in the frameset page (perhaps it only works in body?):

if(document.all){
availW = document.body.clientWidth;
availH = document.body.clientHeight;
}else{
availW = innerWidth;
availH = innerHeight;
}
jjohnstn
03-09-2003, 11:18 PM
Originally posted by Dave Clark
Have you tried cols="50%,*" in your frameset tag?

Dave

Actually, 50% would push it too far to the right. Something like 20% to 30% might work, but would not center it exactly at all resolutions 800x600 and above. That's why I was trying the Javascript method.

In my example, the site content width remains constant (720 pixels wide). at 1024x768 screen resolution you would need a left margin of 152 pixels: (1024-720)/2. You would also have to compensate for the scrollbar, favorites panel in IE, etc. as well as non-maximized browser windows. That's were my method originally described no longer works.
jjohnstn
03-10-2003, 07:52 AM
Originally posted by Dave Clark
Perhaps there is some way you can use this?

cols="*,720,*"

Just grasping at straws here. ;)

Dave

Might be something to that, by putting my existing frameset into the *,720,* frameset you suggest. Was hoping for a "cleaner" Javascript solution, but at least your suggestion will work in browsers w/o Javascript.

More frames, ugh.... :)
jjohnstn
03-10-2003, 09:04 AM
Dave just tried an *,800,* outer frameset and it seems to work well, thanks!