DHTML Window with Tab Support

DHTML Window with Tab Support – AJAX Script

(No Ratings Yet)

Loading ...

167 views

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 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(

) which contains 3 inner divs(

). The parent div isthe 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.

Demo: http://www.dhtmlgoodies.com/scripts/floating_window_with_tabs/floating_window_with_tabs-skin2.html
Download: http://www.dhtmlgoodies.com/scripts/floating_window_with_tabs/dhtmlgoodies_floating_window_tabs.zip
Source: http://www.dhtmlgoodies.com/scripts/floating_window_with_tabs/floating_window_with_tabs-skin2.html

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

Floating Window With Tabs This is a cross browser DHTML window script with support...
DHTML Rounded Corners Configuration Include files First, you need to include the js...
DHTML goodies Tab Control Files in package * tab-view.html = Main html file *...
Light Window : Single Modal Window Another implementation of single modal window. It uses iframes which...
Prototype window login form Here is a simple tutorial to demonstrate the use of...