[javascript]
Perfect Popups [v.2]
Popup windows can be very useful on a graphic intense site. Using thumbnails to reduce loading time has always been a popular idea, but popups have often been an annoying thing - lots of little windows opening all over the place, getting lost behind other windows and generally making a complete mess of your desktop! If this scenario sounds familiar then this page is for you!.
No more multiple windows cluttering your desktop, no more losing the image that you wanted to look at again and no more badly behaved popups! Now you can have just one popup window that always comes to the front of your desktop when called, is accessible and also resizes itself to the image you wish to display. They can also be used to display text or pretty much anything you want to display and as they make use of HTML, they are also fully configurable and work perfectly in all browsers.
Sound good? Then read on, MacDuff!
Test the sample popups below.
Try clicking through the different links WITHOUT closing the actual popup window...
TEXT LINK TO SAMPLE POPUP 1
TEXT LINK TO SAMPLE POPUP 2
First, cut and paste the following script in-between the <head> and </head> tags of your page:
This piece of code creates our popup window and we can define the look of our popup window here...i.e. toolbar, scroll bars etc.
I always put my popup pages in a popup subdirectory - I find this makes my sites easier to manage and I can find the popups I want easily if they require editing. Remember, with this popup script, your popups are actual html pages, so keeping them seperate from the rest of your site is a good idea for ease of maintenance.
Now let's look at the line of code we need to put in our document to CALL the popup:
width=470,height=403'); return false;" class="boldfont">IMAGE OR TEXT LINK GOES HERE</a>
Lets look at what's happening here.
ACCESSIBILITY
First, a slight tweak from version 1 of the Perfect Popup script, the anchor holds the path to the file you wish to load into your popup. This is to cater for Accessibility and browsers that are not using JavaScript. Instead of seeing nothing because no popup is launched, this will load the popup content into the browser.
STYLING THE POPUP
Secondly, we are saying "on click" which means when this link is clicked,
"do this". The "do this" part is
"ShowPopup('popups/picture1.cfm','popup','resizable=yes,width=470,height=403'); return false;"
We are asking the code to show the popup ('popup') and load the specified page (in this case picture1.cfm)
into it when the link is clicked. We are also setting our popup options here, including the size of popup we
want. Adding the size at this point prevents having an original popup that is too large or too small for
the page that is going to be displayed and avoids the resizing being so obvious when the popup page loads. It is
in this part of the code that you can add things like scrollbars etc. The "options" you can use are:
toolbar=no/yes
location=no/yes
directories=no/yes
status=no/yes
menubar=no/yes
resizable=no/yes
scrollbars=no/yes
[use a value of either yes or no appropriately depending on whether you want the attribute to be used or not]
Remember to separate each one with a comma and to enclose the entire string in single quotes like the example below:
resizable=yes,menubar=no,width=460,height=420')
KEEPING THE MAIN PAGE UNCHANGED
As discussed above, we are calling the popup content in the anchor to cater for accessibility and non-JS browsers. However, for browsers with JavaScript turned on, we need to prevent this from happening. If a browser has JS turned on, ideally we want the main window to remain unchanged. The additional piece of code at the end of the onclick function, 'return false;' is added to prevent the popup content loading into the main page of browsers with JavaScript turned on.
POPUP SIZING TIP
If you are not incorporating scroll bars in your popup, it is advisable to make your popup resizable as different browsers display differently, and whilst the popup may look great on your browser, it may be different on another and the user will then have the option to resize using their mouse by draggin a corner of the popup if it is neccessay.
BUILDING THE POPUP PAGE
Now all we need is a picture1.cfm file for the popup to access. This is simply an html page but a very small one. Here is the code used to create the picture1.cfm popup page used in this tutorial:
Lets look at the JavaScript first. You simply need to add this script to your header:
self.focus(); brings the popup window to the front on the desktop whenever it is called.
Adding the resize code to your page as an onload function is simply a safeguard to ensure the popup is the correct size for it's contents.
You may find you need to play around with the window size a little bit to get it right but, as a general rule, this is the formula I use - add 10 pixels onto your image width for the width of your popup and 75 pixels onto your image height for the height of your popup. This allows for you to put a little "Click to close" anchor underneath the image in case the viewer wants to close the popup.
FRAMING TIP
If you wish to frame your image as I have done in the examples used in this tutorial, you can use CSS to add margin widths and a border to the image itself. You also need to make your popup window larger to accommodate the extra pixels added on for any margins you create.
The result should be a perfect 'accessible' popup which disappears to the back when you click on the original page, pops back to the front when it is re-called and degrades gracefully in non-JS browsers. Only one popup which will resize to whichever page is called and behaves like a good mannered popup should!