While frames are not always ideal for many designs, they do
sometimes come in handy with specialized applications.
The first tag is the FRAMESET tag. It specifies two columns, one
is 100 pixels wide, and the other takes up the rest of the width. There is to be
no space between the two frames, no border, and before the frameset is unloaded,
you wish to execute the JavaScript function areyousure().
onbeforeunload() is specific to Internet
Explorer.
The second tag is a FRAMESET tag as well.. It will split up the
100 pixel wide column in the previous FRAMESET. It defines 5 rows, with the
first one 120 pixels high, the third one 300 pixels high, and the
fifth one 10 pixels high.
The second and fourth row will
evenly split any remaining vertical pixels left, if any.
The next five tags assign the attributes to the five rows in the
first column.
The next tag is necessary to close the inner frameset for the
first column. (</FRAMESET>)
The next tag is a FRAME tag that assigns ALL of the second column
to one page, and unlike all of the other frames, it enables scrolling, if
necessary.
The FRAMESET map looks like this:
LOGO |
SPACER1 |
MENU |
MAINWINDOW
SPACER2 |
NOTICE |
Most tuorials will show you simple stuff like navigating the
"mainwindow" frame from, say, the "menu" frame.
<a href="anotherpage.html"
target="mainwindow"> -OR-
top.mainwindow.document.location.href=
"anotherpage.html";
But what if you want to set a variable in another frame? Or
run a function in another frame? Just as simple:
The first one runs menuClicked() in
the "mainwindow" frame, the second sets "mainwindow" frame's myvariable to
1.
<a href="javascript:doNothing();"
onClick="top.mainwindow.menuClicked(1); return false;"> -OR-
<a href="javascript:doNothing();"
onClick="top.mainwindow.myvariable = 1; return false;">
[NOTE: doNothing() is usually a Javascript programmer's junk
function, which contains no commands but still exists in each page's
javascript]
Now what if you have one of your
pages, say content.html, load a frameset of it's own? And you want to check to
see is it has been loaded before you try to address the frames? OK, let's assume
the content.html will split into two frames, named "topcontent" and
"bottomcontent".. Now say you want the "logo" frame to have a link that loads
something into "bottomcontent" if it exists, or into the entire "mainwindow" if
it doesn't:
function LoadCopyright() {
if (top.mainwindow.bottomcontent)
{
top.mainwindow.bottomcontent.document.location.href="Copyright.html";
} else
{
top.mainwindow.document.location.href = "Copyright.html";
}
<A href="javascript:doNothing();" onClick="LoadCopyright();
return false;">
It took more typing to explain it
than it did to DO it... Of course you need to surround javascript functions in a
<SCRIPT> tag, and each <A href...> needs an </A> after the
text or image you use for your link...
Now to a neat "Stupid FrameSet Trick"
only available in IE using the FRAMESET or BODY tag's onbeforeunload="areyousure();"; property:
function areyousure() {
event.returnValue = "Are you sure you
want to miss out on [My Offer]?";
}
This has great use in a frameset, because the viewer will only be
asked if they:
A. Refresh the entire window
B. Visit a site that breaks
out of the frameset
C. Clicks the Back button to exit your site
D.
Clicks the 'X' Close button
Another neat side-effect is that if they click "Cancel", (to stay
at your site) NOTHING happens! If you use "onunload", the window closes and you
need to re-open the window!
You can see all of this functionality in it's full glory where I
developed it at:
http://www.windough.com
Please note that what I present here is simplified and 'common
knowledge' of advanced Javascript programmers. You may develop based on this
tutorial, but you may not use code from Windough.com.
If you have any comment or questions, please don't hesitate to
post them. I enjoy helping people.
If this was of any use to you, please Vote.. I
don't expect to win, but positive votes help the ego now and then :)
Also, if you have any other tutorial suggestions, please comment
here as well.
Herbert Riede
Programmer, WinDough.com,
Inc.
