- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
Download floating window with tabs
You can download the entire script including images from this zip file
<link rel="stylesheet" href="floating_window_with_tabs.css" media="screen">
Put them betweeen your &lT;HEAD> and </HEAD> tag. Make sure that the path to the files is correct.
an example of the HTML for a window:
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.
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.
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.
var floating_window_skin = 2;
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">
- December 12th, 2006: Added support for minimize, maximize buttons. Also improved the animations of resize and move