faqts : Computers : Programming : Languages : JavaScript : Frames

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

12 of 15 people (80%) answered Yes
Recently 8 of 10 people (80%) answered Yes

Entry

Dynamically How can captuer the height of the frame when the frame is resized

Mar 1st, 2002 10:05
Kannan Chari, Mohan raj, Try this to get the Frame's Top, Left, Height, and Width properties...


The following example shows how to find the frame attributes such as 
Left, Top, Height and Width. Once you saved the following pages, open 
FRAMEMAIN.HTML, through the browser and resize the frame or move the 
screen to see the frame's attributes.

any questions and comments are welcome at kannanchari@hotmail.com

**************************************************************
Please copy the following code and save it as FRAMEMAIN.HTML
**************************************************************

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<FRAMESET ROWS="110, *">
	<FRAME ID=FRAME1  NAME=FRAME1  SRC=FRAME1.htm></FRAME>
	<FRAME ID=FRAME2  NAME=FRAME2  SRC=FRAME2.htm></FRAME>
<BODY>
</BODY>
</FRAMESET>
</HTML>

**************************************************************
Please copy the following code and save it as FRAME1.HTML
**************************************************************

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>

<P>&nbsp;</P>

	<STRONG>This is Frame 1</STRONG>

</HTML>

**************************************************************
Please copy the following code and save it as FRAME2.HTML
**************************************************************

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<BODY>

<BODY OnResize="ShowFrameSize();">
	<P>
	<STRONG>This is Frame 2</STRONG>
	</P>
	<INPUT ID=xParentLeft NAME=xParentLeft TYPE=TEXT SIZE=20 
VALUE=""></INPUT>
	<INPUT ID=xParentTop NAME=xParentTop TYPE=TEXT SIZE=20 
VALUE=""></INPUT><BR>
	<INPUT ID=xLeft   NAME=xLeft   TYPE=TEXT SIZE=20 
VALUE=""></INPUT>
	<INPUT ID=xTop    NAME=xTop    TYPE=TEXT SIZE=20 
VALUE=""></INPUT><BR>
	<INPUT ID=xHeight NAME=xHeight TYPE=TEXT SIZE=20 
VALUE=""></INPUT>
	<INPUT ID=xWidth  NAME=xWidth  TYPE=TEXT SIZE=20 
VALUE=""></INPUT>
</BODY>
</HTML>

<script language=javascript>
function ShowFrameSize()
{	
	document.getElementById("xParentLeft").value = "Frame 1 
Left : " + document.parentWindow.parent.frames
(0).document.parentWindow.screenLeft;
	document.getElementById("xParentTop").value  = "Frame 1 
Top  : " + document.parentWindow.parent.frames
(0).document.parentWindow.screenTop;
	
	document.getElementById("xLeft").value   = "Frame 2 Left   : " 
+ window.screenLeft;
	document.getElementById("xTop").value    = "Frame 2 Top    : " 
+ window.screenTop;
	document.getElementById("xHeight").value = "Frame 2 Height : " 
+ document.body.clientHeight;
	document.getElementById("xWidth").value  = "Frame 2 Width  : " 
+ document.body.clientWidth;
}
</script>