Navigation:    Home arrow Create & Resize Popup
Javascript Create and Resize Popup Windows PDF  
Digg Reddit Ma.gnolia Stumble Upon Facebook Twitter Google Yahoo! MyWeb Furl" BlinkList Technorati Mixx Bookmark

This tutorial shows how how to create custom sized and positioned popup windows with javascript. Popup windows can be used to display help message windows, images in a bigger format, and others.

 Creating a new browser window with javascript allows you to setup the following parameters:
width, height, location on screen (distance from left up window corner to left up screen corner), wether to show or not toolbars, status bar, menubar, scrollbars and wether to be or not resizable.

However, different browsers support or not these attributes. More details about what attributes some browsers support you will find with further in this tutorial.

The Javascript function that displays a popup window is listed below:

  <SCRIPT language="JavaScript">
<!--
function popup_window(url,w,h)
{
var width=w;
var height=h;
var from_top=350;
var from_left=500;
var toolbar='no';
var location='no';
var directories='no';
var status='no';
var menubar='no';
var scrollbars='yes';
var resizable='yes';
var atts='width='+width+'show,height='+height+',top='+from_top+',screenY=';
atts+= from_top+',left='+from_left+',screenX='+from_left+',toolbar='+toolbar;
atts+=',location='+location+',directories='+directories+',status='+status;
atts+=',menubar='+menubar+',scrollbars='+scrollbars+',resizable='+resizable;
window.open(url,'win_name',atts);
}
</SCRIPT>

To use this funtion with HTML code use the following line:

 <a href="javascript: popup_window('popup_demo.html',300,200)">Click to see a demo popup window</a> 

The code explained:

The function takes as parameters the url of the page displayed in the popup window, the window hight and the window width. The other window parameters are set inside the funtion:
- width - the width of the popup in pixels
- height - the height of the popup in pixels
- from_top - distance in pixels from the top of the screen to the top of the window
- from_left - distance in pixels from the left side of the screen to the left side of the window
- toolbar - if the tolbar should be shown. The toolbar contains the Back, forward buttons, etc. This parameter is not supported by Opera browsers.
- location - if the location bar is shown
- directories - if the directories bar is shown. This parametter is not supported in Opera, Safari and Explorer on Mac
- status - if the status bar is shown. Not supported in Opera (always no)
- menubar - if the menubar is shown. The menubar contains File, Edit, etc. Not supported in Opera (always no).
- scrollbars - if the popup should have scrollbars if it needed. This parameter is always yes in Explorer Mac, Safari and Opera, even if set to no.
- resizable - if the popup is resizable. The popup is always resizable in Mozilla, Safari and Opera.

The line that actualy creates the window is:

  window.open(url,'win_name',atts); 

The first parameter is the url of the page to be displayed. Second parameter is the window name and it can be any name you like. Third parameter gives the window attributes.

If you found this tutorial useful you might be interested to read the following:

Javascript Text Box Characters Counter

Javascript Disable Right Click

Javascript Wait While loading Page Image Display