/***************************** How to use this Popup? IMPORTANT : DO NOT call this script inside html
tag. This script writes some divs to the page, so should be used in html header of the page Call it anywhere after the tag or any web user control IMPORTANT: Please note accessibility features mentioned below and strictly follow them. STEP 1: Decide if your popup content is in a DIV on the same page or in an URL. STEP 2: Import these javascipt files and this stylesheet STEP 3: If content is in DIV: Show popup info from DIV Example content div: Accessibility Feature: USE the style for content div EXACTLY like below. It will let the screen readers read the content. Accessibility Feature: PLACE this div right below the link that invokes it
Test popup info...
1st parameter - id of the div that contains text to show inside bubble 2nd parameter - xOffset - you can further offset X coordinate of the popup 3rd parameter - yOffset - you can further offset Y coordinate of the popup If Content is in URL: Accessibility feature: URL must be given in HREF attribute Accessibility feature: TITLE attribute must be given relavant description Show popup info from URL 1st parameter - ALWAYS pass 'this', URL is extracted from anchor's properties 2nd parameter - xOffset - you can further offset X coordinate of the popup 3rd parameter - yOffset - you can further offset Y coordinate of the popup "return false;" must be used in onclick event ********************************/ document.write(''); //This dummy iframe prevents IE6 to show slect boxes through the popup div document.write(''); function ShowPopupDiv(idOfContentDiv, xOffset, yOffset) { ShowPopup(idOfContentDiv, xOffset, yOffset, "FALSE"); } function ShowPopupDiv2(idOfContentDiv, anchorItem, xOffset, yOffset) { var posofAnchorItem = GetObjectPosition(anchorItem); ShowPopup(idOfContentDiv, xOffset , posofAnchorItem.y + yOffset - 250, "FALSE"); } function ShowPopupURL(anchorItem, xOffset, yOffset) { var url = anchorItem.href; ShowPopup(url, xOffset, yOffset, "TRUE", "FALSE"); } function ShowPopupURL2(anchorItem, xOffset, yOffset) { var url = anchorItem.href; var posofAnchorItem = GetObjectPosition(anchorItem); ShowPopup(url, xOffset, posofAnchorItem.y + yOffset, "TRUE", "FALSE"); } function ShowPopupURLHideTopCloseButton(anchorItem, xOffset, yOffset) { var url = anchorItem.href; ShowPopup(url, xOffset, yOffset, "TRUE", "TRUE"); } function ShowPopup(divIdORUrlOfContent, xOffset, yOffset, isURL, hideUpperCloseButton) { var popupDiv; var posXofPopup; var posYofPopup; if (isNaN(xOffset)){ xOffset = 0;} if (isNaN(yOffset)){ yOffset = 0;} posXofPopup = 250 + xOffset; posYofPopup = 250 + yOffset; document.getElementById("_popupDivContent").innerHTML = GetSpinWheel(); if (isURL == "TRUE") { LoadUrl(divIdORUrlOfContent, "_popupDivContent"); } else { document.getElementById("_popupDivContent").innerHTML = document.getElementById(divIdORUrlOfContent).innerHTML; } if (hideUpperCloseButton == "TRUE") { document.getElementById("_upperCloseButton").style.visibility = "hidden"; } popupDiv = document.getElementById("_popupBoxHolder"); popupDiv.style.top = posYofPopup + "px"; popupDiv.style.left = posXofPopup + "px"; popupDiv.style.zIndex = 1200; popupDiv.style.display = "block"; var dummyIframe; if (!window.XMLHttpRequest) { dummyIframe = document.getElementById("_dummyIframeForPopup"); dummyIframe.style.width = popupDiv.offsetWidth; dummyIframe.width = popupDiv.offsetWidth; dummyIframe.style.height = popupDiv.offsetHeight; dummyIframe.height = popupDiv.offsetHeight; dummyIframe.style.top = posYofPopup + "px"; dummyIframe.style.left = posXofPopup + "px"; dummyIframe.style.zIndex = popupDiv.style.zIndex - 1; dummyIframe.style.display = "block"; } } /*To avaoid IE6 see through*/ function SetDummyIFrameHeight() { if (!window.XMLHttpRequest) { var dummyIframe = document.getElementById("_dummyIframeForPopup"); var popupDiv = document.getElementById("_popupBoxHolder"); if (dummyIframe != null && popupDiv != null){ dummyIframe.style.height = popupDiv.offsetHeight;} } } function HidePopup() { var popupDiv = document.getElementById("_popupBoxHolder"); if (popupDiv != null){ popupDiv.style.display = "none";} HideDummyIframe(); } function HideDummyIframe() { if (!window.XMLHttpRequest) { var dummyIframe = document.getElementById("_dummyIframeForPopup"); if(dummyIframe != null){ dummyIframe.style.display = "none";} } } function GetSpinWheel() { var spinWheel; spinWheel = '
'; return spinWheel; } function AnimateOpacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { setTimeout("ChangeOpacity(" + i + ",'" + id + "')",(timer * speed)); timer++; } } else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { setTimeout("ChangeOpacity(" + i + ",'" + id + "')",(timer * speed)); timer++; } } } //change the opacity for different browsers function ChangeOpacity(opacity, id) { var object = document.getElementById(id); object.style.opacity = (opacity / 100); object.style.MozOpacity = (opacity / 100); object.style.KhtmlOpacity = (opacity / 100); object.style.filter = "alpha(opacity=" + opacity + ")"; object.style.zoom = "1"; } function FetchUrl(url, targetDivId) { document.getElementById(targetDivId).innerHTML = GetSpinWheel(); if (window.XMLHttpRequest) { req = new XMLHttpRequest();} else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP");} if (req != undefined) { req.onreadystatechange = function() {FetchUrlDone(url, targetDivId);}; req.open("GET", url, true); req.send(""); } } function FetchUrlDone(url, targetDivId) { if (req.readyState == 4) // only if req is "loaded" { if (req.status == 200) // only if "OK" { document.getElementById(targetDivId).innerHTML = req.responseText; } else { document.getElementById(targetDivId).innerHTML="


Requested information not found at following location :

" + url + "


"; //"
" + req.status + "
" + req.statusText; } SetDummyIFrameHeight(); } } function LoadUrl(url, targetDivId) { FetchUrl(url,targetDivId); return false; }