Dynamic Windows
How to create dynamic windows in javascript
In the previous chapter, we accessed form fields using Javascript and the HTML DOM. The document object model allows us to do more that this - we may access virtually all the elements on a loaded HTML document through Javascript functions. We may call these functions when specific events take place - when the html page loads, when a button is clicked, or even when the mouse hovers over a certain area. The functions then may manipulate or change areas in the loaded page and add a dynamic feel to static HTML pages. Javascript may also be used to write cookies to the client computer to help the web site 'remember' the user. In this chapter, we will learn to open new windows with relevant information when the mouse clicks on objects on the web page, make our navigation menu more attractive by adding some text and color effects, and customize the web site for the user through cookies.
Dynamic Windows
Let us start by writing a script that will open a window that contains a larger picture and additional details when a user clicks on the image or name of a flower in the catalogue.First, navigate to the Catalogue of the florist web site. Now, click on any picture or the title under the picture. A new window with a larger picture and details like the cost will pop up on the screen. This functionality is ubiquitous in e-commerce oriented sites like amazon and ebay. Our sample site just shows the cost but these larger sites display many more details about the product.
Screenshot 6a: A pop up window
We learnt that 'window' is a top level object in Javascript's DOM in the previous chapter. Let us look at the HTML markup of the section on the page that made the window pop up.
<table>
<tr><td align=center><a href=# onClick="showLarge(0)">
<img src="images/redrose.png" name="redrose"
alt="red roses" width=200 height=140></a>
</td></tr>
<tr><td align=center>
<a href=# onClick="showLarge(0)">Red Roses</a>
</td></tr>
</table>
The image and the name of the flower are now enclosed within a link; only, the href contains a '#' rather than a URL. More importantly, the onClick event handler calls the function 'showLarge'. Also, the parameter '0' is passed to the function. If you see the markup for each flower, you will see that this parameter is '1' for the next flower down, '2' for the third flower in the list and so on. Now, let us take a look at the function showLarge that is part of the header of the catalogue.asp HTML document.
function showLarge(flowerNumber)
{
newWindow = window.open("",flowerNumber,"width=400,height=400");
newWindow.document.write("<head><title>" + flowerCaption[flowerNumber]
+ "</title></head>");
newWindow.document.write("<body bgcolor=#F1BBD6>");
newWindow.document.write("<h2>" + flowerCaption[flowerNumber] +
"</h2>");
newWindow.document.write("<p><img name=flowerImage align=center src='" +
flowerPictures[flowerNumber] + "'></p>");
newWindow.document.write("<p>Cost:" + flowerCost[flowerNumber] +
"</p></body></html>");
}
newWindow = window.open("",flowerNumber,"width=400,height=400");
The above line of code opens a new window and simultaneously sets an object to refer to the open window. The open method takes three optional arguments. The first argument (an empty string in our case) refers to a page ('somepage.htm', for instance ) that should be loaded into the window. The second argument is a name that the calling page may use to refer to the window being opened. In our case, we have assigned this to the parameter that was passed into the function ('flowerNumber' is the name given to the parameter passed into the function; if the user clicked on 'redrose', this parameter, and hence the second parameter of window.open, would be '0')
The final argument of the open method contains a list of properties separated by commas and enclosed in quotes. We have used the width and height properties but several others like resizable, scrollbars, titlebar, and so on may be used.
The next few lines write HTML content into the newly opened window. 'newWindow' is the object we set to refer to the newly opened window in the first line; whenever we say 'newWindow.document.write', a new line of HTML is written to the window.
The argument of the write function is a string. We use the Javascript '+' operator to concatenate, or combine, strings. For example, the following line:
"<head><title>" + flowerCaption[flowerNumber] + "</title></head>";
writes the line "<head><title>Red Roses</title></head>" to the new window.
We use three arrays - flowerCaption, flowerPictures, and flowerCost - in our function. These arrays contain string values. The appropriate value (indexed on the flower number) is substituted for the variable name and combined with the rest of the string. The initialization of these arrays is performed outside the function.
flowerPictures=new Array(6);
flowerCaption=new Array(6);
flowerCost=new Array(6);
flowerPictures[0] = "images/rosebig.jpg";
flowerCaption[0] = "Red Roses";
flowerCost[0] = "$99.99";
.
.
.
...and so on ...
.
.
.
flowerPictures[5] = "images/mixedbig.jpg";
flowerCaption[5] = "Mixed Bouquet";
flowerCost[5] = "$49.99";
We initialized the arrays outside the function because the values the arrays hold do not ever change. The function may be called a hundred times; it is inefficient to re-initialize the arrays every time the function is called. We could have accomplished the same effect using an if - else if loop as we have just six flowers. However, such a design is not flexible and would become hard to maintain if the catalogue should grow.
We set the name of the window to equal the input parameter. This is because we want to open a new window for every flower. It only makes sense that the window opened for each flower has the flower number as its 'handle'. This way, subsequent clicks on flowers already clicked on do not open new windows because the handle specified in the second argument of window.open already refers to an existing open window. To illustrate, let us say that a user clicks on 'redrose' twice. The function will see that the window named '0' is already open and will not open a fresh window.
