// Pop up information box II (Mike McGrath (mike_mcgrath@lineone.net, http://website.lineone.net/~mike_mcgrath))
// Permission granted to Dynamicdrive.com to include script in archive
// For this and 100's more DHTML scripts, visit http://dynamicdrive.com
// script modified by Daniel Hallmark 01/31/02 to support dynamic positioning
// INSTRUCTIONS FOR USE:
//
// Include the following line in the document head
// substituting the correct path for your system.
//
//
// Set the following event handlers in the document body tag
//
//
// Set up the popup layer by declaring a DIV inside the document body
//
//
// For each element that you wish to supply a popup help hint, use the
// OnMouseOver and OnMouseOut event handlers as indicated below:
//
// sample background colors include lightyellow, lightsteelblue, magenta, cyan, etc.
var available_width; // stores the current width of the browser window
var available_height; // stores the current height of the browser window
var Xoffset; // offset used to horizontally position the popup
var Yoffset; // offset used the vertically position the popup
var Xadj=50;
var Yadj=25;
var is = new Is();
var skn; // stores handle to the layer used to display the popup
var ns4;
var ns6;
var ie4;
// determines browser version - this is used by code that
// gets the client drawing area for rendering the popup help
function Is()
{
agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) && ((agent.indexOf('spoofer')== -1) && (agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3));
this.ns3 = (this.ns && (this.major == 3));
this.ns4b = (this.ns && (this.major == 4) && (this.minor <= 4.03));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") == -1));
this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") != -1));
this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.5") != -1));
this.ie6 = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
this.aol = (agent.indexOf("aol") != -1);
this.aol3 = (this.aol && this.ie3);
this.aol4 = (this.aol && this.ie4);
this.aol5 = (this.aol && this.ie5);
}
// gets the client drawing area height and width which is
// later used to dynamically position the popup help layer
function getAvailableSize()
{
if (document.documentElement && document.documentElement.clientWidth)
{
available_width=document.documentElement.clientWidth;
available_height=document.documentElement.clientHeight;
}
else if(is.ns4 || is.ns6 || is.ns)
{
available_width = innerWidth;
available_height = innerHeight;
}
else if(is.ie4 || is.ie5 || is.ie55)
{
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
}
}
// used to update variables when the screen is resized by the user
function winResize()
{
if(is.ns||is.ns4||is.ns6||is.ie4||is.ie5||is.ie55||is.ie6)
{
// history.go(0); // use if you need to force refresh on resize
getAvailableSize();
}
}
// initializes variables/handlers needed to perform the popup
function setupPopup(x,y)
{
if (arguments.length == 2) {
Xadj=x;
Yadj=y;
}
getAvailableSize(); // get window width and height
// setup skn variable to point to the DIV/layer we
// will be using to display the popup messages
ns4=document.layers
ns6=document.getElementById&&!document.all
ie4=document.all
if (ns4)
skn=document.dek;
else if (ns6)
skn=document.getElementById("dek").style;
else if (ie4)
skn=document.all.dek.style;
if (ns4)
document.captureEvents(Event.MOUSEMOVE);
else
{
skn.visibility="visible";
skn.display="none";
}
// assign event handler to track mouse moves and update
// the popup layer's position on the screen
document.onmousemove=get_mouse;
}
// This function tracks the mouse position and updates the location of
// the popup layer. If the mouse is in the upper half of the browser
// window, the popup will appear below the mouse position. If the mouse
// is in the lower half of the browser window, the popup will appear
// above the mouse positions. Ditto for left vs. right half. We do
// some special processing to make sure the popup is never pushed off
// to the left or right of the window (unless the window is smaller
// than the popup size), but it is possible for the popup to run off
// the top or bottom of the window depending on the location of the
// link on the page and the length of the message text.
function get_mouse(e)
{
// function updated by Daniel Hallmark 01/31/02
if (document.documentElement && document.documentElement.clientWidth) {
mouse_x = event.x+document.documentElement.scrollLeft;
} else {
mouse_x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
}
// +50 pushes the layer to the right if mouse is in left half of screen
// and -375 pushes the layer to the left if the mouse is in the right half
Xoffset=mouse_xavailable_width?(((available_width-300)<0)?0:available_width-300):(((mouse_x+Xoffset)<0)?0:mouse_x+Xoffset);
if (document.documentElement && document.documentElement.clientWidth) {
mouse_y = event.y+document.documentElement.scrollTop;
} else {
mouse_y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
}
// +25 lowers the layer if mouse is in top half of screen and
// -125 raises the layer if mouse is in the lower half of screen
Yoffset = mouse_y"+hdr+"
"+msg+" | ";
if (ns4) {skn.document.write(content);skn.document.close();skn.visibility="visible";}
if (ns6) {document.getElementById("dek").innerHTML=content;skn.display='';}
if (ie4) {document.all("dek").innerHTML=content;skn.display='';}
}
// "kill" is used as the OnMouseOut event handler and hides the
// popup message when the mouse leaves the HTML element
function kill()
{
if (ns4){skn.visibility="hidden";}
else if (ns6||ie4) {skn.display="none";}
}