Home     My Faqts     Contributors     About     Help    

faqts : Computers : Programming : Languages : JavaScript : Frames

FAQTs repaired & updated!
Thanks for your patience...
Entry Add Entry Alert - Edit this Entry

Did You Find This Entry Useful?

326 of 376 people (87%) answered Yes
Recently 8 of 10 people (80%) answered Yes

How to change the size of a FRAME in a FRAMESET?

How to change the FRAMESET dimensions?

Ive frameset inside frameset. I want to resize the inner frameset using javascript in Netscape & IE.

In NS 4.77 I get the following: "...the request line contained invalid characters... any ideas?

The fix for NN 6.2.x allows you to set values for .col and .row. Doesn't affect the frameset

Apr 13th, 2002 02:07

Steve Miller, Martin Honnen, Anand Narasimhan, Blair Regan, Abraham Santana


In NN6.2.1, a bug prevents the document.getElementById from working in 
nested framesets. So, use the explicit body reference from a javascript 
function in a nested frameset file.
Use a <FRAME> tag that names a SRC file that includes the frameset.
<frameset rows=31,* border=0 framespacing=0 frameborder=no>
<frame src='frame1.html' name=sessionPane>
<frame src='framesetfile.html' name=frameControl>
</frameset>
In framesetfile.html, define the dynamic frameset
<frameset cols="*,10" border=0 framespacing=0 frameborder=yes 
frameborder=1>
<frame marginwidth=0 marginheight=0 frameborder=yes frameborder=1 
scrolling=auto name=contentpane noresize>
<frame marginwidth=0 marginheight=0 frameborder=no frameborder=0 
scrolling=no name=helppane noresize>
</frameset>
Inside the head of this file, include the javascript function for 
changing the frameset cols. You can use a top. level variable to keep 
track of the frame state. (It doesn't HAVE to be at top.)
function switchFrameSet()
{
	if (top.framesOn == true) //turn it off
	{
		document.body.cols = "*, 0";
		top.framesOn = false;
	}
	else //turn it on
	{
		document.body.cols = "67%, *";
		top.framesOn = true;
	}
}
From anywhere in the document, make reference to 
top.frameControl.switchFrameSet()
--------------------------------------------------------------------
IE4/5 and NN6 allow to dynamically set the ROWS and COLS attibute of a 
FRAMESET. The js value is just a comma separated list of pixel values 
or percentages just as with HTML. So
  top.document.body.cols = '50%, *'
changes the top frameset cols value. If you have nested framesets it is 
best to ID them to script them so
  <FRAMESET ID="fs1" ROWS="100, *">
  <FRAMESET ID="fs2" COLS="20%, *">
allows then to script
  top.document.getElementById('fs2').cols = '40%, *';
with NN6 and IE5 or
  top.document.all.fs2.cols = '40%, *'
with IE4/5.
NN4 and other older browsers don't allow these dynamic COLS/ROWS 
changes. All you can do with them is rewrite the complete FRAMESET 
passing the desired COLS or ROWS value in the query string. The 
following provides an example for a two FRAME FRAMESET. It is assumed 
that the navBar FRAME has a fixed url while the content FRAME's url can 
have changed but you could easily adapt the code. 
<HTML>
<HEAD>
<SCRIPT>
// change the FRAME urls here
var navFrame = 'whatever.html';
var contentURL = 'whatelse.html';
// change the default setting here
var framesetDefault = 'COLS="150, *"';
var framesetSize;
var queryString = location.search.substring(1);
if (queryString) {
  var args = queryString.split('&');
  for (var a = 0; a < args.length; a++) {
    var field = args[a].split('=');
    var fieldName = unescape(field[0]).toLowerCase();
    if (fieldName == 'content')
      contentURL = unescape(field[1]);
    if (fieldName == 'rows' && !framesetSize)
      framesetSize = args[a];
    if (fieldName == 'cols' && !framesetSize)
      framesetSize = args[a];
  }
}
framesetSize = framesetSize ? framesetSize : framesetDefault;
var html = '';
html += '<FRAMESET ' + framesetSize + '>';
html += '<FRAME NAME="navFrame" SRC="' + navFrame + '">';
html += '<FRAME NAME="content" SRC="' + contentURL + '">';
html += '<\/FRAMESET>';
function setFramesetCols (cols, contentURL) {
  if (document.all || document.getElementById) { // DOM support
    document.body.cols = cols;
    document.body.rows = '';
    if (contentURL)
      window.frames.content.location.href = contentURL;
  }
  else { // rewrite FRAMESET
    contentURL = contentURL ? contentURL : 
window.frames.content.location.href;
    var url = location.href.substring(0, this.location.href.lastIndexOf
('?'));
    url += '?';
    url += 'COLS="' + cols + '"' + '&';
    url += 'content=' + escape(contentURL);
    location.href = url;
  }
}
function setFramesetRows (rows, contentURL) {
  if (document.all || document.getElementById) { // DOM support
    document.body.rows = rows;
    document.body.cols = '';
    if (contentURL)
      window.frames.content.location.href = contentURL;
  }
  else { // rewrite FRAMESET
    contentURL = contentURL ? contentURL : 
window.frames.content.location.href;
    var url = location.href.substring(0, this.location.href.lastIndexOf
('?'));
    url += '?';
    url += 'ROWS="' + rows + '"' + '&';
    url += 'content=' + escape(contentURL);
    location.href = url;
  }
}
</SCRIPT>
</HEAD>
<SCRIPT>
document.write(html);
</SCRIPT>
</HTML>
Inside of a FRAME you then call top.setFramesetRows/top.setFramesetCols 
as in
  top.setFramesetRows('50, *')
respectively
  top.setFramesetCols('50, *')
to change to FRAMESET dimensions.
Here is an example FRAME with example calls:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="javascript: top.setFramesetCols('50%, 50%'); void 0">
COLS="50%, 50%"
</A>
|
<A HREF="javascript: top.setFramesetRows('50%, 50%'); void 0">
ROWS="50%, 50%"
</A>
|
<A HREF="javascript: top.setFramesetCols('100, *'); void 0">
COLS="100, *"
</A>
|
<A HREF="javascript: top.setFramesetRows('100, *'); void 0">
ROWS="100, *"
</A>
|
</BODY>
</HTML>



© 1999-2004 Synop Pty Ltd