Introducing DOCJSLIB Version 2.0: Pop-out Elements - Doc JavaScript | WebReference

Introducing DOCJSLIB Version 2.0: Pop-out Elements - Doc JavaScript


The Pop-out Elements Code

<HTML>
<HEAD>
<TITLE>DOCJSLIB Version 2.0: Pop-out Elements - Doc JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
// Copyright (c) 2000 internet.com Corp.
// http://www.webreference.com/js/
// License is granted if and only if this entire
// copyright notice is included. By Yehuda Shiran.
// Begin DOCJSLIB version 2.0. Released Oct 26, 1998.
// This is DOCJSLIB library.
// It begins in this comment and continues until the matching comment
// The matching comment is "End DOCJSLIB ...".
// It should not be normally touched.
// docjslib is a cross-browser library.
// You should not worry about the browser in your code.
// This version includes the following functions (numbers to the
//      left designate version of DOCJSLIB where first introduced:
//   1.0 getSrc (gets the image's URL of a DHTML element, url)
//   1.0 setSrc (sets the image's URL of a DHTML element)
//   2.0 getWidth (gets the DHTML element's width, pixels)
//   2.0 getVisibility (gets the DHTML element's visibility, true or false)
//   2.0 setVisibility (sets the DHTML element's visibility, true or false)
//   2.0 setPosFromLeft (sets the DHTML element's horiz. position, pixels
//       from left)
//   2.0 setZposition (set the Z position of the DHTML element, integer)
//   1.0 makeImage (creates an image-based DHTML element)
//   2.0 makeBox (creates a DHTML container)
//
var IE4 = (document.all) ? true : false;
var NS4 = (document.layers) ? true : false;
function getSrc(id) {
  if (NS4) {return eval("document." + id + ".document." + id + "img.src")}
  else {return eval("document.all." + id + "img.src")}
}
function setSrc(id, url) {
  if (NS4) {eval("document." + id + ".document." + id + "img").src = url}
  else {eval("document.all." + id + "img").src = url}
}
function getWidth(id) {
  if (NS4) {return eval("document." + id + ".clip.width")}
  else {return eval("document.all." + id + ".style.pixelWidth")}
}
function getVisibility(id) {
  if (NS4) {
    if (eval("document." + id).visibility == "show") return true
    else return false;
  }
  else {
   if (eval("document.all." + id).style.visibility == "visible") return true
    else return false;
  }
}
function setVisibility(id, flag) {
  if (NS4) {
    var str = (flag) ? 'show' : 'hide';
    eval("document." + id).visibility = str;
  }
  else {
    var str = (flag) ? 'visible' : 'hidden';
    eval("document.all." + id).style.visibility = str;
  }
}
function setPosFromLeft(id, xCoord) {
  if (NS4) {eval("document." + id).left = xCoord}
  else {eval("document.all." + id).style.left = xCoord}
}
function setZposition(id, z) {
  if (NS4) {eval("document." + id).zIndex = z}
  else {eval("document.all." + id).style.zIndex = z}
}
function makeImage(imgID,          // given id
                   imgURL,         // image URL
                   imgHeight,      // image height
                   imgWidth,       // image width
                   imgAlt,         // alternative image
                   posFromLeft,    // absolute position from left of window
                   posFromTop,     // absolute position from top of window
                   clickParam1,    // parameter passed to "onclick" handler
                   clickParam2)    // parameter passed to "onclick" handler
  {
  document.write(
    '<STYLE TYPE="text/css">',
    '#', imgID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, ';',
      'top: ', posFromTop, ';',
      'width: ', imgWidth, ';',
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', imgID, '">',
    '<A HREF="javascript:', "handleImageClick('", imgID, "'", ',', clickParam1,
    ',', clickParam2, ')">',
    '<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="', imgURL, '" ALT="',
    imgAlt, '" BORDER="0" ', 'HEIGHT="', imgHeight, '" WIDTH="', imgWidth,
    '">', '</A></DIV>'
  );
}
function makeBox(boxID,                // given id
                 htmlFiller,           // HTML filler
                 boxWidth,             // box width
                 posFromLeft,          // absolute position from left of window
                 posFromTop,           // absolute position from top of window
                 boxBg,                // box background color
                 boxColor,             // html filler text color
                 boxVisibility)        // visibility
 {
  var padding = (NS4) ? '' : 'padding: 3 0 3 3;';
  var visibility = (boxVisibility) ? 'visible' : 'hidden';
  document.write(
    '<STYLE TYPE="text/css">',
    '#', boxID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, '; top: ', posFromTop, ';',
      'width: ', boxWidth, ';',
      'layer-background-color: ', boxBg, ';',
      'background-color: ', boxBg, ';',
      'visibility: ', visibility, ';',
      'border-width: 2;',
      'border-style: solid;',
      'border-color: ', boxColor, ';',
      padding,
      'z-index: 1',
    '}',
    '</STYLE>',
    '<DIV ID="', boxID, '">',
    htmlFiller,
    '</DIV>'
  );
}
//
// End DOCJSLIB Version 2.0
//
function handleImageClick(id, clickParam1, clickParam2) {
  var imgBoxID = id + "Box";      // derive box id
  var visibility = getVisibility(imgBoxID);      // check box visibility
  visibility = !visibility;                      // alternate visibility
  var elementWidth = getWidth(imgBoxID);         // get box width
  var distanceFromLeft=(visibility) ? elementWidth : 0; // set image position
  setPosFromLeft(id, distanceFromLeft);          // move image
  setVisibility(imgBoxID, visibility);           // set box visibility
  maxZ++;                                        // last one always on top
  setZposition(id,  maxZ);                       // set imgage Z
  setZposition(imgBoxID, maxZ);                  // set box Z
}
function main() {
  makeImage("columns",             // given id
            "columns.gif",	        // image URL
            130, 				   // image height
            18,                    // image width
            "JavaScript Columns",  // alternative image
            0,                     // absolute position from left of window
            200,                   // absolute position from top of window
            0,                     // parameter passed to "onclick" handler
            0);                    // parameter passed to "onclick" handler
  makeBox("columnsBox",            // given id
          '<A HREF="/js/column1/">Column 1</A><BR>' +     // HTML filler
          '<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>',
          90,                      // box width
          0,                       // absolute position from left of window
          200,                     // absolute position from top of window
          'beige',                 // box background color
          '#0000cc',               // html filler text color
          false);                  // visibility
 makeImage("examples",             // given id
            "examples.gif",	        // image URL
            130, 				   // image height
            18,                    // image width
            "JavaScript Examples",  // alternative image
            0,                     // absolute position from left of window
            340,                   // absolute position from top of window
            0,                     // parameter passed to "onclick" handler
            0);                    // parameter passed to "onclick" handler
 makeBox("examplesBox",            // given ID
          '<IMG SRC="docjx.gif" WIDTH="55" ' +     // HTML filler
          '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>',
          200,                     // box width
          0,                       // absolute position from left of window
          340,                     // absolute position from top of window
          'beige',                 // box background color
          '#0000cc',               // html filler text color
          false);                  // visibility
}
var maxZ = 1;
main();
// -->
</SCRIPT>
</BODY>
</HTML>

http://www.internet.com


Created: October 26, 1998
Revised: October 26, 1998

URL: http://www.webreference.com/js/column28/code2.html