Welcome to S-Design
The home of your bespoke, professional, fast-loading, interactive, database-driven web presence.
Menu
JAVASCRIPT TUTORIALS


JAVASCRIPT Pop-Up Windows

You can use JavaScript to achieve many different things, but the most widely used purpose is to create pop-up windows, and so that's the only thing we're going to show you here.

In the HTML Tags chapter, we showed you how to create Hyperlinks/Links, and how to get them to open in a new window. However, the 'new window' would just be an ordinary browser window with all the menus and buttons in place, would open up anywhere on your screen, and be the default size.
Pop-up windows can be made to open anywhere on the screen you like, be whatever size you like, and have as many, all, or none of the menus and buttons as you like.

There are MANY different ways of using JavaScript to open a pop-up window, and most web designers will argue that their way is the best way for one reason or another. Here we will demonstrate 2 ways of achieving a JavaScript pop-up window. Both work - and that's the main thing!


The First Way

Create a normal hyperlink that point to the page you want to go to:
<a href="http://www.mywebsite.com/mypopup.html">My Link</a>

Inside the opening anchor tag, we're going to add a JavaScript attribute called onclick and tell it to create a pop up window. We'll specify the page to go to, and the kind of window it's to appear in: <a href="http://www.mywebsite.com/mypopup.html" onclick="window.open(this.href,'windowname','width=310, height=420, top=' ((screen.availHeight/2)-(420/2)) ', left=' ((screen.availWidth/2)-(310/2)) '');return false;">My Link</a>

Lets explains the JavaScript code:

onclick="" This tells the browser that the following code is JavaScript, and is to be executed on click (On Mouse Down). The normal link tag (<a>) fires On Mouse Up, so the onclick should fire before the normal link.

return false; This tells the browser that after performing the javascript in the onclick="", not to continue with the default behaviour of the element. In this case, it's saying to the normal link tag (<a>) "please don't go to the link specified in the href="".

window.open() This tells the browser what the Javascript is supposed to do. In this case, it's to open a window. Everything encased inside the braces () is the properties for that window.

this.href The 1st attribute in the window.open(); function should be a URL. Here we're telling it to use the href if this <a> tag.

windowname Give the pop-up window a name. This can be anything you like. If you want all your links to open in the same pop-up window, make sure all your links use the same windowname. If you want your links to open in different pop-ups (so you could have 2 or more open at the same time), then give all your links a different windowname.

width= & height= This specifies the Height & Width of the pop-up window.

top="" & left="" These are used to center your pop-up window. Remember to use the same values as width= & height=. Simply leave out the top & left attributes if you don't want your pop-up centered.

The above code would produce a pop-up window that is 310 pixels wide, by 420 pixels heigh, is centered in your screen, and contains the page you specified. The pop-up will have no menus, toolbars, status bar, scroll bars or location field, and is not resizable.
By default, if you do not specify what features the pop-up window will have, they are turned off.
To enable features of the pop-up window, you have to specify them as follows:

toolbar= This specifies the browsers toolbar. Set to yes to display. If you set this to no, or do not include this in the JavaScript, the toolbar will not be visable.

menubar= This specifies the browsers menu. Set to yes to display. If you set this to no, or do not include this in the JavaScript, the menu will not be visable.

status= This specifies the browsers statusbar. Set to yes to display. If you set this to no, or do not include this in the JavaScript, the statusbar will not be visable.

scrollbars= This specifies whether the pop-up window will have scrollbars. Set to yes to display. If you set this to no, or do not include this in the JavaScript, the pop-up will not have scrollbars.

resizable= This specifies whether the pop-up window is resizable by the viewer. Set to yes make the pop-up resizable. If you set this to no, or do not include this in the JavaScript, the pop-up will not be resizable.

location= This specifies the browsers location field or address bar. Set to yes to display. If you set this to no, or do not include this in the JavaScript, the location field will not be visible - useful if you don't want your visitors to see the URL of the page they're viewing.

IMPORTANT: Some browsers by default will always show the location of the page, to prevent spoofing.
You therefore cannot reply upon this being hidden!

fullscreen= This specifies whether you want the pop-up window to take up the entire screen of the user with no visible window at all. Set to yes to use this feature, and any height or width specified will be ignored. If you set this to no, or do not include this in the JavaScript, the pop-up window will display as per the other specified features.

IMPORTANT: When a webpage is viewed at full screen, because there is no visible window - the user will have no way of closing it!!!! You must provide a 'Close Window' link (see below) in the page being viewed in the fullscreen pop-up!!!

For ease of use, it is recommended that you include all values above in the JavaScript pop-up code, even if they are all set to no.
This way, if you ever have to change any of the window features, you simply have to change no to yes, rather than try and remember how to include them: <a href="http://www.mywebsite.com/mypopup.html" onclick="window.open(this.href,'windowname','toolbar=no, menubar=no, status=no, scrollbars=no, resizable=no, location=no, width=310, height=420, top=' ((screen.availHeight/2)-(420/2)) ', left=' ((screen.availWidth/2)-(310/2)) '');return false;">My Link</a>


The Second Way

Create a normal hyperlink: <a href="http://www.mywebsite.com/mypopup.html">My Link</a>

Inside the opening anchor tag, we're going to add a JavaScript attribute called onclick and point it to a JavaScript function: <a href="http://www.mywebsite.com/mypopup.html" onclick="popup1(this.href);return false;">My Link</a>

Now we need to define what function popup1() is. We do this by placing the JavaScript code between the <head> & </head> TAGS of your HTML page, or by including an external JavaScript file (as per the JavaScript Basics tutorial): <script>
function popup1(url){
window.open(url,'windowname','toolbar=no, menubar=no, status=no, scrollbars=no, resizable=no, location=no, width=310, height=420, top='+((screen.availHeight/2)-(420/2))+', left='+((screen.availWidth/2)-(310/2)));
}
</script>

You can add as many functions to the above code as you like, if you wish to open different window sizes: <script>
function popup1(url){
window.open(url,'windowname','toolbar=no, menubar=no, status=no, scrollbars=no, resizable=no, location=no, width=310, height=420, top='+((screen.availHeight/2)-(420/2))+', left='+((screen.availWidth/2)-(310/2)));
}
function popup2(url){
window.open(url,'windowname','toolbar=no, menubar=no, status=no, scrollbars=yes, resizable=no, location=no, width=400, height=420, top='+((screen.availHeight/2)-(420/2))+', left='+((screen.availWidth/2)-(400/2)));
}
</script>

Then simply refer to which function you want: <a href="http://www.mywebsite.com/mypopup1.html" onclick="popup1(this.href);return false;">My Link1</a>
<a href="http://www.mywebsite.com/mypopup2.html" onclick="popup2(this.href);return false;">My Link2</a>


That's it! Just use whichever method you find easiest for you.


To provide a 'Close Window' link on a webpage being viewed in a pop-up window, include this code on the page being viewed in the pop-up:
<a href="#" onclick="window.close();return false;">Close Window</a>

Title