Novell Home

HowTo: Use Javascript and Frames in a Web Site Part 1

Novell Cool Solutions: Feature
By Stomfi

Digg This - Slashdot This

Posted: 2 Aug 2005
 

StomfiLearning to use Linux at Home and Work
Welcome to my ongoing series of HowTo articles designed to help Linux newbies get comfortable with Linux. Before trying any of these HowTos, take a few minutes to study the prerequisites so you can hit the ground running.
--Stomfi

This HowTo shows you a practical example of using Javascript and Frames using the web pages of the previous website example, to navigate via a side bar menu. It also shows you how to create a simple form for emailing a quick inquiry.

Javascript is a language developed by Sun Microsystems and Netscape, and is based on Java. Frames are part of Javascript being an object of the object "document", but can be used independent of it. The object is used mainly to change the content of several frames at the click of the mouse.

If you have upgraded to SUSE 9.3 you can use the "quanta" application to create frames, but it is just as easy to write the HTML script yourself for this simple exercise.

Here is my new website home page which I have called "index.html".

You can see I've created 3 frames, one to hold the navigation menu, one to hold the content header, and one for the content page.

This is the HTML of the index.html page:

<html>

<head>

<title>ROGERS INDUSTRIES</title>

<meta name="GENERATOR" content="Quanta Plus">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<frameset cols="13%,*">

<frame src="rmenu.html" name="RMENU" scrolling="no" marginwidth="2" marginheight="10" noresize>

<frameset rows="5%,*">

<frame src="rhead/RHOME.html" name="RTIT" scrolling="no" marginwidth="5" marginheight="2">

<frame src="rpage/RHOME.html" name="RBODY" scrolling="yes" marginwidth="5" marginheight="10">

</frameset>

</frameset>

</html>

Frameset is the tag that defines a set of frames. The first frameset defines the two vertical frames, with the first being 13% of the page, and the other the balance. The second frameset splits the right frame horizontally into two, with the top frame being 5% of the total space.

The src of the initial frame contents is defined here. The attributes of scrolling and margins are also set here. Only the main content frame is allowed to scroll.

That was pretty easy, wasn't it?

The rmenu.html page resides in the same folder as the index.html page, but all the rest are in sub folders which I have named rhead, rpage, and images. This way I can call the files by the same names for easy identification. Images contains background images.

The rmenu.html file contains the javascript function that activates the frame changes, and each links call the function as it is clicked.

This is the HTML script for the rmenu.html page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">

<title>menu</title>

<meta name="GENERATOR" content="OpenOffice.org 2.0-pre (Linux)">

<meta name="CREATED" content="20050512;21341400">

<meta name="CHANGED" content="20050512;21401200">

<style>

<!--

TD P { color: #000000 }

P { color: #000000 }

A:link { color: #000099 }

A:visited { color: #990099 }

-->

</style>

<script language="JavaScript">

<!--

function changeFrames(file2,file1) {

parent.frames[1].location.href=file1

parent.frames[2].location.href=file2

}

//-->

</script>

</head>

<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"

alink="#000099" dir="ltr" lang="en-US" link="#000099" vlink="#990099">

<br>

<br>

<br>

<p><small>

<strong>-- MENU --</strong>

</small></p>

<small>

<a href="javascript:changeFrames('rpage/RHOME.html','rhead/RHOME.html')">HOME</a>

<br>

<a href="javascript:changeFrames('rpage/ABOUT.html','rhead/ABOUT.html')">ABOUT</a>

<br>

<a href="javascript:changeFrames('rpage/DIECAST.html','rhead/DIECAST.html')"> DIECAST</a>

</small><br>

<div style="margin-left: 10px;"><small><small>

<a href="javascript:changeFrames('rpage/GDC.html','rhead/GDC.html')">GRAVITY </a>

</small></small><br>

<small><small>

<a href="javascript:changeFrames('rpage/LP.html','rhead/LP.html')"> LOW PRESSURE </a>

</small></small><br>

</div>

<small><a href="javascript:changeFrames('rpage/LINISH.html','rhead/LINISH.html')">LINISH</a><br>

<a href="javascript:changeFrames('rpage/MACHINING.html','rhead/MACHINING.html')">CNC</a>

<br>

<a href="javascript:changeFrames('rpage/TOOLMAKING.html','rhead/TOOLMAKING.html')">MAKE DIES.</a><br>

<a href="javascript:changeFrames('rpage/SANDCORES.html','rhead/SANDCORES.html')">SAND CORES</a>

<br>

<a href="javascript:changeFrames('rpage/PLASTICS.html','rhead/PLASTICS.html')">PLASTICS</a><br>

<a href="javascript:changeFrames('rpage/INQUIRIES.html','rhead/INQUIRIES.html')">INQUIRIES</a><br>

</body>

</html>

You can use the mozilla composer or any other HTML page composer to create and save a blank html file which will put all the default tags in place. Then you can edit this file with a text editor if you like and put in the Javascript and menu list.

The JavaScript function "changeFrames" is defined in the "head" section, and used in the "body" section.

Only the content page INQUIRY.html contain a link to another page, the quick inquiry form. I use a special construct to make a new page so that the user may reference the main site while filling in the form.

Here is the page – you can see that the menu is the same, the header and contents have changed:

This is the HTML script for the INQUIRIES.html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta content="text/html; charset=ISO-8859-1"

http-equiv="content-type">

<title></title>

</head>

<body style="background-image: url(../images/Foggy1.jpg);">

<div style="text-align: left;"><br>

<table

style="margin-left: auto; margin-right: auto; text-align: left; width: 459px; height: 96px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td style="background-color: rgb(255, 204, 153);">

<div style="text-align: left;"><big><big>You can email us at:<br>

</big></big></div>

<big><big><br>

admin@rogersindustries.com.au</big></big><br>

<br>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

<div style="text-align: left;"><big> </big></div>

<big> </big>

<table

style="margin-left: auto; margin-right: auto; text-align: left; width: 550px; height: 306px;"

border="1" cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td style="background-color: rgb(255, 255, 153);">

<div style="text-align: left;"><big>Write to us

at:</big><br>

</div>

<big> <br>

Rogers Industries<br>

1284 Lytton Road<br>

Hemmant<br>

4174<br>

Queensland<br>

</big>

<div style="text-align: left;"><big>Australia</big></div>

<big> </big></td>

<td style="background-color: rgb(255, 255, 153);">

<div style="text-align: left;"><big>Phone us at:</big><br>

</div>

<big> <br>

International<br>

061 07 3390 4022<br>

<br>

Local<br>

07 3390 4022</big></td>

</tr>

</tbody>

</table>

<br>

<a href="QUICKI.html" target="_blank" class="header">QUICK INQUIRY FORM</a>

</div>

</body>

</html>

The attributes target="_blank class=" header in the QUICKI.html link will start up a new page.

I shall show you the quick inquiry form in the next article.

My reference book for this knowledge was "Get Going with Javascript" by Martin Baier from http://www.dymocks.com.au/ $AUD12.99, well worth it.


Novell Cool Solutions (corporate web communities) are produced by WebWise Solutions. www.webwiseone.com

© 2014 Novell