Pop-out Elements: The Properties - Doc JavaScript

The Properties

As explained in the previous page, an instance of the popout object features several properties and methods. In this section we'll discuss the properties:

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
}

The popout() function assigns its first parameter, id, to a property named id. The constructor function uses this to reference the new instance. This string property reflects the name of the variable that defines the specific pop-out element. The script dynamically prints out HTML code (including JavaScript statements) with document.write(), so it must "know" the name of the variable. The id property is also used for the corresponding DIV element's ID attribute.

The posY property is also assigned one of the function's parameters -- posY. It defines the new pop-out element's distance, in pixels, from the top of the page. The script uses this value for the element's top CSS property.

The width property specifies the width of the element's box. The width does not account for the element's tab, but it includes the border of the box.

Unlike the other properties, show is assigned a constant value -- false. This propery defines the pop-out element's visibility state. In other words, when it is true, the element is expanded, while false indicates that only the tab is visible.

In our example the popout() function is invoked twice to construct two pop-out elements:

menu1 = new popout('menu1', 300, 90);
menu2 = new popout('menu2', 440, 200);

These statements are located in the script's init() function, which we'll discuss later. Here's a rundown of the properties that are defined by these statements:

• menu1.id -- "menu1"
• menu1.posY -- 300
• menu1.width -- 90
• menu2.id -- "menu2"
• menu2.posY -- 440
• menu2.width -- 200

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

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