DHTML

Using JavaScript

JavaScript and Windows

This lecture will be all about JavaScript and Windows. It is important to note that we are not talking about Microsoft's Windows™ operating system, but about browser windows, sometimes known as pop-up windows.

Window Abuse

The most common use of JavaScript and Windows is to open up, or pop-up new windows. This ability has undoubtedly irked many Web users who have been subjected to numerous pop-up windows filling their screens. We will trust that you won't abuse this information and make things difficult for people by opening more windows than are needed. Usually, one window that can be re-used is sufficient for most purposes.

Opening Windows

Even though HTML can open windows with the target="blank" attribute of an anchor tag, with this method you have no control over the appearance or even the size of the new window.

With JavaScript, you can have control not only over how the window will look, but also its size, contents and even position. (As we will see later.)

You have already seen the .close() method of the window object. New windows are opened using the .open() method of the windows object. The statement takes the following form:

window.open('location', 'window name', 'window features');

Before we take a closer look at the open() method, let's take a look at a default browser window.

All of these different elements of the browser window are contained in the window features parameter of the open() method. If you open a new browser window with HTML, all of these elements will be showing. These elements of the browser window are sometimes referred to as features, or browser chrome. When might you need a chromeless window? Well, if you are opening up a small window with only a little content, all that browser chrome can take up a lot of space. If you are just opening up a small window, you will want as little browser chrome as possible. For example:

Here is a small window with full chrome.

As you can see, the chrome is taking up a significant portion of the window. Let's look at the same page with minimal chrome.

Here is a small window with minimal chrome.

This is an example of what the code would looks like that opened these two windows, respectively.

<a href="#" onclick="window.open('small_win.html','small_window',
'location=yes,toolbar=yes,menubar=yes,status=yes,resizable=yes,
scrollbars=yes,width=200,height=200'); return false;">    
  
<a href="#" onclick="window.open('small_win.html','small_window2',
'width=200,height=220'); return false;">

Notice that each of the three parameters must be enclosed in quotes (unless you are using a variable). Also, each of the window features must be separated by a comma. Some browsers may have a problem if you leave a spaces anywhere between features, so to be on the safe side, enter these features without spaces.

As with anything in JavaScript, you may want to have a function that you can re-use over and over again to open new windows. Here is an example of such a function that would open up a window.

function popWinSimple(url,size) {
  winNochrome = window.open(url,'nochrome_win',size);
}

Here is the event handler that we would use for this function:

<a href="#" onclick="popWinSimple('small_win.html','width=200,height=220'); return false;">

As you can see, we are passing the URL information and the window size are passed along to the function, which then inserts them into the open() command.

