davesite.com / webstation / JavaScript Tutorial


Working With Windows 1


Just a note, my new tutorials on Coding and Web Design will be found at CrazyButLazy Digital Designs, encouraging people to use HTML, CSS, and JavaScript together.


Need a better web host, or just starting out and looking for the perfect match?

iPage servers are amazingly fast and one of the best deals out there.

Check them out: iPage Web Hosting only $1.99/month!

In this section, we'll learn how to make a pop-up window.

The JavaScript command window.open() creats a new window. With it we pass three items of information (each called a parameter, so we're really passing three parameters.)

The first piece of information (parameter) is the URL of the web page we'd like to open in the new window. The second piece of information is the name we'd like the window to be known as to our scripts. The third piece of information is the window attributes, i.e. what size we want it to be, if we want a location bar to be on it, etc.

In its one of its most simple forms, it looks like this:

<script language="JavaScript"><!--
window.open("http://www.davesite.com/", "WindowA", "width=525,height=400,scrollbars=yes"); //--></script>

If you were to put this in a web page as is, as soon as it hit this line of code, a new browser window would open with scrollbars, 525 pixels wide and 400 pixels high, loading http://www.davesite.com/.

In reality, this is kind of silly. In most cases, we won't want to open a new window without the person visiting our site telling us to do so.

The simplest way to get a window to open by permission is to use a link. A link would look something like this:

<a href="#" onClick="window.open('http://www.davesite.com/', 'WindowA', 'width=525,height=400,scrollbars=yes');">

Which looks like this (click to test):

Visit Dave's Site

A problem with this method is that nothing really happens when a user without JavaScript enabled clicks the link. So it's in our best interests to handle their case, too. This is best accomplished with a function and a noscript command.

A function allows us to do a whole lot of things at once. Functions must be enclosed within script tags, and we must give them a name. Here's a function that'll open our window whenever we use the words OpenOurWindow() in an event.

<script language="JavaScript"><!--

function OpenOurWindow() {

Our_Window = window.open("http://www.davesite.com/","WindowA", "width=525,height=400,scrollbars=yes");

Our_Window.focus();

}

//--></script>

Now, we'll code some HTML and JavaScript that works in both types of browsers, those with JavaScript enabled and those without it enabled. We'll enclose the function we just wrote within our script.

<script language="JavaScript"><!--

function OpenOurWindow() {

Our_Window = window.open("http://www.davesite.com/","WindowA", "width=525,height=400,scrollbars=yes");

Our_Window.focus();

}

document.writeln("<a href='#' onClick='OpenOurWindow()'>Visit Dave\'s Site</a>");

//--></script>

<noscript>
<a href="http://www.davesite.com/" target="_blank">Visit Dave's Site</a>
</noscript>

Our Example:

Now, when the page is loaded in a browser with JavaScript enabled, the script will write out our special JavaScript link with writeln. If the browser doesn't have JavaScript enabled, it'll just get a plain link that will open in a new window but without our special window attributes.

There are a ton of extra window attributes. Some of the more important ones include menubar (set to yes will show File, Edit, etc.), locationbar (set to yes will allow user to change their location by typing it in that field), toolbar (set to yes shows back / forward / stop / reload / etc.) I'd encourage you to visit Netscape's JavaScript reference for more information.



Last Section: Image Tricks 1

Back to the Guide

More Soon!
Back to davesite.com