Opening Borderless Windows  

    by kirupa chinnathambi

  
For some of us, simply opening new browser windows without the buttons is not enough. A browser window without the address bar, back and forward buttons, and status bars is considered too 20th century. People like us are always in the endless quest for creating something different that interests the visitors.  If whatever interests visitors can also be done in Flash, the 'something different' becomes a necessity that everyone, including you, should know about.

Well, not exactly. This effect is quite nice in that it enables you to customize the menu and title bar of a new window you open in Flash. For an example of what I am alluding to, click the following Flash button:

Making Everything Work
First, you will need to create a button in Flash. Once the button has been created, right click on the button and select Actions. Select Get URL by going to Basic Actions and Get URL. You will now be able to enter the URL that will enable the borderless window to launch. Copy and paste the following code:

javascript:openIT('page.html',450,250,null,null,'mywinname01');

As you can presume, portions of the above code have been colored in for a reason. The code colored in blue refers to the file name of the page you want to display in the borderless window. You can change page.html to reflect the name of your page. Examples of names you can use include:

  • page.htm
  • content/page.htm
  • http://www.kirupa.com/page.htm
  • page.asp

The green text in the code refers to the width and height of the borderless window. The first number refers to the width of the borderless window. The second number refers to the height of the borderless window. From the above code, you can see that that the window will be 450 pixels wide and 250 pixels tall. You can modify the height and width of the window to any value you desire!

Modifying the HTML Page
Once you have your button created, insert the SWF file into an HTML page. You will need to add some code into your HTML to display the borderless window. Open the HTML page containing your SWF file for editing. Add the following lines of code into your HTML page:

It is time to make sense of the code you just copied. I will not be explaining what every facet of the code accomplishes, but I will list the important values that you may choose to modify to customize your borderless window. The following table should help you in customizing the code:

 Variable  What it Does
cD Allows you to change the change the image that is displayed when close button is pressed. In my example, the image was a x.
cU Allows you to change the image that is displayed when the close button is in its default Up state.
cO Allows you to change the image that is displayed when the close button is hovered over.
tH Enables you to change the title that is displayed in the Window.
tW Another area where the title can be defined. The tH variable controls what is displayed however.
wB Enables you to change the color of the border when the window is displayed.
wBs Enables you to change the color of the border when the window is selected or dragged.
wBG Enables you to change the background color of the title bar.
wBGs Enables you to change the background color of the title bar when the title bar is selected.
 

Tip:

You don't have to create a separate image for all of the over states for the close button/image. You can use the same image three times (as in my example).

Once you have customized the code to your liking you are all set to test out your borderless window example...except for one major detail. The javascript references to a file called chromeless.js. You will need to download that file by clicking the following link: chromeless.js

After the file has been downloaded, extract the file and upload it to the directory containing your HTML file. Without this file in the same directory, your borderless window will not work. Now, preview your HTML page and click the button you created in Flash. You should see a borderless window appear.

Credits
The originator of the 'Chromeless Browser Window' can be found at the following URL: http://www.microbians.com/

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

 



SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.