(Note that size doesn't have to be just width and height, you could enter in any of the window features in the function call and they would all be passed to the size variable.)

This function will work pretty well, but what would happen if you used the same function to open up another window? When the window is first created, it is always brought to the foreground, in front of any other windows. However, when that window is already open, you are just replacing its content, so it won't be brought to the front. We need a way to bring this window out in front of the current window, or the user might never be aware of its existence. Fortunately, JavaScript has ways of doing this: the focus() and blur() methods.

Focusing and Blurring

Both focus() and blur() are methods of the window object. The focus() method brings a window to the front, or into focus. The blur() method puts a window behind the other windows, or blurs it. Here is an example of how this works:

Click to open a new window.

Click to blur the window

Click to focus the window

Before you close the window, click the link that blurs it, then click the link that opened the window again, and notice that it never came forward. While it is open, the only way to bring it forward is with focus(). Now you can close the window. (Unless you are completely enthralled with blurring and focusing it, in which case you can keep playing.)

If you closed the window, then tried to focus or blur, you would get an error. This is normal. It happens because JavaScript is now trying to perform actions on an object (the window) that no longer exists.

Now that we know how to use these additional window methods, we can put focus() to use in our window opening function.

function popWinSimple(url,features) {
  winNochrome = window.open(url,'nochrome_win',features);
  winNochrome.focus();
}

Now, when the function is called, if the window is opening for the first time, focusing it won't do much, but it won't affect the operation either. If the window is already open however, the focus() method will come in handy, as it will bring the already opened window into focus.

Positioning Windows

There is yet something else that can be added into the features parameter of the open() command. Positioning controls. These controls are left, and top. If you wanted to make a chromeless window appear 10 pixels from the left and 10 pixels from the top of the screen, you would open the window like this:

window.open('some_page.html','new_window','width=200,height=220,left=10,top=10');

Try it!

Communicating Between Windows

One of the coolest abilities of JavaScript and windows is the ability to communicate between them. You can easily target a specific window, and do almost anything you would to the current window.

An example of communicating between windows.

Here's how this example works.

The first link calls a function that contains a prompt() method that gathers some text and puts it into the window_text variable. (all these variables should be declared outside the functions so they are global.)
The second link calls the function to open a new window. This function is very similar to the last example, however, we have added some write() methods that write to the new window. Here is the function and the event handler that called it.
```
function popWinSimple(url,size) {
  winNochrome = window.open(url,'nochrome_win',size);
  winNochrome.document.write('<html><head><title>This is your text<\/title><\/head>');
  winNochrome.document.write('<body><h4>' + window_text + '<\/h4><\/body><\/html>');
 }


<a href="#" onclick="popWinSimple('','width=200,height=220,left=10,top=10'); return false;">
```
Notice that instead of using document.write(), we use the variable that contains the new window, winNoChrome, and write to that. Inside the write() method are basic (yes, very basic) HTML tags, and in the body, we insert our window_text variable. Also take note of the first value in the onclick event handler. It is a blank space (' '). This is how we get JavaScript to open a new window with a document that doesn't exist yet.
The third link uses the humble location property, but it is used, once again, after the winNochrome variable.
```
<a href="#" onclick="winNochrome.focus(); winNochrome.location='small_win.html'; return false;">     
```
This particular statement was simple enough to be place in the onclick event handler.
The last link uses the standard close() method, but again places it after winNochrome, effectively closing that window.
```
<a href="#" onclick="winNochrome.close(); return false;">    
```
Again, we don't need to place this in a function, it is small enough to be contained in an event handler.

Not only can you open a new window and control it, but the window you opened can also affect the window that opened it. This is done through the opener property. Opener basically means "whoever opened me".

You can target the original window by using a statement like this:

window.opener.location='somewhere_else.html';

Try it out. (This won't work if this is the first page you are viewing since you opened this window.)

In that example, we simply used a function that contains the opener property and a history.go method. The direction for go() is supplied by the event handler into the dir variable in the function.

function openerGo(dir) {
  window.opener.history.go(dir);
}

Scrolling a Window

One last little bit of window wizardry we will look at before moving on is how to scroll a window to a certain section. Obviously, this is not very necessary when you are dealing with the current document, as you could just as easily use named anchors to move around on the page. However, you can use JavaScript to scroll a new window to any position on the page.

Before we go any further though, we need to introduce another new JavaScript method, setTimeout(). This method basically tells JavaScript to hold off executing whatever statement is contained in its first parameter (inside quotes). The second parameter is the amount of time to hold off. (1000 = 1 second). Here is an example:

setTimeout('do_something',1000);

The reason we need to introduce a setTimeout() here, is that when you open a new window, there is sometimes a delay before the window loads. If you try to scroll the new window before it is opened, you will get an error. Now that setTimeout() has been explained, let's move on to our scrolling adventure.

Here is an example of window.scroll and timeout() in action.

When you want to open up a new window and scroll it to a particular area, you need to remember to enable the scrollbars for the new window, otherwise the scroll method won't work.

function popWinSimple(url,size) {
 winNochrome = window.open(url,'nochrome_win',size);
 winNochrome.focus(); 
 setTimeout('winNochrome.scroll(0,650)',1000);
}

The first parameter for scroll() is the sideways or horizontal scroll amount in pixels. You usually won't need this, but if you ever do, it's available for you to use. The second parameter, if you haven't guessed is the vertical scroll in pixels.

Basically what we are doing with this function is opening a new window (with values supplied by the function call), then focusing it. The setTimeout() method tells the script to pause for 1 second, then scroll the new window to a position 650 pixels down the page.

JavaScript and Windows Summary

Windows are opened with the window.open() command (method).
Different elements of the browser such as toolbar, location, menubar, status, scrollbar and resizable can all be turned off or on in the open() parameters.
Each of the open() parameters must be enclosed in quotes and separated by a comma. (Window features are an enclosed in the same quotes and separated by commas with no spaces.)
The focus() method brings a window in front of other windows.
The blur() method puts a window behind.
Windows can be positioned on the screen by using left and top in the window features section of the open() command.
You can easily communicate between windows by using the variable assigned to the new window, then adding any methods or properties you would normally use with the window object.
A new window can target the window that opened it using the window.opener property.
A window can be scrolled using the window.scroll() method. Windows are scrolled horizontally or vertically by pixels.
the setTimeout() method tells JavaScript to pause a certain amount of time before executing the statements contained inside.
If you try to scroll a window that hasn't yet opened, you will get an error message. Use setTimeout to wait until the window loads before acting on the new window.

Coming Soon:

Jun 27: Microsoft Office Word 2007 - Tips for Small Business

Jun 27: Microsoft Office Excel 2007 - Tips for Small Business

Jun 27: Microsoft Office PowerPoint 2007 - Tips for Small Business

Aug 21: Facebook for Business

Sep 10: ISSD 24 - Web 2.0 Technology

Sep 17: ISSD 24 - Ajax

DHTML - TOC - Introduction - Books -
Using JavaScript - Links - Questions -
1 - 2 - [ 3 ] - 4 - 5 - 6 -