About This Product
Metachecker.net | TrafficChecker.net | RankChecker.net
| Over 5000 Free Fonts | Tutorials | Javascript Forum | Other Javascript Resources | Cheat Sheet


A few people have asked me how the about box for the webboard was made and some have asked me to write an article about how to make one. So here goes...

The trick

Normally IE doesn't allow the programmer to create a window without borders and title bars but when you create a window in full screen mode the window doesn't have any of these. To open up a window in full screen use window.open() with the fullscreen=1 in the features argument.

var splashWin = window.open(URI, name,
    "fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")

Now we got a window that covers the entire screen and this isn't what we want so we have to resize it to fit our size. This is done with the method resizeTo(). There is also a method for moving windows and this gives us this:

splashWin.resizeTo(width, height);
splashWin.moveTo(left, top);

Now we are almost done. When the splash window is launched we also want to make sure that it is in front of all other windows on the user's desktop. This is a bit trickier since IE doesn't allow new windows to be launched with "Always On Top". To simulate this you call focus() at a regular interval.

Usage

Include the js file in the normal way.

<script type="text/javascript" src="splashwin.js"></script>

After this you can call the function launchSplashWin(). This function takes 7 arguments but only the first 4 are required.

launchSplashWin(contentType, contentString, width, height, left, top, autoCloseTime)
contentType This argument is either "uri" or "string". If the value is "uri" an external file, located at contentString, is loaded and if the value is "string" the value of contentString is inserted.
contentString The value to insert either as an URI or as the text to insert
width The width of the splash window
height The height of the splash window
left The left position. If this is left out or null the window is centered.
top The top position. If this is left out or null the window is centered.
autoCloseTime This is the time before the window should be automatically closed. If this is omitted, null or 0 the window will not close by itself.

Below is a button that opens a window with a string argument. The size has been set to 100 x 100 and it has been set to auto close after 5 seconds.

launchSplashWin("string", str, 210, 100, null, null, 10000)

You can also open another page by providing an URI. This page should look and behave exactly the same.

launchSplashWin("uri", "splashtest.html", 210, 100, null, null, 10000)

Finally we'll open the string variant in the lower right corner without an autoclose. Due to the fact that a window can't be displayed on top of the task bar this has been moved 30px up from the lower edge.

launchSplashWin("string", str, 210, 100, window.screen.width - 210, window.screen.height - 100 - 30)

Warning!

If you forget to include a close mechanism for your window press cntrl + alt + delete and select the splash window in the task list and press end task to close it.