TABLES AND LAYOUTS

Horizontal / Vertical Tabs

The Horizontal / Vertical Tabs is mechanism for structuring content in a table with tabs (uses DIVs). Each tab has title and content. When certain tab is selected, its content is displayed. Each tab can have two states - selected and unselected. You can insert horizontal or vertical tabs.

Tabs Properties

Use the Settings button to open tab table attributes and to modify them. There are four tabs with settings.

Container defines the area that holds the whole tab table. Page defines the area that holds content of the selected tab. Tab defines the tab area. Active Tab defines the selected tab area.

When you change settings, press the Refresh button to see the result in the Preview area.

If you want to load predefined settings or save current settings and use them later for another object, use the Presets option (at the top left corner). For more information see Presets.

Container

Main

• ID (edit box) - This attribute assigns a name to the tab table. This name must be unique in a page.
• Title (edit box) - This attribute offers advisory information about the tab table.
• Tag Attributes (edit box) - Use this edit box if you need to define any additional custom attributes for the tab table (Advanced users only).

Background

Sets background for the tab table container. For more information see Background Properties.

Padding

Sets padding for the tab table container. For more information see Padding Properties.

Border

Sets borders for the tab table container. For more information see Border Properties.

Border Radius

The border-radius property allows you to easily utilise rounder corners to the tab table container. For more information see Border Radius.

Additional

• Overflow (drop-down menu) - This attribute specifies whether the content of the tab table is clipped when it overflows the element's box (which is acting as a containing block for the content). Values have the following meanings:

Visible - This value indicates that content is not clipped, i.e., it may be rendered outside the tab table box. Hidden - This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content. Scroll - This value indicates that the content is clipped and that if the user agent uses scrolling mechanism that is visible on the screen (such as a scroll bar), that mechanism should be displayed for the tab table whether or not any of its content is clipped. Auto - The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing tab tables.

• Opacity (number selection box) - This attribute will set blending effect for the content of the tab table.
• Direction (drop-down menu) - This property should be set to match the direction of the text. Change default value if you use Hebrew or Arabic.

Animation

• Enable (check box) - With this option you can enable nice animation effect when content appears.
• Autoplay (check box) - With this option checked tabs will be changed automatically.
• Effect Duration (number selection box) - Sets the duration time of the animation effect.
• Tab Change Delay (number selection box) - Sets in what intervals will tabs change if Autoplay is checked.
• Stop Animation On (drop-down menu) - Sets when the animation will stop - on click or on mouseover.
• Parameters (edit box) - Use this box to add extra parameters (for advanced users only).

Page

Position/Size

• Width (edit box) - Sets width for the page area - the area that holds content.
• Height (edit box) - Sets height for the page area.

Width and height are set in px as default. In case you need to set them in %, make sure to include % sign.

• Top Margin (edit box) - Sets space between the page area and the tabs.

Page Background

Sets background for the page area. For more information see Background Properties.

Page Area Padding

Sets padding for the the page area. For more information see Padding Properties.

Page Area Border

Sets borders for the the page area. For more information see Border Properties.

Border Radius

The border-radius property allows you to easily utilise rounder corners to the tab table page area. For more information see Border Radius.

Tabs Area Margins

Sets tabs area margins. For more information see Margins Properties.

Tab / Active Tab

Note that if you use background image for tabs, tab is actually created with two images. Check on the image below:

Size (available for TAB only)

• Width(edit box) - Sets width for the non-active tabs.
• Height (edit box) - Sets height for the non-active tabs.

Background

Sets background for the tabs area. For more information see Background Properties.

Left Background (available for horizontal tab tables only)

• Left-padding (edit box) - Sets left padding. (available for TAB only).
• Background Image (edit box and button) - This attribute will set background image for the Div column.
• Position (drop-down menu) - This property gives the initial position of the specified background image.

Padding

Sets padding for the tabs area. For more information see Padding Properties.

Margins

Sets margins. for the tabs area For more information see Margins Properties.

Font (available for horizontal tab tables only)

• Font (drop-down menu box) - Sets the font used to render the text.
• Font Size (drop-down menu box) - Sets the font size used to render the text.
• Font Color (color picker and preview) - Use the color picker to set the text color.
• Font Wight (color picker and preview) - Use this drop-down menu if you need to set the text in bold.
• Line Height (drop-down menu) - This property sets the distance between lines. Check the box and set specific height if you need to set line height different than the default one.
• Letter-spacing (check box) - Sets spacing between letters.
• Decoration (drop-down menu) - Use this option to set the text Underlined or with Line-through.
• Variant (drop-down menu) - Select small-caps option, in case you need the text to be fixed with small-caps.
• Text -Transform (drop-down menu) - Use this option to fast transform menu text to Uppercase, Lowercase or Capitalized. None is set as default.
• Text -Align (drop-down menu) - Sets text alignment.

Border

Sets borders for the tabs area. For more information see Border Properties.

How to automatically open certain tab when page loads?

To automatically open certain tab in a multi-tab table, open Page Settings panel, Scripts/Page Background tab, Body Tag property and type:

onload="sActive('t',X);", where X is the tab number (1, 2, 3..).

To select random tab use: onload="sActive('t',Math.floor(Math.random()*Y+1));", where Y is total number of tabs.