Entry
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 12th, 2002 09: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>
