CSC
111 - Lessons & Examples
Doing Frames the Professional Way
Frames are a very powerful tool in your Web Master's Toolbox. Just like most
things in life, there are advantages and disadvantages of using frames. The
JavaScript in this lesson will help you minimize the problems and give your
visitors a fuller experience.
Navigation on the left
Many websites that use frames use the navigation on the left design. Usually
there are two frames, a narrow navigation window on the left and a large content
menu on the right.
Remember, in order to create a frames page with two windows,
we need to create three separate html pages. The first one contains
the frameset. In this case, I named it
Frames_scripts.html. The code looks like this:
<HTML>
<HEAD><TITLE>Frames Example</TITLE>
</HEAD>
<FRAMESET COLS="133"*" FRAMEBORDER="NO"
FRAMESPACING="0" BORDER="0">
<FRAME SRC="toolbar.html" NAME="toolbar">
<FRAME SRC="content.html" NAME="content">
</FRAMESET>
</HTML>
The FRAMESET contains two columns. The first (left) is 133 pixels wide and
the second (right) is the remaining width of the page. We use
the wildcard symbol (*) to represent this. I also added the FRAMEBORDER="NO"
FRAMESPACING="0"
BORDER="0" attributes because I wanted no borders or
spacing so my backgrounds would seem connected and the frame wouldn't
be so apparent.
I made two simple pages containing nothing more than the simple
html and body tags. I used a blue background (#99CCFF) for toolbar.htm
which match to the background image (lightbluebackground.gif)
I used on content.htm.
Normally in html, you would add the links to the toolbar page by using:
<A HREF="page1.html" TARGET="content">Go
to link 1</A>
To target frames in JavaScript we do this a bit differently although
the idea is the same.
To open a page in JavaScript we could write a function and then use an event
handler or the javascript: method to call it:
<HTML><HEAD><TITLE>Tool Bar
2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function openPage() {
parent.content.location.href="page1.html";
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="000099" LINK="#FFFFFF"
VLINK="#FFFFFF" ALINK="#FFFFFF">
<A HREF="#" onClick="openPage()">Open
Page with onClick</A>
<P>
<A HREF="javascript:openPage()">Open Page with
javascript</A>
</BODY>
</HTML>
You can see the FramesExample2.html
and the supporting page toolbar2.htm
to see it in action.
Remember in the lesson about opening
windows, we learned how to open a new window. Here we are
doing the same thing except we are targeting a window that is
in a frame instead of a new window.
Of course, we want to be able to link multiple pages to our content section
of our page so we need to do some slight modifications to make it happen. We
change the page to read:
<HTML><HEAD><TITLE>Tool Bar
3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function openPage(url) {
parent.content.location.href=url;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="000099" LINK="#FFFFFF"
VLINK="#FFFFFF" ALINK="#FFFFFF">
<A HREF="#" onClick="openPage('page1.html')">Open
Page 1</A>
<P>
<A HREF="#" onClick="openPage('page2.html')">Open
Page 2</A>
<P>
<A HREF="javascript:openPage('page1.html')">Open
Page 1</A>
<P>
<A HREF="javascript:openPage('page2.html')">Open
Page 2</A>
</BODY>
</HTML>
You can see the FramesExample3.html
and the supporting page toolbar3.htm
to see it in action. Notice that I called the function 2 different
ways in each of the last two examples; with an event handler (onClick)
and with a method (javascript:)
Sometimes with a small browser window, it is nice to get the menu frame out
of the way temporarily in order to read the content section in the full browser
window.We can expand and contract your frames by using JavaScript. In order
to do this, all we have to do is to create a link that changes the location
of the frameset which is parent to the location of content. This
makes our main document in our content window open up to take up the full window.
Here is the code that takes care of the expanding content:
<A HREF=
"javascript:parent.location.href=parent.content.location.href">
Expand Article</A>
or if you prefer to do it with the onClick event
handler:
<A HREF="#" onClick=
"parent.location.href=parent.content.location.href">
Expand Article</A>
In the content window page, I added a couple links to get you back to the original
frameset. The first example is the same as we learned previously with the history.go()
function.
<A HREF="javascript:window.history.go(-1);">
Open Menu<a>
I also added the normal link that opens up the original page again. Notice
that I used the target="_top" to open the page in the top level window.
<A HREF="frame_example4.html" target="_top">
Open Menu</A>
Take a look at FramesExample4.html
and the revised content page content2.htm.
Changing more than one frame with one click
One of the greatest things about JavaScript and frames is it allows you to
change more than one page at a time by clicking only one link. Typically you
might like to do this when you want to change a menu bar to reflect a new section
of the site.
First thing I did was to create a new
frameset with three windows and the five supporting pages:
menupage1.htm,
contentpage1.htm,
contentpage2.htm,
title1.html
and title2.html.
The page with the links (menupage1.html)
is written with the following code:
<HTML><HEAD>
<TITLE>Multiple Pages</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function changePages(toppageURL,rightpageURL) {
parent.toppage.location.href=toppageURL;
parent.rightpage.location.href=rightpageURL;
}
</SCRIPT>
<BODY BGCOLOR="red">
<b>Menu</b><P>
<A HREF=
"javascript:changePages('title2.html',contentpage2.html');">
Change 2 pages</A>
<P>
<A HREF=
"javascript:changePages('title1.html',contentpage1.html');">
Change 2 back</A>
</BODY></HTML>
In order to change 3 pages at the same time, we just add a little more to the
script"
<HTML><HEAD><TITLE>Multiple
Pages</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function changePages(toppageURL,rightpageURL,rightmostpageURL)
{
parent.toppage.location.href=toppageURL;
parent.rightpage.location.href=rightpageURL;
parent.rightmostpage.location.href=rightmostpageURL;
}
</SCRIPT>
<BODY BGCOLOR="red">
<b>Menu</b><P>
</BODY></HTML>
Of course, I had to modify the frameset which I renamed multiple_frames2.html,
and I added two more supporting pages contentpage3.htm
and contentpage4.htm.
Rotating Frames
Frames are a good way to rotate content. The setup here consists
of three separate frames, big, little, and rotateFrame. The rotated
documents are displayed in the rotateFrame frame. When
the frameset is loaded (onLoad), the script calls a function named
rotate(). We need to define some variables to control the rotation
such as prefix,currentPage, totalPages, and lullTime. These are
necessary because of the naming scheme that we use for the pages
that will be rotated.
Each of the pages names has the same prefix (rotate) which is
then followed by a number (1 through 3 in this case). For this
example, I created 3 pages to be rotated called rotate1.html,
rotate2.html and rotate3.html.
We use the variable currentPage to keep track of which page is
being shown in the frameset. The variable total pages defines
the total number of pages that will need to be rotated. The variable
lulltime defines the delay between page changes (in milliseconds).
5000 milliseconds equals 5 seconds. We use the function rotate(),
which is loaded with the onLoad event handler to determine if
the currentPage is less than the total number of pages (totalPages).
If it is it increments the page by one. If it is not, it sets
the counter back to one.
Next we set the location of the rotateFrame to the web page that
responds to the value of currentPage. For instance, if the location
of the rotateFrame is rotate2.html ("rotate" + 2 + ".html").
We use the setTimeout() method to rerun the rotate() function
after waiting for the specified lulltime. It is important to note
that the setTimeout() method is the usual way of timing the execution
of different events in JavaScript. As an overview on how it is
set up:
setTimeout('code to run','time to wait in milliseconds');
Don't forget to put in your quote marks or it won't work right.
Here is the code:
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function rotate() {
if (currentPage < totalPages) currentPage++;
else currentPage = 1;
parent.rotateFrame.location.href = prefix + currentPage + '.html';
setTimeout('rotate()', lullTime);
}
var prefix = 'rotate';
var currentPage = 0;
var totalPages = 3;
var lullTime = 5000;
</SCRIPT>
</HEAD>
<FRAMESET onLoad=""rotate()" COLS = "30%, 70%"
FRAMEBORDER = NO BORDER = 0 FRAMESPACING =0>
<FRAMESET ROWS="*,200" FRAMEBORDER = NO
BORDER = 0 FRAMESPACING = 0>
<FRAME NAME="little" SRC = "little.html">
<FRAME NAME="rotateFrame" SRC = "rotate1.html">
</FRAMESET>
<FRAME NAME="big" SRC="big.html">
</FRAMESET>
</HTML>
Return to Top of Page
