/* * vicidDialog.js * * Part of the vicidDialog project: * vicidDialog.css - styles * vicidDialog.js - javascript * vicidDialog.php - html and server-side functions * * See: vicidDialog.php for usage information * * This should be included between and using the following line: * * */ // global ids (these must match ids in vicidDialog.php) // note: these elements do not exist yet, because this JS is called // before they are even written to the page. var sDialogBackgroundId = "dialogBackground"; var sDialogForegroundId = "dialogForeground"; var sDialogBodyTextId = "dialogBodyText"; var sDialogButton1Id = "dialogButton1"; var sDialogButton2Id = "dialogButton2"; // scrollToTop() // vertically-centered div's require strange hacks if the page has scrollbars // therefore, this function forces the user to the top of the page and should // be called before showing the dialog. function scrollToTop(){ if( document.documentElement && document.documentElement.scrollTop){ document.documentElement.scrollTop = 0; }else if(document.body){ document.body.scrollTop = 0; } } // setDialogVisible(pVisible) // (shows | hides) the dialog window. function setDialogVisible(pVisible){ var wDialogBackground = document.getElementById(sDialogBackgroundId); var wDialogForeground = document.getElementById(sDialogForegroundId); if(pVisible){ // show dialog resizeDialogToMatchWindow(); wDialogBackground.style.display = "block"; wDialogForeground.style.display = "block"; }else{ // hide dialog wDialogBackground.style.display = "none"; wDialogForeground.style.display = "none"; } } // resizeDialogToMatchWindow() // resizes the dialog to be "maximized" in the browser. It is recommended that // this be called on the window's "onResize" event. // e.g., function resizeDialogToMatchWindow(){ var wDialogBackground = document.getElementById(sDialogBackgroundId); var wDialogForeground = document.getElementById(sDialogForegroundId); // Calculate the page width and height if(document.body && (document.body.scrollWidth || document.body.scrollHeight)){ var pageWidth = document.body.scrollWidth + "px"; var pageHeight = document.body.scrollHeight + "px"; }else if(document.body.offsetWidth){ var pageWidth = document.body.offsetWidth + "px"; var pageHeight = document.body.offsetHeight + "px"; }else{ var pageWidth = "100%"; var pageHeight = "100%"; } wDialogBackground.style.width = pageWidth; wDialogBackground.style.height = pageHeight; wDialogForeground.style.width = pageWidth; wDialogForeground.style.height = pageHeight; } // closeDialog() // shorter interface for setDialogVisible(false) function closeDialog(){ setDialogVisible(false); } // showDialog(pBodyText, pButton1Text, pButton2Text, pButton1Href, pButton2Href) // Sets the dialog's properties (text, button actions) and then shows the dialog. // to call a javascript function when the user presses a button, simply pass // "javascript:yourjavascriptfunction();" as the button href. function showDialog(pBodyText, pButton1Text, pButton2Text, pButton1Href, pButton2Href){ var wDialogBodyText = document.getElementById(sDialogBodyTextId); var wDialogButton1 = document.getElementById(sDialogButton1Id); var wDialogButton2 = document.getElementById(sDialogButton2Id); wDialogBodyText.innerHTML = pBodyText; // set the main text wDialogButton1.innerHTML = pButton1Text; // set button1's text wDialogButton2.innerHTML = pButton2Text; // set button2's text wDialogButton1.href = pButton1Href; // set button1's 'action' wDialogButton2.href = pButton2Href; // set button2's 'action' scrollToTop(); setDialogVisible(true); } // setOnResizeEventHandlerForDialog() // if access to is not available, // this function will dynamically set the onResize event handler to // call resizeDialogToMatchWindow() function setOnResizeEventHandlerForDialog(){ window.onresize = resizeDialogToMatchWindow; }