iEntry 10th Anniversary CSS Snippets JavaScript Snippets

 
 





Creating Popup Windows

There maybe times that you do not want a user to navigate away from your site, because you want to show them something, but still have more data that you would like to give them. A good example of this is if you want to show them a picture for a news story. Using JavaScript you can make the link open in a new window. We will be using the window.open() function that is built into JavaScript. The window.open function has a special formating that we need to look at before we use it.
window.open(URL, Title, attributes)
To use the window.open function we have to tell it the source of our image, or web site, the title of the new window, and then if we want to customize the window we can pass it other attributes that the function will understand, like toolbar=no. Here is a list of attributes that you can pass to the window.open function.

Attribue Action
Width This attribute will set the width of the new window.
Height Based on the name of this attribute, you could have guessed correctly that this sets the height of the window.
Resizable Like the rest of the attributes in this list, you can set this to either yes or no. It allows the window to resized by the user.
Scrollbars The scrollbars attribute will show or hide the scrollbars on the window.
Toolbar Like the scrollbars, this will either hide or show the toolbar of the browser. The toolbar is location where the back, foward, reload, stop buttons are located.
Location Location will allow you to show or not show the url box, this is the box you type in the address of the site you want to go to, like http://www.code-sucks.com
Directories If directories is set to no, then it will not show toolbars that the user has, like a Favorites toolbar.
Status The status bar hides the bar at the very bottom of the browser that shows how much of the page that is loaded.
Menubar The menubar is the part of the browser that has File, Edit, View, etc. Set this so no to hide this bar.
Copyhistory This allows you to copy the history of the parent window to the new window.

With the new information, lets create a function that will allow us to open web sites, and images in new windows. 

<script lanuage="JavaScript" type="text/Javascript">
 function popup(lightbulb){
	popupWindow= window.open(lightbulb, "Pop Up", "toolbar=no")
	popupWindow.focus()
 }
</script>

Since we may use this code again, we created a function. This will make our code appear neater, and run faster since we do not have to rewrite all of the code, and the browser does not have to process it. What this function does is passes a varible to the window.open function. Then using the focus() method, we open the new window when the link is clicked. Now when we want to open a new window, we will just pass a varible to the function. 

<a href="javascript:popup('lightbulb_on.jpg')">Lights On</a>

Click here to test the code in your own browser.