logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Opening A New Window Using The Javascript Open Command or The HTML Target Attribute

Guest Author - Diane Cipollo

Today one of my PHP readers asked which was the best language to use to open a new pop-up window. She was trying to decide between PHP and Javascript. Most programmers feel that the best language to use for this task is Javascript. Why?

Javascript is a client-side language. This means that the Javascript code is processed on the client-side by the web browser and the server does not need to process the code at all. PHP is a server-side language. The PHP code is processed by the server and then the resulting HTML (that creates the web page) is sent to the web browser. Because the code must first be processed on the server, the response time is slower.

Most programmers feel that a simple task such as opening a pop-up window is best accomplished using a client-side language such as HTML or Javascript. How?

HTML Target Attribute
You can use the HTML anchor tag and the target attribute to open a new window. However, the target attribute is being phased out. In spite of this, the HTML method is still popular. Here is the code. The attribute/value pair of target="_blank" is what causes the newpage.html to open in a new window.

<a href="newpage.html" target="_blank">New Page</a>


Javascript Open Command
Why is Javascript the favorite method for opening a new pop-up window? Because it allows you to have more control over the parameters for the new window. In the example below, we have set the width and height of the new window to be 400 pixels each. This is done using the features parameter.

<script language="javascript">
<!--
window.open('newpage.html', 'example', config='height=400,width=400')
-->
</script>


As you can see, the Javascript code is placed between the opening <script> and closing </script> tags.

window.open('url', 'name ID for new window', config='features', 'replace')

The open command has four optional parameters that you can use to control the new window. Each parameter is placed between single quotes and the parameters are separated by a comma. All of the parameters are grouped together between opening and closing parenthesis. We will discuss the three parameters that are used most often.

URL Parameter
The url parameter sets the url address for the web page that will be loaded into the new pop-up window.

Name Parameter
The name parameter gives the pop-up window an ID name. You can use anything here that you want from example to Sam.

Features Parameter
In the example above, we set the width and height features to 400 pixels each. You will also notice that these features are placed together between single quotes. Each feature is followed by an equal sign. After the equal sign is the value for that feature. Each feature/value pair is separated by a comma only (NO spaces). The config= in front of the 'group of features' is optional.

Besides the width and height, there are many more features that you can use to control the new window. The width and height features are set in pixels but the other features are set to yes or no. You can also use 1 for yes or 0 for no. The value of yes will cause the element of be placed on the web page. Of course if the value is no, the element is left off of the page. The chart below summarizes the most popular features.

Features Parameter
heightpixelsSets the height for the new window
widthpixelsSets the width for the new window
toolbar1 or 0, yes or noDetermines if the browser's toolbar buttons are visible
menubar1 or 0, yes or noDetermines if the browser's drop-down menus are visible
scrollbars1 or 0, yes or noDetermines if the scrollbars are visible when needed
resizable1 or 0, yes or noDetermines if the viewer can resize the browser window
location1 or 0, yes or noDetermines if the url location input field is visible
directories1 or 0, yes or noDetermines if the directories buttons are visible
status1 or 0, yes or noDetermines if the status bar is visible at the bottom of the browser window




This site needs an editor - click to learn more!

Add Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute to Twitter Add Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute to Facebook Add Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute to MySpace Add Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute to Del.icio.us Digg Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute Add Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute to Yahoo My Web Add Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute to Google Bookmarks Add Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute to Stumbleupon Add Opening+A+New+Window+Using+The+Javascript+Open+Command+or+The+HTML+Target+Attribute to Reddit




RSS | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor