Click here to Skip to main content
Click here to Skip to main content

FTab (Floating Tabs)

, 29 Sep 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
FTab (Floating Tabs) is a cool cross browser DHTML floating window script with support for tabs.


FTab (Floating Tabs) is a COOL cross browser DHTML floating window script with support for tabs. The floating window can move/resize/minimize/maximize/fixed/show modal, and the states(size/positions/minimized/maximized or others) can save to cookie. It's so easy to configure that you only need put your content into separate tabs and then call:

FTab('ftab1',left, top, width, height, style)

A COOL floating window with tabs will be shown! You can also create a window without floating. Open the example page to see how COOL FTab is!
Supports a wide variety of browsers such as Internet Explorer, Opera, Firefox, Google Chrome and Safari.

Using the Code

A simple code is shown here. For full features, see the demo page.

  1. Add this in the head:
    <link rel="stylesheet" href="ftab.css">
    <script type="text/javascript" src="ftab.js"></script>
  2. Add contents in the body:
    <!-- FTabMain START --> 
    <div id="ftab1" title="ftab1's title" style="display:none;"> 
    <!-- FTabPage START --> 
    <div title="Page1"> 
    <!-- FTabPage END --> 
    <!-- FTabPage START --> 
    <div title="Page1"> 
    <!-- FTabPage END --> 
    <!-- FTabMain END --> 
  3. After contents, add JavaScript to initialize FTab:
    <script type="text/javascript"> 

Points of Interest

  1. Params for initializing FTab:
    function FTab(tabID, left, top, width, height, style, showPageIndex)

    can be used like: (notice no 'new' as var o = new FTab(...), but no errors even if you use 'new'.)

    var o = FTab(tabID,10,10,200,160, 

    As options, here are all (1 for default true):


    It can also be like this:


    When creating FTab, you need these params (left, top, and others), but next time, you only need tabID to refer to FTab.
    For styles, default of all params is 1. If no title(titleBlush | :O ), then no close and minmax buttons even set them as 1, and also no moving. If there is no status (statusBlush | :O ), then there is no resize.
    If set 'expandable:1;' (default is 0), then auto set this style:

    noTitle = false;
    noResize = true;
    noMinMax = true;
    noClose = true;
    noMove = true;
    noStatus = true;
    noFixed = true;
    modal = false;
    center = false;
  2. After initializing, you can use these functions:
    function show(pageIndex);
    function switchMinMax();
    function switchFixed();
    function hide();
    function setTitle(str);
    function setTabTitle(pageIndex, str);
    function setBody(pageIndex, str);
    function setURL(pageIndex, url);
    function setStatus(str);
    function getSelectedIndex();
    function isHide();
    function isMin();
    function isFixed();
    function move(left, top, width, height);
  3. Support for user's event:
    Here you can do something if you like.
    FTabs.OnPageShow = function(ftab,index) 
      window.status='FTab_OnPageShow,window:' + ', 
    	index:' + index + ' is shown.'; 
    FTabs.OnActing = function(ftab) 
      window.status='FTab_OnActing,window:' + '.'; 
    FTabs.OnDeActing = function(ftab) 
      window.status='FTab_OnDeActing,window:' + '.'; 
    FTabs.OnMinMax = function(ftab, isMin) 
      window.status='FTab_OnMinMax,window:' + ', isMin:' + isMin; 
    FTabs.OnHide = function(ftab) 
      window.status='FTab_OnHide,window:' + '.'; 

Extend Style

  • Customized for user
  • Can set other colors or styles

Click "ExtStyle" buttons in the example page.


  • First released on 2008/07/08
  • Updated on 2008/8/22 - Added expandable style
  • Updated on 2009/6/07 - JS source is compressed added to only 11 KB!
  • Updated on 2009/6/21 - Added fixed and modal dialog features.

For details, visit last version & demo.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
China China
From china, and location at japan.

Comments and Discussions

GeneralGreat work!!! Pinmemberliquizing17-Nov-12 4:25 
GeneralRe: Great work!!! Pinmemberuuware15-May-13 21:08 
BugProblems about cookies PinmemberMember 93297782-Aug-12 0:26 
GeneralRe: Problems about cookies Pinmemberuuware5-Aug-12 5:21 
GeneralRe: Problems about cookies PinmemberMember 93297785-Aug-12 23:24 
GeneralMy vote of 5 Pinmemberonurag1920-May-12 3:41 
GeneralMy vote of 5 PinmemberMd. Touhidul Alam Shuvo22-Jun-11 0:35 
GeneralDemo PinmemberJohnny J.30-Sep-09 21:32 
GeneralRe: Demo Pinmemberuuware1-Oct-09 15:56 
GeneralRe: Demo PinmemberJohnny J.1-Oct-09 20:04 
GeneralRe: Demo Pinmemberuuware1-Oct-09 20:25 
GeneralRe: Demo Pinmemberac-chan9-Oct-09 12:48 
GeneralRe: Demo Pinmemberuuware12-Oct-09 15:47 
GeneralVery Nice Work PinmvpAbhijit Jana29-Sep-09 11:53 
JokeRe: Very Nice Work [modified] Pinmemberuuware29-Sep-09 15:40 
GeneralOf browser compatibility ... PinmemberMember 33441294-Jul-09 4:45 
GeneralRe: Of browser compatibility ... Pinmemberuuware5-Jul-09 16:20 
It's so reasonable that I cannot refuse you even I no plan for put it work with Opera.
I modified it,only one word,now it work with Opera.
Also I tested it with Chrome,every thing seems fine.
Now I should say:
It has been tested on IE5.5, IE6, IE7, Firefox2, and Firefox3, Opera 9.6, Chrome 2.0, Safari 4.0.
(should download from link of:Last version & demo page)
GeneralRe: Of browser compatibility ... PinmemberMember 33441296-Jul-09 1:10 
GeneralRe: Of browser compatibility ... Pinmemberuuware6-Jul-09 1:37 
GeneralRe: Of browser compatibility ... PinmemberMember 33441296-Jul-09 14:30 
GeneralRe: Of browser compatibility ... Pinmemberuuware6-Jul-09 15:46 
GeneralBrowser Back Button Pinmembercwlocke25-Jun-09 11:08 
GeneralRe: Browser Back Button Pinmemberuuware30-Jun-09 19:01 
GeneralVery nice PinmemberJimmiepotter24-Jun-09 9:30 
JokeRe: Very nice Pinmemberuuware24-Jun-09 12:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150414.1 | Last Updated 29 Sep 2009
Article Copyright 2009 by uuware
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid