Download floating window with tabs

Demo | Demo 2

Bookmark and Share

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:

  1. "window1" = The ID of the window div.
  2. Array('Info','More info','The end') = An array with the name of the tabs. Use false if you don't want any tabs.
  3. 200 = Initial height of the window. Use false if you want the height to adjust to the content. Note that this value could be
  4. 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
  5. 50 = Initial left position of the window - A cookie could override this value
  6. 50 = Initial top position of the window - A cookie could override this value
  7. true = No scrollbars - If you don't want the be able to scroll the content of the windows. Usually, you put in false here.
  8. false = No resize handle - The user will not be able to resize the window
  9. false = No status bar - There will be no status bar at the bottom of the window
  10. true = No close button - There will be no close button at the top right corner of the window
  11. false = Show minimize/maximize button at the top right corner of the window.
  12. 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

Comments

Kevin Loring
Is it possible to create a hyperlink to a specific tab? Or reopen a tab that has been closed? Can you post an example?
Kevin Loring at 04:05PM, 2011/04/19.
noname
very nice!
noname at 11:11PM, 2011/07/24.
UsualSuspect
This is so much Greek to me. I'm thinking I'm not alone in that...lol.
Is resizing & floating one tabbed window beside another open one so difficult a thing to do in XP?

Is there a "Scipts for Dummies" article online? heh

I'm admiring of people who know how to do things like this :)
UsualSuspect at 05:51AM, 2011/08/15.
João
Can I start the windows minimized ? How I include asp pages in the tabs, only with the "html include tag" ? there is another way ?
João at 03:13PM, 2011/10/07.
Rónai Gábor
Great script but it does not seem to work in IE. And, yes, how to reopen a window?
Rónai Gábor at 10:38PM, 2011/11/28.
Manoj Kumar
I love dhtmlgoodies.com
Manoj Kumar at 08:56AM, 2012/03/03.
jason
Thanks for give the download links, I really need it immediately. thanks
jason at 03:22AM, 2012/07/18.
darknroses
<a href="#comment379">Kevin Loring wrote:</a>
Is it possible to create a hyperlink to a specific tab? Or reopen a tab that has been closed? Can you post an example?


this is my solution solution:

Iv created a new function based on the showHideWindowTab()and replaced 'this' with a var 'k'

than I call my function with onClick=" activtab(floatingWindowTab2)" 2= the index of the tab

and here the complete function


function activtab(k)
{
var parentEl = k.parentNode;
if(!activeFloatingWindow)activeFloatingWindow = parentEl.parentNode;
var windowIndex = parentEl.parentNode.id.replace(/[^\d]/g,'');
var subDiv = parentEl.getElementsByTagName('DIV')[0];

//alert(subDiv.id);
counter=0;
var contentDiv = contentDivs[windowIndex][0];

var tabFound = false;

do{
if(subDiv.tagName=='DIV' && subDiv.className!='floatingWindowCloseButton'){
if(!tabFound)zIndex = counter;else zIndex = 100-counter;
if(subDiv!=k){
subDiv.className = 'floatingWindowTab_inactive';
var img = subDiv.getElementsByTagName('IMG')[0];
img.src = tabRightInActive
subDiv.style.zIndex = zIndex;
contentDiv.style.display='none';
}else{
k.className='floatingWindowTab_active';
k.style.zIndex = 500;
var img = k.getElementsByTagName('IMG')[0];
img.src = tabRightActive;
if(floatingWindowStates[activeFloatingWindow.id.replace(/[^0-9]/gi,'')])
contentDiv.style.display=floatingWindowStates[activeFloatingWindow.id.replace(/[^0-9]/gi,'')];
else
contentDiv.style.display='block'

tabFound = true;
Set_Cookie('floating_window_activeTab' + windowIndex,counter,100);
}
counter++;
}
subDiv = subDiv.nextSibling;
if(contentDiv.nextSibling)contentDiv = contentDiv.nextSibling;
}while(subDiv);


}


hope it helps ;)
darknroses at 08:38PM, 2012/11/04.
Ren
How to put the tabs at the bottom? Can someone help me please? thanks!
Ren at 10:14AM, 2012/11/26.
Andras
Hi ALf,
Your scripts are really very versatile, I have just changed my tabs script to yours (menu and gallery scripts were from you already). I can embed new a set of tabs below a tab, insert a 2011-style gallery into each tab if I want to, very appreciated and thank you!
Andras
Andras at 10:52AM, 2013/01/10.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com