New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download floating window with tabs
Download
You can download the entire script including images from this zip file
Configuration
You need to include one css file and one javascript file in the HTML file(s) where you want the windows. This is done with the following lines:
<link rel="stylesheet" href="floating_window_with_tabs.css" media="screen">
<script type="text/javascript" src="floating_window_with_tabs.js"></script>
Put them betweeen your &lT;HEAD> and </HEAD> tag. Make sure that the path to the files is correct.
The script is easy to set implement. The content of the windows is plain HTML and the window is created by calling one single javascript function. This is
an example of the HTML for a window:
<div id="window1">
<div class="floatingWindowContent">
This script has been tested in IE, Firefox and Opera. Unfortunately, Opera doesn't support overflow in the same extent as
IE and firefox, so there you will find both a horizontal and vertical scrollbar. I found that to be better than no scrollbars at all.
</div>
<div class="floatingWindowContent">
Content 2
</div>
<div class="floatingWindowContent">
Content 3
</div>
</div>
As you can see, there is one parent div(<div id="window2">) which contains 3 inner divs(<div class="floatingWindowContent">). The parent div is the window div. It's important that the id("window1") of this div is unique, i.e. no other elements with the same id. The three inner divs represents the content of 3 tabs. Such divs should always be written as in this example. Put the HTML content of the tab between the start- and end tag of these divs.
The last thing you have to do is to create the window by calling this javascript function:
initFloatingWindowWithTabs('window1',Array('Info','More info','The end'),200,220,50,50,true,false,false,true,false,false);
This function accepts alot of arguments. Here is a description of each of them:
- "window1" = The ID of the window div.
- Array('Info','More info','The end') = An array with the name of the tabs. Use false if you don't want any tabs.
- 200 = Initial height of the window. Use false if you want the height to adjust to the content. Note that this value could be
- 220 = Initial width of the window. Use 0 if you want the width to be set automatically. overridden by the width saved in the cookie
- 50 = Initial left position of the window - A cookie could override this value
- 50 = Initial top position of the window - A cookie could override this value
- true = No scrollbars - If you don't want the be able to scroll the content of the windows. Usually, you put in false here.
- false = No resize handle - The user will not be able to resize the window
- false = No status bar - There will be no status bar at the bottom of the window
- true = No close button - There will be no close button at the top right corner of the window
- false = Show minimize/maximize button at the top right corner of the window.
- false = No move - false if you want to be able to move the window, true otherwise.
For further information, look how it is done in the floating_window_with_tabs.html file.
Changing skin
You can switch between skins by changing a Javascript variable and by changing CSS reference.
The Javascript variable is located in the <HEAD> section of the main .html file:
<script type="text/javascript">
var floating_window_skin = 2;
</script>
The second skin is defined in the floating_window_with_tabs-skin2.css file. You specify reference to it like this:
<link rel="stylesheet" id="cssRef" href="floating_window_with_tabs-skin2.css" media="screen">
Update log
- December 12th, 2006: Added support for minimize, maximize buttons. Also improved the animations of resize and move
No one has commented this - be first!
Post your comment
Comment preview: