Fluid Browser Window Demo and Help

First things First

beta version 1.0

As stated in the Help File the Fluid Browser does not launch a new window. It will resize the window once it is launched.

You can use the Dreamweaver Open Browser Window to launch the initial window. If you are new to Dreamweaver and need more information on how to apply this behavior, visit our Open Browser Window Tutorial to learn more.

The nuts and bolts of applying and changing the Fluid behavior are covered in the Help file. This tutorial will focus on ways to make the transition effect work smoothly and how to add a couple of simple hand coded features.

The Window Transition

In the Open Browser Window behavior you will need to do three things when setting up the initial window you are launching.

  • Browse to the URL (page) you wish to load into the window.
  • Check the "Resize Handles" option.
  • Check the "Open Centered" option.

All other options are optional.

Centering the Open Browser Window will also eliminate the initial window opening to the side or top which gives a flash or lingering window for a few seconds.

You should have an idea of which direction you will want the window to resize. If your loaded window will start at 500x500 and resize to 200x200 then it is best to set the opening size of the Open Browser Window dimensions to the start size of the popup which would be 500x500.

The Fluid Effect

Examples of several pages dimensions being loaded sequentially into the window.

1st page

2nd Page

3rd Page

Each additional window loaded via Links or the AutoSlideFeature should use this method to get a smooth transition achieving a fluid effect.

Standard Resize

It is not neccessary to apply the Fluid Effect method. You can set your dimensions as you like and the window will simply obey your commands.

 

Centering the Content

If you are using tables to hold your content and are resizing the window with other pages, it is best not to center the table in the .htm when constructing your page layout. Set all 4 Page Margins to "0" in the Modify >> Page Margins interface.

This is to prevent the content from being snapped into place after the window loads in NN4.x browsers.

 

Closing the Window

Here is the code necessary to close the window:

onClick="window.close()"

From Link or Image

Using an active text link or image you can add a little bit of code to the link to close the window.

Text Link code:

<a href="#" onClick="window.close()">Close Window</a>

Image Link code:

<a href="#" onClick="window.close()"><img src="image.gif" width="50" height="50"></a>

Auto Close

This method uses a Javascript Timeout to close the window automatically and is applied to the <body> Tag.

The Timeout code:

setTimeout('window.close()',5000);

It is placed into the same body onLoad call that the Fluid Browser is applied to.

onLoad="setTimeout('window.close()',5000);Lvl_FluidBrowser(260,397,463,320,5,5,false)"

The 5000 is the actual delay time to close the window. Change this to set the Timeout delay.

  • 2000 = 2 seconds
  • 3000 = 3seconds
  • 4000 = 4seconds
  • 5000 = 5seconds etc...


In Closing

There are many ways you can use this effect in conjunction with the content that you add to your pages. If you have any suggestions, comments or would just like to share your ideas , send us an email and let us know what you think.

Enjoy...

4Level Webs

Copyright© 2001 All rights reserved