Up Next
Up Next

HTML Pop-Up Size

Ryan Dube
popup windows
Cool HTML Codes

Often, when creating a website, you may want to present the user with important information in a second pop-up window; however, it is important to understand how to properly configure its HTML pop-up size.

Setting a Window's HTML Pop-Up Size

There are a couple of different methods you can use to generate a pop-up window for your website. Each method has its pros and cons, so consider these carefully before choosing one. How you size the window in each case is generally the same, however the location in your HTML code where it's defined will be different. The two methods of opening a new window are either using Javascript, or not using Javascript.

Using Javascript With a Form

The most common technique that webmasters use to generate a pop-up window is through Javascript. Javascript is a flexible scripting language that allows you to process user interactions through script that runs directly on the user's browser, rather than on the web server. This allows for very fast and dynamic screen changes and formatting based on user selections.

You generate a pop-up window in Javascript using the window.open method. However, what sets the Javascript technique apart is that the open() method runs within the Javascript code, defined in your HTML code within the "script" tags.

In a form, you program a button to open a new window as follows.

<script type="text/javascript">

<!--

function myWindow() {

window.open( "http://www.google.com/", "myWindow", "status = 1, height = 200, width = 200, resizable = 0" )

}

//-->

</script>

</head>

<body>

<form> <input type="button" onClick="myWindow()" value="New Window"> </form>

When the user clicks on the form button, the function "myWindow" within the Javascript is run, which uses the "windows.open" method to launch a new window.

The Window.Open method is used in every technique to open a pop-up. So the properties used with this method are what determine what the pop-up window will look like, including it's size.

Window.Open properties include:

  • Fullscreen - Selects whether the new window will be display fullscreen or not
  • Height- Determines the height of the pop-up in pixels
  • Width - Determines the width of the pop-up in pixels
  • Left - Distance from the left side of the screen in pixels
  • Top - Distance from the top of the screen in pixels
  • Status - Whether or not to display a top status bar
  • Resizable - Whether or not to allow the user to resize the new window
  • Dependent - This will make the pop-up close if the window that launched it closes

Using Javascript with a Hyperlink

popup windows How Do I Enable Javascript

Another pop-up technique using javascript is when you are using a hyperlink, rather than a form, and you want the hyperlink to launch a pop-up window. This is accomplished in much the same way as the form example above, except instead of a form button launching the "myWindow" Javascript function, the hyperlink does.

<script type="text/javascript">

<!--

function myWindow(address) {

window.open( address, "myWindow", "status = 1, height = 200, width = 200, resizable = 0" )

}

//-->

</script>

</head>

<body>

<a HREF="javascript:myWindow('http://www.google.com')">Click to Open</a>

Again, the size parameters are configured the same. Using this approach allows you to use the same "myWindow" function with every hyperlink that you want to create a pop-up window with. All you need to do is pass it the URL.

Using a "Real" Hyperlink

The biggest problem with using Javascript to handle pop-up windows is that many people want to right click on a hyperlink and open the link in a new window. If you use the method above in which the hyperlink is actually a Javascript function call, if the user tries to open the link by right-clicking it, they will end up with a blank page.

Because of this issue, the best approach to opening a pop-up window with a hyperlink is to utilize the window-open method as part of the "href" tag, but maintaining the website address within the tag as well. This technique is shown below.

<a href="http://www.google.com" onclick="window.open(this.href, 'popupwindow', width=200,height=200,scrollbars,resizable'); return false;"> </a>

By using the code above, your page will be much more clean and efficient. The hyperlink remains a "real" hyperlink, but it also uses "window.open" to create the pop-up window, with the size parameters defined within the same "href" tag.

Pop-Up Window Size Considerations

Important factors to take into account when you set the length and width parameters for a pop-up window include the placement of the window, and the formatting of the content. Placement of your pop-up window is defined by the "top" and "left" properties. If the window is placed far enough toward to top and left of the screen, then you'll have more space to open a larger window. If it's closer to the bottom or right, then you'll need to size the window accordingly. Secondly, whenever determining the HTML pop-up size of a window, carefully consider how the content will look in a much smaller window. When you write the page that will display in the pop-up, always format it to the size parameters that you plan to set. This will ensure that the pop-up window will look professional, clean, and correctly sized.

More Information

For additional information about web coding, check out the following LoveToKnow articles.

Was this page useful?
HTML Pop-Up Size