copyright 2008-2015 © www.isdntek.com
1. Fill out the index cards below.
Put a very short caption in the tab top and put your content (text or HTML) into the larger box.
Cards with empty tab tops will be ignored.
Hint: use <br><br> to display a blank line in the text.
2. Style your index cards. Click on the color palette to choose a base color for the cards. Use the vertical column to select lighter or darker shades. All of the complementary colors will be calculated and applied. You will have access to all of these colors in the code, where you can change them if necessary.
|
Flex Tab Shapes
|
||
|
flexible zone
Width: Click ruler to set width or click flexible width.
Height:Tab Content Height
Multiple sets in one page
| ||
3. Preview your index cards.
4. Copy your code below and paste it into the HTML view of your editor.
You may edit the above code and use the popup preview to see the effect. However, if you click a new tab style or color in section 2 or 3, the code in the window will be rewritten and your editing will be lost.
This code provides both tab hover-states and tab click-states, independently of each other.
The hover state will change the tab caption color and the click state will change the background color and content below the tab top.
Both of these effects are triggered in the anchor tag that surrounds the tab top.
There are no images associated with these flexible tabs.
The tabs are laid out to display all contents if the user doesn't have javascript running.
But if javascript is present, the tabs are rewritten with corner details that simulate using an image for the tab.
This makes the index cards truly portable because there are no images to move or be concerned with.
This method also has a color that can be set to match the page background behind the index cards.
The tab caption is written in HTML to remove any limitation on the tab names,
but the captions should remain rather short so that your tabs will all fit.
You may change the font styles and sizes within the stylesheet.
To Change Sizes:
The index card width will expand to fit the space where it is pasted. If you would like to limit the width,
then change the width in the very first "tabHolder" table from 100% to your desired dimension, like 600.
Be sure your tab names all fit within your alloted width. Also note that your scrolled content will affect the
width if it is wider than the dimension you have set.
If you would like to change the default height
of the scrolled content, then look for div#tabterms { height:150px; ...
near the top of the code and change 150 to a different height.
Javascript opens and closes content and changes the background color of the tabs.
The sequential numbering in the content sections at the bottom must match the corresponding tab numbers above.
The code is constructed to make it easy to add or delete tabs in the code as necessary.
All of the colors are set near the top of the code, and can be changed as needed.
The colors are set for Javascript and changing those colors within the stylesheet will have no effect.
To use multiple sets in one page:
There is a checkbox on the ruler that will add an index to each tab group that you make.
If you want to use more that one set in a page, then checkmark that option to set the index prior to making your code.
courtesy of eBay user shipscript
copyright 2008-2015 © www.isdntek.com