/************************************************************************** * File : popup.js * * Author : Richard Coleman * * Date : 14 February 2005 * **************************************************************************/ /************************************************************************** * Version Inits Date Comments * * ======== ======= =========== ========================================= * * 1.0 RAC 14/02/2005 Creation * * 1.1 RAC 08/02/2006 New functions createNodesFromText() and * * convertLinkBreaks() added for use by the * * showToolTip() function. * * * **************************************************************************/ /************************************************************************** * This file provides the basic functionality to allow an information popup * to be displayed to the user in both IE and Firefox (the only issue with * Firefox is the layer disappearing when the mouse is moved). * * Ensure that the style sheet for the page contains the following entry * with these basic properties specified: * * .popup { * position:absolute; * width: 150px; * font-size: 80%; * background: #F5FFFA; * border: 1px solid #004180; * padding: 2px 2px 2px 2px; * overflow: auto; * visibility: hidden; * z-index: 99; * } * * Generally, it is only necessary to define a single layer using the

* tags. This should be done at the start of the page, just after the * definition, i.e. * * * * Note that no content has been defined as this is going to be added when * the user selects an option. * * In order to see the information popup, it needs to be triggered by calling * the showToolTip() function via a browser window event. The most appropriate * is the onClick event as it gives the user the choice to display the information, * however, it could just as easily be added to the onMouseOver or onMouseDown event. * See the documentation of this function for its usage. **************************************************************************/ // Global variable for keeping track of layer data var popupNode; /** * The function to call in order to display the specified information. In order * for this function to work, a

tag and associated style class must have * been defined (see notes above). * * Uses the DOM to add and remove textual information from the specified

* tag layer. Currently works in IE6 and Firefox 1.0. * * Parameters * ========== * * eleID the string id of the layer to display * wpx the number of pixels wide the displayed box should be * hdr the header for the popup * txt the text to display in the box - to start data on a new line * insert the tilda symbol '~' which is used as a delimiter * myEvent the triggering event - pass in the 'event' variable * offsetX the number of pixels away from the mouse position to place the left edge of the layer * offsetY the number of pixels away from the mouse position to place the top edge of the layer * * Example * ======= * * showToolTip('infobox', 150, 'Sample popup', 'Some information~across several~lines~~and a one line gap', event) */ var isIE = document.all ? true : false; function defaultToolTip(txt, myEvent, offsetX, offsetY){ showToolTip('infoPopup', 100, 'Info:', txt, myEvent, offsetX, offsetY); } function showToolTip(layerID, wpx, hdr, txt, event, offsetX, offsetY){ var ele = findObject(layerID); if (ele){ ele.innerHTML = "

"; var x = 0; var y = 0; if (document.all){ x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } else { x = event.pageX; y = event.pageY; } if (hdr.length > 0){ ele.innerHTML += "

" + hdr + "

"; } if (txt.length > 0){ ele.innerHTML += "

" + handleDelimitedText(txt, "~") + "

"; } ele.style.width = wpx + "px"; ele.style.visibility = "visible"; ele.style.display = "block"; ele.style.left = (x < 1 ? 0 : (offsetX ? x + offsetX : x-10))+"px"; ele.style.top = (y < 1 ? 0 : (offsetY ? y + offsetY : y-10))+"px"; } } function handleDelimitedText(txt, delim){ var txtArr = txt.split(delim ? delim : "~"); var newText = ""; for (i = 0 ; i < txtArr.length ; i++){ newText += txtArr[i]; if (i < txtArr.length - 1){ newText += "
"; } } return newText; } function hideToolTip(layerID){ var ele = findObject(layerID); ele.style.visibility = 'hidden'; ele.style.display = "none"; ele.innerHTML = ""; }