Pop-out Elements: Positioning an Element's Box - Doc JavaScript

Positioning an Element's Box

As you already know, a pop-out element is composed of a tab and a box. The tab is merely an image, while the box contains the pop-out element's content. The makeElement() method prints the HTML code for the box:

function makeElement(boxBg, boxColor, boxCode) {
  var padding = (NS4) ? '' : 'padding: 3 0 3 3;';
  document.write(
    '<STYLE TYPE="text/css">',
    '#', this.id, 'box {',
      'position: absolute;',
      'left: 0; top: ', this.posY, ';',
      'width: ', this.width, ';',
      'layer-background-color: ', boxBg, ';',
      'background-color: ', boxBg, ';',
      'visibility: hidden;',
      'border-width: 2;',
      'border-style: solid;',
      'border-color: ', boxColor, ';',
      padding,
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', this.id, 'box">',
    boxCode,
    '</DIV>'
  );
}

In order to understand this method, you must first know the basic concepts of a pop-out element. The following diagram illustrates the initial position of the element's tab and box:

When the user clicks the element's tab, the box becomes visible, and the tab moves to the right:

When the page loads, the element's box is hidden. Therefore, the visibility property is set to hidden. The box is initially placed in its final position. So when the user clicks the tab, we just have to make the box visible. Let's see how the makeElement() method is invoked:

menu1 = new popout('menu1', 300, 90); // a global variable
menu1.makeElement('beige', '#0000cc',
  '<A HREF="/js/column1/">Column 1</A><BR>' +
  '<A HREF="/js/column2/">Column 2</A><BR>' +
  '<A HREF="/js/column3/">Column 3</A><BR>' +
  '<A HREF="/js/column4/">Column 4</A><BR>' +
  '<A HREF="/js/column5/">Column 5</A><BR>' +
  '<A HREF="/js/column6/">Column 6</A><BR>' +
  '<A HREF="/js/column7/">Column 7</A><BR>' +
  '<A HREF="/js/column8/">Column 8</A><BR>' +
  '<A HREF="/js/column9/">Column 9</A><BR>' +
  '<A HREF="/js/column10/">Column 10</A><BR>' +
  '<A HREF="/js/column11/">Column 11</A><BR>' +
  '<A HREF="/js/column12/">Column 12</A><BR>' +
  '<A HREF="/js/column13/">Column 13</A>'
);
menu2 = new popout('menu2', 440, 200); // a global variable
menu2.makeElement('beige', '#0000cc',
  '<IMG SRC="/js/pharmacy/docjx.gif" WIDTH="55" ' +
  'HEIGHT="60" HSPACE="2" ALIGN="right">' +
  '<A HREF="/js/pharmacy/menu.html">A Popup Menu</A><BR>' +
  '<A HREF="/js/pharmacy/date.html">A Text Date</A><BR>' +
  '<A HREF="/js/pharmacy/form.html">A Feedback Form</A><BR>' +
  '<A HREF="/js/pharmacy/tbanner.html">A T-banner</A><BR>' +
  '<A HREF="/js/pharmacy/counter.html">A Personal Counter</A><BR>' +
  '<A HREF="/js/pharmacy/password.html">A Password Protector</A><BR>' +
  '<A HREF="/js/pharmacy/frames.html">A Frames Destroyer</A><BR>' +
  '<A HREF="/js/pharmacy/countdown.html">A Date Countdown</A>'
);

The method's first argument defines the element's background color. The element cannot be transparent; it must have a solid background, which can be any color, including white. In our example the background color of both elements is beige, because the method's first argument is "beige". The second argument sets the color of the border. In our example we use a hexadecimal triplet to define the blue border, "#0000cc". Note that color names and hexadecimal triplets are both valid for any color definition. Also note that single-quotes and double-quotes have the same functionality.

An element's tab and box have the same top property (this.posY) so their top edges are aligned. In other words, they are both placed this.posY (one of the object's properties) pixels from the top of the page. This value does not change throughout the execution of the script, because the vertical position of the element remains the same.

Notice that only Internet Explorer 4.0x pads the sides of the box. The following statement is responsible for the padding:

var padding = (NS4) ? '' : 'padding: 3 0 3 3;';

The CSS property padding enables you to set the following properties with a single definition: padding-top, padding-right, padding-bottom, padding-left. If four values are specified they apply to the top, right, bottom, and left respectively. If there is only one value, it applies to all sides. If there are two or three, the missing values are taken from the opposite side. By default, the padding value for all sides is 0, so the elemenet's content actually "touches" its border. However, this is only true for Internet Explorer 4.0x. In Navigator 4.0x the box is padded by default, so we only need to provide the padding property for Internet Explorer 4.0x. If you specify the padding property for Navigator 4.0x, it should set padding-bottom (padding's third argument) to 0. Otherwise the element's border is not aligned with its background color and actual bounding region. Notice that padding-right (padding's second argument) is set to 0 for Internet Explorer 4.0x.

The CSS property layer-background-color is a Netscape proprietary CSS property. It avoids the documented bug with background color inheritance when the background-color property is used. Internet Explorer 4.0x will ignore it.

The z-index of the box is set to 1, so it is placed above the web page. In other words, when you expand the pop-out element, the element's box covers the page's inline elements. The z-index property is very important in our script, because it ensures that the topmost element is the one that was most recently expanded. We'll show you how this is done in the next section of the column.

As you can see, the pop-out element's box is defined with a <DIV> tag. The value of its ID attribute is the name of the pop-out element (this.id) followed by the substring "box."

The third argument of the makeElement() method is the HTML code for the content of the box. In our example the makeElement() method is inovoked twice. For the first pop-out element, it prints the following code (we added the carriage returns and indentation for clarity):

<STYLE TYPE="text/css">
#menu1box {
  position: absolute;
  left: 0; top: 300;
  width: 90;
  layer-background-color: beige;
  background-color: beige;
  visibility: hidden;
  border-width: 2;
  border-style: solid;
  border-color: #0000cc;
  z-index: 1
}
</STYLE>
<DIV ID="menu1box">
<A HREF="/js/column1/">Column 1</A><BR>
<A HREF="/js/column2/">Column 2</A><BR>
<A HREF="/js/column3/">Column 3</A><BR>
<A HREF="/js/column4/">Column 4</A><BR>
<A HREF="/js/column5/">Column 5</A><BR>
<A HREF="/js/column6/">Column 6</A><BR>
<A HREF="/js/column7/">Column 7</A><BR>
<A HREF="/js/column8/">Column 8</A><BR>
<A HREF="/js/column9/">Column 9</A><BR>
<A HREF="/js/column10/">Column 10</A><BR>
<A HREF="/js/column11/">Column 11</A><BR>
<A HREF="/js/column12/">Column 12</A><BR>
<A HREF="/js/column13/">Column 13</A>
</DIV>

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

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