Animated Window Examples

Throughout my web site, when you click on links, in many cases I utilize animated (expanding) windows. This short article/tutorial includes examples and will show you how you can accomplish the same effect for use at your web site.

As you click each of the 4 below links, instructions are included within each window after the window fully expands/opens:

Animated Window Example 1 <-- this example references external javascript animwindow1.js

Animated Window Example 2 <-- this example references external javascript animwindow2.js

Animated Window Example 3 <-- this FULL SCREEN example references external javascript animwindow3.js

Animated Window Example 4 <-- this FULL SCREEN example references external javascript animwindow4.js

Further instructions for the examples used here:

Using a text editor (eg: Editpad or Windows Notepad), create 4 external javascript files and name them appropriately, containing the scripting you see for each below (click on each of the links to see the scripting)...

animwindow1.js
animwindow2.js
animwindow3.js
animwindow4.js

Create a sub-directory at your server named js and place the 4 above files within it. Then, anywhere between the beginning <head> and ending </head> tags on the page you want to supply links to open expanding windows, include these 4 calls to the external javascript files...

Code:

And finally, here is the code to be used for the actual links that people will click on to open the expanding windows, to be placed at whatever point(s) after the <body> tag you want the links to appear on your web page...

Code:

<a href="#" onClick="expandingWindow1('example1.htm');return false" onfocus="this.blur();">Animated Window Example 1</a>

<a href="#" onClick="expandingWindow2('example2.htm');return false" onfocus="this.blur();">Animated Window Example 2</a>

<a href="#" onClick="expandingWindow3('example3.htm');return false" onfocus="this.blur();">Animated Window Example 3</a>

<a href="#" onClick="expandingWindow3('example4.htm');return false" onfocus="this.blur();">Animated Window Example 4</a>

Of course, you would change the above link references to suit your needs.
Example: in the first link, change example1.htm to the page that you want to open in an animated (expanding) window and change Animated Window Example 1 to descriptive text (or an image) of your choice for the link.

That's all there is to it!
Have fun!