.: Pop-up Window Tutorial
| Sign up here if you'd like to be notified when new tutorials are added to the site. |
Pop-ups are great for loading large graphics from small thumbnails, small email forms and all kinds of other uses where you want to keep a connection with a main page.
This is a simple introduction to pop-up windows using the most functional and easy to use code that I have found in my 10 years of front-end web development. Check back later for additions to this tip where we'll explore special effects like making the pop-up move across the screen, shake (scary) or even using it as a remote control for the rest of your site.
I really like this scripts' simplicity as well as it's easy configurablity. One of its main features is that you can change the size of the window from the link that opens the window as opposed to pre-defining the window size in the Javascript. This means you can have lots of different sized windows that all open from this single script. I usually put this script in an include so pop-ups are enabled throughout the whole site. I try to do the same with all my scripts - have universal ones instead of tons of individual ones. This is good for you because it's less complicated and for your site visitors because you're not taking up their bandwidth unecessarily.
Click here to find out more about putting Javascripts in includes »
-
Copy and paste the following javascript code into the <head></head> portion of your HTML code.
<SCRIPT LANGUAGE="JavaScript">
function openWindow(windowURL,windowName,windowWidth,windowHeight) {
window.name = 'parentWnd';
newWindow = window.open(windowURL,windowName,'width='+windowWidth+',
height='+windowHeight+',toolbar=0,location=0,directories=0, status=0,menuBar=0,scrollBars=1,resizable=1');
newWindow.focus();
}
</SCRIPT>
Options such as whether a toolbar is visible or if the user can resize the window are turned on with "1" and off with "0." In the example javascript code above, only the scroll bars and the ability to resize the window have been enabled. Different browsers are also catered for in this code, e.g. the Tool Bar and Menu Bar are the same thing. If you only turn off one this will work in say Netscape, but not Internet Explorer.
-
This code goes in the <body></body> portion of the HTML document and will open a window 360 px wide and 460 px high. (Click the red link below to open a sample pop-up)
<a href="javascript:openWindow('popup.html','Popup',360,460);">Click here to open a pop-up window</a>
- This code can be used to open any web formatted file, i.e. instead of "popup.html" you could set it to open a JPEG or GIF image, a PDF, even another script or form.
- You can open a pop-up from any link such as a linked image - not just a text link.
- This example pop-up link is entitled "Popup" but you can name it any single word title you like - by the way, in this case, even something like "ThisIsMyCrazyPopUp" is considered one word ;-).
- You can change the dimensions to anything you like, but remember that different browsers render and display things differently. To be safe, particularly in pop-ups that aren't supposed to resize, I add about 20 px to both dimensions.
home :: news & events :: about us :: contact us :: portfolio
design :: print services :: internet solutions :: multimedia
 |
|
|
|
|
|
|
|
 |
|||
|
In our 75+ years of serving Northland we've come across plenty of time saving tips that are just too good to keep to ourselves. |
|
|
 |
|||
