Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

<Code_Punk>'s

Beginning JavaScript Lesson 21:
Making Multiple Pop Up Boxes

Code Tutorials



Site Development



Downloads



Help!!



Home

The Page Layout

In this lesson we'll be coding this page with multiple pop up boxes. There is only one simple function that manages all of the pop up boxes.

Lets begin making this page by coding the basic HTML layout and then positioning the menus. First come the image links, the national flags, that will provide the Events to trigger the pop ups:

<html>
<head>
<title>Multiple Pop Up Boxes</title>
</head>

<body bgcolor="#aaaaaa">

<a href="javascript://">
<img src="germany.gif" border=0></a><br><br>

<a href="javascript://">
<img src="france.gif" border=0></a><br><br>

<a href="javascript://">
<img src="japan.gif" border=0></a><br><br>

</body>
</html>

Nothing special about the above. It's just three dead image links. The <a> tags are necessary to pick up the JavaScript Events we'll be using in Netscape. Otherwise, we wouldn't need to make them image links. Internet Explorer supports JavaScript Events in the <img> tag itself.

Now lets add the menus to the code:

<html>
<head>
<title>Multiple Pop Up Boxes</title>
</head>

<body bgcolor="#aaaaaa">

<a href="javascript://">
<img src="germany.gif" border=0></a><br><br>

<a href="javascript://">
<img src="france.gif" border=0></a><br><br>

<a href="javascript://">
<img src="japan.gif" border=0></a><br><br>

<div id="germany">
This is Germany's flag. Germany is in Europe.
</div>

<div id="france">
This is France's flag. France is in Europe.
</div>

<div id="japan">
This is the flag of Japan. It is a large island-nation in Asia.
</div>

</body>
</html>

At this point we've just got some dead image links with some text in <divs> that's displayed below them. This is our basic HTML page. Now lets style and position the <div>s with CSS in the <head> of our page:

<style type="text/css">

#germany {
position: absolute;
top: 20px;
left: 100px;
width: 80px;
border: solid 2px #000000;
background-color: #ff9900;
color: #000000;
padding: 5px;
z-index: 2;
visibility: visible;
}

#france{
position: absolute;
top: 120px;
left: 100px;
width: 80px;
border: solid 2px #000000;
background-color: #99ffff;
color: #000000;
padding: 5px;
z-index: 3;
visibility: visible;
}

#japan {
position: absolute;
top: 200px;
left: 100px;
width: 100px;
border: solid 2px #000000;
background-color: #ffffff; color: #000000;
padding: 5px;
z-index: 4;
visibility: visible;
}

You should be able to recognize everything in the above styling. If not, review Advanced CSS.

Two points of interest are the fact that I included "z-index:'s". They're not really needed for this example, but you often find that they are when coding pop up boxes. Get in the habit of using the "z-index:" property.

You'll have to do some fiddling to position the boxes where you want them. It helps to change the visibility of the boxes by using the "hidden" and "visible" properties to preview how the boxes will look when activated. Once all of the boxes are positioned and styled like you want them, change their "visibility:" to "hidden".

You'll note that I've got all of the boxes set to "visible" so I could style and position them. Once you have the boxes styled, set all of the "visible:" properties to "hidden" to hide the boxes.

Determining Events & Parameters

We are now ready to begin coding the JavaScript that will make the boxes appear and disappear. As with most JavaScripts, begin by determining what events you want to trigger a box's appearance and disappearance. I've used "onMouseOver" and "onMouseOut" coded in the image links.

A second consideration, especially because we're going to use only one function to control all of the boxes, is to determine what parameters we'll need to code in the function calls to send to the function. When figuring what parameters are needed, think in terms of what changes, or varies, between the boxes when the function will be run.

There are two things that will change, or be dynamic, when we run the function. The first is which box will pop up or disappear. We'll need to code a parameter telling the function which box (<div> ID) is involved.

The second thing that changes is the "visibility:" of the boxes. That will be our second parameter -- "visible" or "hidden", depending on the need.

Having the events and parameters determined, we can code the events in the <a> tags:

<html>
<head>
<title>Multiple Pop Up Boxes</title>
</head>

<body bgcolor="#aaaaaa">

<a href="javascript://" onMouseOver="box('germany','visible')" onMouseOut="box('germany','hidden')">
<img src="germany.gif" border=0></a><br><br>

<a href="javascript://" onMouseOver="box('france','visible')" onMouseOut="box('france','hidden')">
<img src="france.gif" border=0></a><br><br>

<a href="javascript://" onMouseOver="box('japan','visible')" onMouseOut="box('japan','hidden')">
<img src="japan.gif" border=0></a><br><br>

<div id="germany">
This is Germany's flag. Germany is in Europe.
</div>

<div id="france">
This is France's flag. France is in Europe.
</div>

<div id="japan">
This is the flag of Japan. It is a large island-nation in Asia.
</div>

</body>
</html>

You'll notice that I called the function (yet to be coded) "box". I've added two parameters. The first refers to the specific box's ID and the second refers to the value I want set for the "visibility:" property.

Well, the hard work is done. Lets see how really small and simple the function is that will control the boxes.

Coding The Function

Now lets get our menus to pop up and disappear. First, lets code the basic function with receiving parameters. In the <head> of the page:

<script language="JavaScript">

function box (boxname,menustate){

object detection will come next

}

</script>

Note the receiving parameters I used. The "boxname" parameter will receive the box's ID and "menustate" will receive the parameter telling whether the box should be "visible" or "hidden".

Now lets code in the detection and code for Internet Explorer.

<script language="JavaScript">

function box (boxname,menustate){

if (document.getElementById)
{document.getElementById(boxname).style.visibility = menustate;}

else {document[boxname].visibility = menustate} }

</script>

The biggest thing to notice here is that there are no quotes when using "boxname" in either reference to it. This is because it is a variable/parameter name, not an actual ID. Actual, literal IDs are placed in quotes.

Variable and receiving parameter names are not placed in quotes.

Summary & Exercises

When coding pop up boxes and menus, follow the general development outline used above.

1) Code the basic HTML page without the <div>s and tweak the basic layout.

2) Code in the <div>s at the bottom of the code. Don't worry about positioning or anything. Worry about giving each <div> a unique ID and appropriate content.

3) Style the <div>'s appearance and dimensions. It helps to go about this by styling one box at a time. Get it just right and set its "visibility:" to "hidden". Now style the next box. Note that most sets of boxes have similiar characteristics and copy and paste can be used to offer a framework for the next boxe.

4) Position the <div>s. This might mean toggling their "visibility:" on and off.

5) Code the events used in opening/closing the boxes as needed. Figure out your function name and parameters beforehand so you can code the function calls.

6) Code and debug the function that makes the boxes/menus pop up and disappear.

Make some links and simple <div> boxes and code multiple pop ups from scratch at least three times. Now try to make a page with at least five pop up boxes and only one function to manage them all.

Next, try to make a horizontal nav bar with menus that pop down from the links. You'll find the positioning of the boxes much more challenging, especially at different resolutions. Don't worry, we'll be covering a lot more about this later.



To Next Beginning JavaScript Lesson

Back To Beginning JavaScript Index