Introducing DOCJSLIB Version 3.0: Pop-out Elements - Doc JavaScript
   |
The Pop-out Elements Code
<HTML>
<HEAD>
<TITLE>DOCJSLIB Version 3.0: Pop-out Elements - Doc JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
// --- Cut -- 'N -- Paste --- from Here
// Copyright (c) 2000 internet.com Corp.
// https://www.webreference.com/js/
// License is granted if and only if this entire
// copyright notice is included. By Yehuda Shiran.
// Begin DOCJSLIB version 3.1. Released Novemeber 12, 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:
// 3.1 fix a bug in findHighestZ (change () to [] for documentDivs)
// 3.0 docjslib_doThisCommandEveryIntervalMS (executes a command every
// inteval)
// 3.0 docjslib_getWindowWidth (gets the width of the browser's
// window, in pixels)
// 3. docjslib_getWindowHeight (gets the height of the window,
// in pixels)
// 3.0 docjslib_getPageScrollLeft (gets the width of the scrolled
// area, pixels)
// 3.0 docjslib_getPageScrollTop (get the height of the scrolled
// area, pixels)
// 1.0 docjslib_getSrc (gets the image's URL of a DHTML element, url)
// 1.0 docjslib_setSrc (sets the image's URL of a DHTML element)
// 2.0 docjslib_getWidth (gets the DHTML element's width, pixels)
// 2.0 docjslib_getVisibility (gets the DHTML element's visibility,
// true or false)
// 2.0 docjslib_setVisibility (sets the DHTML element's visibility,
// true or false)
// 2.0 docjslib_setPosFromLeft (sets the DHTML element's horiz.
// position, pixels from left)
// 3.0 docjslib_setPosFromTop (sets the DHTML element's vertical
// position, pixels from TOP)
// 2.0 docjslib_setZposition (set the Z position of the DHTML
// element, integer)
// 3.0 docjslib_findHighestZ (find the highest Z of all pages's
// DHTML elements)
// 1.0 docjslib_makeClickedImage (creates an image-based DHTML
// element with event handling capability)
// 3.0 docjslib_makeLinkedImage (creates an image-based DHTML
// element with a built-in link to a developer-specified location)
// 2.0 docjslib_makeBox (creates a DHTML container)
//
var IE4 = (document.all) ? true : false;
var NS4 = (document.layers) ? true : false;
function docjslib_doThisCommandEveryIntervalMS(command, interval) {
setInterval(eval('"' + command + '"'), interval);
}
function docjslib_getWindowWidth() {
if (NS4) {return window.innerWidth}
else {return document.body.clientWidth}
}
function docjslib_getWindowHeight() {
if (NS4) {return window.innerHeight}
else {return document.body.clientHeight}
}
function docjslib_getPageScrollLeft() {
if (NS4) {return window.pageXOffset}
else {return document.body.scrollLeft}
}
function docjslib_getPageScrollTop() {
if (NS4) {return window.pageYOffset}
else {return document.body.scrollTop}
}
function docjslib_getSrc(id) {
if (NS4) {return eval("document." + id + ".document." + id + "img.src")}
else {return eval("document.all." + id + "img.src")}
}
function docjslib_setSrc(id, url) {
if (NS4) {eval("document." + id + ".document." + id + "img").src = url}
else {eval("document.all." + id + "img").src = url}
}
function docjslib_getWidth(id) {
if (NS4) {return eval("document." + id + ".clip.width")}
else {return eval("document.all." + id + ".style.pixelWidth")}
}
function docjslib_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
// (The above two lines should be joined as one line.
// They have been split for formatting purposes.)
else return false;
}
}
function docjslib_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 docjslib_setPosFromLeft(id, xCoord) {
if (NS4) {eval("document." + id).left = xCoord}
else {eval("document.all." + id).style.left = xCoord}
}
function docjslib_setPosFromTop(id, yCoord) {
if (NS4) {eval("document." + id).top = yCoord}
else {eval("document.all." + id).style.top = yCoord}
}
function docjslib_setZposition(id, z) {
if (NS4) {eval("document." + id).zIndex = z}
else {eval("document.all." + id).style.zIndex = z}
}
function docjslib_findHighestZ() {
var documentDivs = new Array();
if (NS4) {documentDivs = document.layers}
else {documentDivs = document.all.tags("DIV")};
var highestZ = 0;
for (var i = 0; i < documentDivs.length; i++) {
var zIndex = (NS4) ? documentDivs[i].zIndex :
documentDivs[i].style.zIndex;
// (The above two lines should be joined as one line.
// They have been split for formatting purposes.)
highestZ = (zIndex > highestZ) ? zIndex : highestZ;
}
return highestZ;
}
function docjslib_makeClickedImage(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, ',',
// (The above two lines should be joined as one line.
// They have been split for formatting purposes.)
clickParam2, ')">',
'<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="', imgURL,
'" ALT="', imgAlt,
// (The above two lines should be joined as one line.
// They have been split for formatting purposes.)
'" BORDER="0" ', 'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
'</A></DIV>'
);
}
function docjslib_makeLinkedImage(imgID, // given id
imgURL, // image URL
linkURL, // link URL
imgHeight, // image height
imgWidth, // image width
imgAlt, // alternative image
posFromLeft, // absolute position from left of window
posFromTop, // absolute position from top of window
imgVisibility, // image visibility (true of false)
imgZindex) // image Z index
{
var visibility = (imgVisibility) ? 'visible' : 'hidden';
document.write(
'<STYLE TYPE="text/css">',
'#', imgID, ' {',
'position: absolute;',
'visibility: ', visibility, ';',
'left: ', posFromLeft, ';',
'top: ', posFromTop, ';',
'width: ', imgWidth, ';',
'z-index:', imgZindex,
'}',
'</STYLE>',
'<DIV ID="', imgID, '">',
'<A HREF="', linkURL, '">',
'<IMG NAME="', imgID, 'img" ID="', imgID, 'img" SRC="', imgURL,
'" ALT="', imgAlt,
// (The above two lines should be joined as one line.
// They have been split for formatting purposes.)
'" BORDER="0" ', 'HEIGHT="', imgHeight, '" WIDTH="', imgWidth, '">',
'</A></DIV>'
);
}
function docjslib_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
//
// --- Cut -- 'N -- Paste --- Up to Here
function handleImageClick(id, clickParam1, clickParam2) {
var imgBoxID = id + "Box"; // derive box id
var visibility = docjslib_getVisibility(imgBoxID);
// check box visibility
visibility = !visibility;
// alternate visibility
var elementWidth = docjslib_getWidth(imgBoxID);
// get box width
var distanceFromLeft = (visibility) ? elementWidth : 0;
// set image position
docjslib_setPosFromLeft(id, distanceFromLeft);
// move image
docjslib_setVisibility(imgBoxID, visibility);
// set box visibility
maxZ++; // last one always on top
docjslib_setZposition(id, maxZ); // set imgage Z
docjslib_setZposition(imgBoxID, maxZ); // set box Z
}
function main() {
docjslib_makeClickedImage("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
docjslib_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
docjslib_makeClickedImage("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
docjslib_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>
Produced by Yehuda Shiran and Tomer Shiran
Created: November 9, 1998
Revised: November 12, 1998
URL: https://www.webreference.com/js/column29/code2.html
Find a programming school near you