Pop-out Elements: Creating the Elements - Doc JavaScript | WebReference

Pop-out Elements: Creating the Elements - Doc JavaScript


Creating the Elements

The script can be placed anywhere in the document. We'll put it at the end, just before </BODY>, so it loads last. The following HTML code must be embedded before the script:

<SPAN ID="test" STYLE="position: absolute;"></SPAN>

We'll use this element to check if style sheets are enabled, because Navigator 4.0x allows the user to disable them. The element's position is set to absolute, because Navigator 4.0x only reflects positioned elements in JavaScript.

Since all our code uses JavaScript1.2 as the LANGUAGE attribute, the statements are only executed by DHTML browsers (4.0x and above). The following HTML outlines the implementation of the script:

<SPAN ID="test" STYLE="position: absolute;"></SPAN>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
// the script
// -->
</SCRIPT>

Our script utilizes fouth-generation features, so we must first define the standard browser-detection variables:

var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;

NS4 is true if the browser supports the document.layers object. In other words, it is true for Navigator 4.0x. The second variable, IE4, is true if the browser supports the document.all object. That is, it is true for Internet Explorer 4.0x.

The script defines and additional variable that holds the depth (zIndex) of the topmost pop-out element:

var maxZ = 1;

When an element pops out, we assign it the maximum zIndex value so it appears on top of all other open elements. The maxZ variable reflects the maximum z coordinate. It is incremented when the user opens an element (by clicking its tab).

We'll keep the code organized by defining each pop-out element as a distinct object, with various properties and methods to control it. The following function constructs a pop-out element:

function popout(id, posY, width) {
  this.id = id; // the element's name (and the variable's name)
  this.posY = posY; // the element's top property
  this.width = width; // the element's width
  this.show = false; // do not show the element
  this.makeImage = makeImage; // constructs the image's tab
  this.makeElement = makeElement; // constructs the content box
  this.showElement = showElement; // sets the element's visibility
}

A pop-out element is defined as an instance of the popout object:

var variableName = new popout("variableName",
                              topDistance,
                              elementWidth);

Note that the name of the variable must be the same as the string passed to the function. For example:

var myEl = new popout("myEl", 500, 150);

Back to the general definition. The new instance variableName features the following properties and methods:

Notice that the constructor function, popout(), must define the methods as function references. Therefore, the method names are not followed by a set of parentheses. It is very important to understand the difference between a function call and a function reference. A function call simply invokes a given function, whereas a function reference is actually an object representing the function. The following script demonstrates the difference:

function displayAlert() {
  alert("This is a function.");
}
displayAlert(); // a function call
var equivFunction = displayAlert; // a function reference
equivFunction(); // a function call

A function reference is just like any other object. In this example, displayAlert (not displayAlert()) is a reference of the function, so it can be assigned to a variable. That variable then refers to the function, so it can be invoked just like the original function.

https://www.internet.com


Created: February 24, 1998
Revised: February 24, 1998

URL: https://www.webreference.com/js/column14/create.html