Programming Popout Elements

We explained the popout elements in Column 14, Pop-out Elements. The function init() creates the two tabs you see at the left bottom corner (images), as well as the two boxes that open when you click the tabs. The function makeImage() creates the tabs, while the function makeElement() creates the menu boxes. The function popout() constructs two objects, one for each of the tab/box combination. The function showElement() handles the tab/box modifications upon clicking the tab. It makes the box visible and moves the tab to its right edge. It is this function that we took advantage of DOCJSLIB 3.1 in writing:

function showElement() {
  this.show = !this.show;
  var pos = (this.show) ? this.width : 0;
  var str = (this.show) ? 'show' : 'hide';
  myBrowserAPIObj.setPosFromLeft(this.id + 'img', pos);
  maxZ++;
  myBrowserAPIObj.setZposition(this.id + 'img', maxZ);
  myBrowserAPIObj.setZposition(this.id + 'box', maxZ);
  myBrowserAPIObj.setVisibility(this.id + 'box', this.show);
}

Notice that this code is slightly different from our previous versions. DOCJSLIB 3.0 created the derived ids (like id + "img" and id + "box") by itself. In this version, we do all preprocessing before calling DOCJSLIB 3.1's functions, so the library is more generic, and is not restricted to some conventions made elsewhere.

Also worth noting is the fact that each tab/box combination is a popout object. The following object constructor defines the object's properties and methods:

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
}

Next: use DOCJSLIB 3.1 in programming page watermarks