Case study

/* The popWindow function will run multiple popups on a page. An example of how you use it on a page is: About Us OR About Us Where aboutus/index.html is the path and name of the page to display, 600 is the full width of the new window to the outside eges, 150 is the full height, including title bar, etc. and yes determines that scrollbars will definitely be displayed. NOTE: the last parameter is optional, and determines what will happen with scrollbars. The acceptable arguments are: yes or y no or n auto or a Important: the path of the page to open must be relative to the location of the page you're editing. */ function popWindow(pageName, pageWidth, pageHeight, scrollBarsYNA) { // Added optional scrollBarsYNA paramter on 10/31/2003. Some windows weren't getting // scrollbars automatically when they needed them // Added this line on 10/31/2003 if(popWindow.arguments.length < 4) scrollBarsYNA = null screenWidth = screen.availWidth screenHeight = screen.availHeight theWidth = eval(pageWidth) theHeight = eval(pageHeight) // if we insert this into popUpWindow, the window will have scrollbars windowOptionsY = "toolbar=no, directories=no, height=" + pageHeight + ", width=" + pageWidth + ", menubar=no, scrollbars=yes, resizable=yes" // if we insert this into popUpWindow, the window will not have scrollbars windowOptionsN = "toolbar=no, directories=no, height=" + pageHeight + ", width=" + pageWidth + ", menubar=no, scrollbars=no, resizable=yes" // if we insert this into popUpWindow, the scrollbars will be set to automatic windowOptionsA = "toolbar=no, directories=no, height=" + pageHeight + ", width=" + pageWidth + ", menubar=no, scrollbars=auto, resizable=yes" // The value (if any) that gets passed by scrollBarsYNA determines which // set of options (above) we insert into popUpWindow, below if ((scrollBarsYNA == "yes") || (scrollBarsYNA == "y")) {windowOptions = windowOptionsY} else if ((scrollBarsYNA == "no") || (scrollBarsYNA == "n")) {windowOptions = windowOptionsN} else if ((scrollBarsYNA == "auto") || (scrollBarsYNA == "a")) {windowOptions = windowOptionsA} else if (scrollBarsYNA == null) {windowOptions = windowOptionsA} else {windowOptions = windowOptionsA} popUpWindow = window.open(pageName, "myWindow", windowOptions) popUpWindow.resizeTo(theWidth, theHeight) leftSide = (screenWidth - pageWidth)/2 topSide = (screenHeight - pageHeight)/2 popUpWindow.focus() popUpWindow.moveTo(leftSide, topSide) } /* This function will write windows on-the-fly, rather than open existing ones. Use it to open a graphic in a window Example: href="javascript:gWindow('images/graphic.jpg','600','400')" */ function gWindow(gName, pageWidth, pageHeight){ // gName is the path and name of the image screenWidth = screen.availWidth screenHeight = screen.availHeight theWidth = eval(pageWidth) theHeight = eval(pageHeight) gWindowOptions = "toolbar=no, directories=no, height=" + pageHeight + ", width=" + pageWidth + ", menubar=no, scrollbars=auto, resizable=no" coverWindow = window.open("", "gWindow", gWindowOptions) coverWindow.document.write("Case study") coverWindow.document.write("

") coverWindow.document.write("") coverWindow.document.close() coverWindow.focus() leftSide = (screenWidth - pageWidth)/2 topSide = (screenHeight - pageHeight)/2 coverWindow.moveTo(leftSide, topSide) } /* This is the best of the popup window functions, since it automatically sizes the popup window. This script adds padding of 20 pixels around the image, and hard-codes the popup window's title bar. If you'd rather have 0 padding and choose the window title on the fly, adjust the popupFeatures and popupContent variables according to the comments, or use the multiwindow3.js script, instead. */ /* Function: pWindow() Description: Function to open an image in a popup window Function Parameters: ImageSource - REQUIRED - the src of the image to open in the popup window ImageWidth - OPTIONAL - the width of the image ImageHeight - OPTIONAL - the height of the image ImageTitle - OPTIONAL - the title for the image - used in the attribute in the popup window PopupTitle - OPTIONAL - the window.name property for the popup window */ function pWindow( ImageSource, ImageWidth, ImageHeight, ImageTitle, PopupTitle ) { var popupWindow /* 1. PROCESS THE PASSED FUNCTION VALUES */ // Set default values if none were passed PopupTitle = ( PopupTitle == '' ) ? 'imgPopup' : PopupTitle; // Note - this must not contain any spaces ImageTitle = ( ImageTitle == '' ) ? ImageSource : ImageTitle; // Use the image src as the default title if none was passed // See if we need to dynamically grab the Image width dimensions if // none were passed in the function if ( ImageWidth == '' || typeof( ImageWidth ) == "undefined" ) { // If no image width was passed - preload the image then grab the // width value from the preloaded image theImage = new Image(); theImage.src = ImageSource; ImageWidth = theImage.width; } // See if we need to dynamically grab the Image width dimensions // if none were passed in the function if ( ImageHeight == '' || typeof( ImageHeight ) == "undefined" ) { ImageHeight = theImage.height; } /* 2. CALCULATE CENTERING VALUES FOR THE POPUP WINDOW */ // Use this only in modern browsers if (document.all) { var xMax = screen.width; var yMax = screen.height; } else { if (document.layers) { var xMax = window.outerWidth; var yMax = window.outerHeight; } else { var xMax = 640; var yMax = 480; } } xOffset = (xMax - ImageWidth) / 2; yOffset = (yMax - ImageHeight) / 2; /* 3. SETUP POPUP WINDOW VALUES */ /* Set the various features for the preview window - width, height, titlebar etc. */ var popupFeatures = 'width=' + (eval(ImageWidth) + 25) + ',height=' + (eval(ImageHeight) + 25) + ',screenX=' + xOffset + ',screenY=' + yOffset + ',top=' + yOffset + ',left=' + xOffset /* If you don't want the 25 pixel padding, un-comment these features, and use the alternate popupContent variable below: var popupFeatures = 'width=' + ImageWidth + ',height=' + ImageHeight + ',screenX=' + xOffset + ',screenY=' + yOffset + ',top=' + yOffset + ',left=' + xOffset */ /* 4. CREATE AND OPEN THE POPUP WINDOW */ popupWindow = window.open('', PopupTitle,popupFeatures); // Set the window opener if ( popupWindow.opener == null ) { popupWindow.opener = self; } popupWindow.focus(); /* 5. WRITE THE ACTUAL IMAGE TO THE POPUP WINDOW */ // Create the default HTML content for the popup window var popupContent = "" popupContent += "\n<html><head><title>Case study" popupContent += "\n" /* if you want no padding, un-comment the popupContent variable, below and use the alternate popupFeatures variable, above popupContent += "\n" */ popupContent += "\n

" popupContent += "" // This is the that we replace the src, width & height (see below) popupContent += "

" popupContent += "\n" popupContent += "\n" popupWindow.document.write( popupContent ) popupWindow.document.close() // Now write the data for the image (src, width & height) oPopupImg = popupWindow.document.getElementById('popupimage'); // Create an object reference to the in the popup window oPopupImg.src = ImageSource; // Replace the source oPopupImg.width = ImageWidth; oPopupImg.height = ImageHeight; }