HTML Frames(and Free Code!)



As you may have noticed, this site is done using frames. We'd like to share with you some of the "behind the scenes" technical work that went into making Issues Magazine come together. Grab your backstage pass and hold on to your hat.

The Basics

There are 3 frames on each page of this site. There is a header, a navigation sidebar, and a main area which contains the articles. The content in each frame is really coming from a separate page, stuck together in what is called a frameset.

The following code illustrates this, in blue are the 3 pages which are loading into the frameset:

technologyframes.html

<html>
<head>
<title>Frameset Example </title>
</head>
<frameset rows="112,*" cols="*">
<frame src="technologyheader.html" frameborder="0" scrolling="no">
<frameset cols="21%,*">
<frame src="technologynav.html" frameborder="0">
<frame name="main" src="frames.shtml" frameborder="0">
</frameset>
</frameset>
<noframes>
Your browser does not support frames, please contact
<a href="mailto:webmaster@issues-mag.com">webmaster</a>.
</noframes>
</html>

The above is the code for the frameset you are now viewing. Copy this code and replace the filenames with filenames of your pages and see what happens when you view it. When you use frames, you should always include a message or non-frames page for those viewers who have browsers which do not support frames. In this example we simply alert the viewer that they cannot view the site because it contains frames.

Navigation

On its most basic level, all you need to know for linking when using frames is that your links must be targeted, that is, you must specify which frame a page should load in when a link is clicked.

For example, when the following link is clicked, it loads the page in the frame named "main" in your framset, as in the above example:

<a href="page.html" target="main">Click Here</a>

There are several target values(eg. target="_blank") which are inherent in HTML, as follows:

_blank - Page opens in new browser window when the link is clicked.

_self - Page opens in the same area of the frameset that the link is located.

_parent - Page opens in the window containing the frame the link is located in.

_top - Page opens in the main browser window.

In complex and/or large sites, many web developers prefer not to use frames, as they can get very complicated when it comes to linking and pages loading in the correct area of the frameset.

For example, to use a drop down navigation menu as you see in the left frame of this page with a frameset, you have to alter the code slightly so that the destination page loads properly. Thanks to Tanya of HyperGurl.com for her assistance with this code.

Following is the drop down code used in our drop down menu, in blue is the portion of the code which tells the browser to load the page in the full window, as opposed to loading in the same frame which contains the menu:

<FORM name="navform" method="post">

<SELECT size="1" name="dropdownmenu">

<OPTION value="http://issues-mag.com/inside.htm"l selected>Table of Contents</OPTION>
<OPTION value="http://issues-mag.com/featuresframes.html">Features</OPTION>
<OPTION value="http://issues-mag.com/issuesdeptframes.html">Issues</OPTION>
<OPTION value="http://issues-mag.com/technologyframes.html">Technology</OPTION>
<OPTION value="http://issues-mag.com/entertainmentframes.html">Entertainment</OPTION>
<OPTION value="http://issues-mag.com/lifestyleframes.html">Lifestyle</OPTION>

</SELECT>

<p>

<INPUT onclick="top.location.href=document.navform.dropdownmenu.options
[document.navform.dropdownmenu.selectedIndex].value;" type="button" value="Go">

</FORM>

Try out this code with your framed pages and see what different effects you can create by changing the highlighted portion.

Also, when linking in a framed site, it can be difficult to load framesets with the appropriate page in each frame. On the Table of Contents page for this site, we encountered a problem with the links on the sidebar. Usually, the main area is the only part that changes when a link is clicked. We needed to change all three frames in the frameset at once for each link. To combat this, I wrote the following JavaScript code.

The following portion should be between the head tags in your page:

<script language="JavaScript">
function changeurl(header, nav, main)
{
top.header.location.href=header
top.nav.location.href=nav
top.main.location.href=main
}
</script>

Links would look like this:

<a href="javascript:changeurl('technologyheader.html', 'technologynav.html', 'frames.shtml')">

HTML Frames

</a>

When this link is clicked on, it calls the JavaScript function, which changes all 3 frames at once.


Outside Linking

The final problem I have come accross is outside links to direct pages. If I give someone a direct link to a specific article, it will load in the full window, without the header or navigation bar unless I force it to load within the frameset. I accomplished this using a combination of JavaScript and PHP. Thanks to EchoDotCom of EchoDotCom.com for help with this solution.

Here is the code that goes in the page(between the head tags) you want to force into the frameset when a viewer comes to it from an outside link:

maincontent.html

<script language="JavaScript">

URLName = "" + window.location;
lastSlash = URLName.lastIndexOf("/");
URLName = URLName.substr(lastSlash + 1,URLName.length - lastSlash);
if (self.parent.frames.length!=3)
{
window.top.location.replace("frameSetFile.php?filename="+URLName+"")
}
</script>

I would place the above code in this page for example, if you view the source you will see it. This will get the filename of the page the code is in, and pass it to the PHP script frameSetFile.php via the URL.

The above JavaScript calls the PHP script, which loads the frameset with the maincontent.html page in the main frame.

Here is the code for the PHP script file:

frameSetFile.php

<html>
<head>
<title>Issues Magazine</title>
</head>
<frameset rows="112,572*" cols="*">
<frame src="header.html" frameborder="0" scrolling="no">
<frameset cols="21%,*">
<frame src="nav.html" frameborder="0" scrolling="yes">
<frame name="main" src="<?=$filename?>" frameborder="0" scrolling="yes">
</frameset>
</frameset>
<noframes>
Your browser does not support frames, please contact
<a href="mailto:webmaster@issues-mag.com">webmaster</a>.

</noframes>
</html>

The main frame loads the page with the filename passed to it from the JavaScript shown above.

I hope this article has helped you to conquer some of the perils of frames. If you have questions, comments, frames tips, or suggestions about this article, please contact kcasper@issues-mag.com.







The Musician's PlaceTo Shop!
Instant Gift Certificates!














© 2001-2005 Issues Magazine.
All Rights Reserved.
editors@issues-mag.com




Get 15 FREE prints!