Site Development
Downloads
Help!!
Home
Making The Box & LinkYou should already be able to make a <div> box. If not, review Advanced CSS until you can make, style, and position one. If you are already familiar with <div> boxes, you'll be surprised at how easy pop up menus and boxes are to make. Here's a simple example. All you do is make a box, set its visibility to "hidden", and use JavaScript to switch the box between "visible" and "hidden" visibility property values. Lets begin by making a simple page with the following in the <body>:
<a href="javascript://" onMouseOver="show_it()" onMouseOut="hide_it()"> We'll be coding the functions "show_it()" and "hide_it()" to manipulate our box in a minute. The <div> ID'd as "box1" will be the pop up box. For most pop up applications, you'll be giving <div> boxes individual, unique IDs. Styling The BoxYou can style the box and contents any way you like. Two important things to include in the box styling are its position and visibility:
#box1 { You will be using "position: absolute" for most of the pop up boxes you code. This means you'll need to position the box with "top:" and "left:". A good method for making these pop up boxes is to make and style the box and its contents first. Next, position the box. Finally, set the visibility to "hidden" to make the box invisible. Now lets pop it up by making it visible again. You may find it easier to begin styling the box by first styling its look: borders, background. Then position it, and finally set "visibility: hidden" to hide the box. document.allYou can access CSS styling and positioning properties and values with JavaScript. For Internet Explorer these properties can be assigned using the "document.all" object. The "document.all" object contains all styled objects, including <div>s coded with an ID. What we want to do is to access a <div>s "visibility" property. Below is the specific reference we'll use in our current example: document.all.box1.style.visibility = "visible"; The above line of JavaScript would make our box appear, or pop up. In other words, it dynamically changes the "visibility:" property to a value of "visible". Here's the generic form for accessing and changing CSS properties in Internet Explorer: document.all.element_id.style.property = new property value You can use JavaScript to change styling by using an element's ID among other identifiers, but ID is the most used in making pop ups because individual boxes are referenced. As we'll see in future lessons, the syntax for the property name changes some between CSS and JavaScript. In the case of "visibility" the property is spelled "visibility" for both CSS and JavaScript. This isn't always the case. For some CSS properties, like "background-image", this is not true. The JavaScript reference for the "background-image" property is "backgroundImage". There is no hyphen and a capital "I". Don't worry about these for now, but keep in mind that there are differences. The values assigned to CSS properties with JavaScript are generally strings that must be placed inside quotes. Popping UpWith the above overview out of the way, we're ready to make our box pop up. Remember that the box should already be invisible because we've set "visibility: hidden" in our CSS styling. In the <head> of the page code the following to create the needed "show_it()" function:
<script language="JavaScript"> The above is all it takes to make our box become visible, or pop up, when the text link is hovered over. Remember that we're coding the effect only for Internet Explorer in this lesson. We'll tweak it for all browsers in the next lesson. DisappearingNow lets make the box disappear when the cursor is moved away from the link. We've already coded an onMouseOut link in our <a> tag, so all we need to do is add the "hide_it()" function to our <script>:
function hide_it(){ This is just like making the box pop up except we change the value to "hidden". The rest of the object reference is the same. It should be since we are referencing the same object and property. We're just changing th value. Summary & ExercisesFollow the four steps below when coding pop up boxes/menus.
Practice making some single pop up boxes and try your hand at coding two boxes on the same page. Try to find ways to let one, single function control both the hiding and showing of multiple boxes. Don't worry if you get stumped, we'll be covering this later.
|
1) Decide what events you will use to show and hide the box. We used onMouseOver and onMouseOut in our example. We'll discuss more about this later, but it's an important first step so you'll know what tags to code the events in. Almost all pop up boxes are triggered by an event coded in an <a> tag.
To Next Beginning JavaScript Lesson
Back To Beginning JavaScript Index