spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column37


JavaScript and Frames, Part II (8)

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


The Frames

We have three level of frames in our script. At the top level, we have a frameset of eight columns:


<FRAMESET COLS="50, 50, 50, 50, 50, 50, 50, 50" FRAMEBORDER="no"
  FRAMESPACING="1">
  <FRAME SRC="column.html" NAME="column0" SCROLLING="no"
    MARGINHEIGHT="1" MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column1" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column2" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column3" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column4" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column5" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column6" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="column.html" NAME="column7" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
</FRAMESET>

Each column frame includes eight box frames:


<FRAMESET rows="50, 50, 50, 50, 50, 50, 50, 50" FRAMEBORDER="no"
  FRAMESPACING="1">
  <FRAME SRC="box.html" NAME="row0" SCROLLING="NO" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row1" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row2" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row3" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row4" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row5" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row6" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
  <FRAME SRC="box.html" NAME="row7" SCROLLING="no" MARGINHEIGHT="1"
    MARGINWIDTH="1">
</FRAMESET>

The box frame includes a single image:

<HTML>
<HEAD>
<TITLE> memory game box </title>
<SCRIPT language="JavaScript">
<!--
function handleClick() {
  top.findClickedBox(self);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
  <A HREF="javascript:void(0)" onClick="handleClick()">
  <IMG SRC="doc50x50.gif" WIDTH="50" HEIGHT="50" BORDER="0"></A>
</BODY>
</HTML>

The image we display by default is doc50x50.gif. We void the link's action because we want to enforce the click action alone. Mouse clicking the box is handled, as explained earlier this column, by the handleClick() function. It calls top.findClickedBox() function from the top level frame with the self object as a parameter. The self object is unique to every frame and is used by the top frame to locate the clicked frame.


http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business


Created: April 5, 1999
Revised: April 5, 1999

URL: http://www.webreference.com/js/column37/frames.html