Tabs control - All in One Screen

Tabs control -
All in One Screen

A Tabs control is providing a very user-friendly way to present any mass of information, without making the users feel overwhelmed. All parts of information are "pull", no information is "pushed" upon them. (Well, to be exact: By clever writing, in the opening screen you can entice them to enter further into the other parts of information.) For example, take this article: There is no scroll bar on the screen. (At least, if your browser is set to 1024 x 768 and smaller letter size.) When you open any of those tabs, you will hardly ever see a scroll bar. How much information is hidden behind the tabs, you can see when you click the button "OpenAll" above. To resume normal tab-wise display, click "CloseAll" and the tab you want to see then. So it's fully within your reader's discretion what they want to see on the screen. This will already make them feel more comfortable. By clever structuring and writing of your information you can "lure" them into wanting to read more. It's up to you whether to offer your readers a way also to display all information at once, e.g. for printing or for searching in the browser. As always, let me ask you: Please do spy on the source code! You might sometimes wonder if a demo was really implemented as said or if there was any trick at the bottom of it. To do that, you are explicitly asked to right-click anywhere on the client area of your browser and to click "View Source" in the context menu. By clicking any of the gray tabs above you can read about the different aspects of using a Tabs control. All tabs are labeled by a one-word title. If you can make no sense of a title, move the cursor onto the tab and have it rest there for about ½ second - then a pop-up title will appear giving you a brief description of what you can expect when clicking that tab. On some of the following tabs you will find a colored list. Click on the list item you want to know more about. This item will jump to the top, the other list items will be removed, and the information associated with this item will be displayed. To return to the full list, click on the (now sole) item again.
If you want to know more about the concept of the Tabs control, click here. The idea of a Tabs control is nothing new. Implemented in form of "Server-side Includes" (SSI) you can find them on many web sites. Yet, what's new about the Tabs control as presented here is that here you have what could be called "Client-side Includes": Javascript functions for generating the HTML objects making up the tabs row and for implementing the handler function. These functions are downloaded to your readers' computer at begin of session. Once downloaded, they are available immediately, even if the readers go offline afterwards. That makes a significant difference: SSI-Tabs are available only while the readers are connected to the server. Each time a tab is clicked (i.e. another Contents is to be displayed), that other Contents must be downloaded again. So, a reader soon becomes hesitant to click another tab, incurring another delay for loading the information associated with it. Thus the readers rather tend to miss out on some information, simply for not risking another delay. True, there is also some load time involved with a CSI-Tab control. However, there is an easy way to hide a good part of it (see Tip 3).

User Handling

If the relevant contents are not on screen already, the users simply should click on the tab most interesting. If the Tabs control is set up correctly, they have to do nothing else. If the label of a Tab is not so telling, a user should move the cursor onto it and wait with clicking. The online-communicator might have provided a pop-up title becoming visible when the cursor is resting on the tab. In case the users want to print out the article, or if they want to use the browser's Search feature (CTRL-F), it is easy to display all the hidden information, if a button "OpenAll" is provided in the article. When the printing or searching is done, the usual presentation in single pages can be resumed by clicking button "CloseAll". If there is a choice among many tabs, the Tabs control might have been laid out by different background colors of each tab and the associated contents. Different background colors are useful also if there are more tabs than can be accommodated in one line. So the tabs are wrapped down to the next row, ending up in an array of tabs. Therefore some tabs will not be adjacent to the associated information. Then it might help the users to have an intuitive association by identical background colors of tab and associated contents. If there is more information than could be accommodated in one tab's contents, there might be a list of sub-items, like the following. Click the item you want to know about:

Opening a List Item

Simply click onto the colored list item. It will jump to the top of page, all the other list items will be removed. The information associated with the clicked item will be displayed. The "+"-symbol at the right of the list item turns to "-" (to indicate that the associated information is displayed now).
Closing an opened List Item

Click once more onto the colored list item (now at top-left of the page, the sole list item being displayed). The associated information will be removed, the complete list will be restored, the "-"-symbol at the right of the list item turns to "+" again. Now another list item can be clicked (or even the same one, to open it again).
Opening/Closing all List Items

If the list is equipped with a button "Open All", click it. All the list items will be displayed one beneath the other, the button will change to "Close All". Clicking this button will restore the list, hiding each associated information.

Best HTML Environment for a Tabs control

coding scheme
```
<SCRIPT>Tabs(tab1 … </SCRIPT>

<DIV CLASS="Cont" STYLE="display:none">
       :
  (contents associated with  tab1 )
       :
</DIV>

       :
 (as many Cont's as tab's)
       :

<DIV CLASS="Cont" STYLE="display:none">
       :
  (contents associated with last  tab )
       :
</DIV>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
```
The number of tabs should be the same as the number of contents you plan to bundle in that Tabs control. Then all contents will be associated with the corresponding tab: the first "Cont" with the first tab, the second "Cont" with the second tab, etc. - up to the last "Cont".

Should their number be different - when a tab is selected that is not associated with a "Cont", a warning sound can be heard.

Each "Cont" can hold any HTML code you like - including another Tabs control (nested Tabs).

When the user clicks a tab, the associated contents are displayed, the contents displayed formerly are hidden.

Calling function Tabs()

or

<SCRIPT>options = " … "; Tabs(tab1[|tab2…])</SCRIPT>

tab1[|tab2…]

Series of strings or string variables. If more than one tab, they should be separated by a comma (,). Any number of tabs can be provided for. Each tab can be plain text or any HTML code you like. If there are more tabs than can be arranged horizontally, the tab row is wrapped to a row beneath. A Tabs control can handle contents of any size. Though it will make sense if you breakdown all of your information such that each part can be accommodated in a 1-screen-contents. If necessary, you can use other layout elements of Online Communication as well (e.g. Dynamic Lists)

options

String with any number of options, separated by at least one whitespace. All options are of the form keyword=value . If the value is to hold a whitespace, it needs to be enclosed in quotes: keyword='value' or keyword="value" If the opening quote is a single quote ('), the following single quote is taken to be the closing quote. The same holds true for double quotes ("). In the default calling (upper coding scheme) the tabs are arranged in a horizontal-top-left row. See Arrangement Options what other arrangements are available. Apart from arrangement some other details can be modified as well.

Options

Currently the following options are available for a Tabs control:

Arrangement Options

Layout Options

Other Options

Style

In HTML, an object's style can be declared in three ways:

1. Global Style Sheet

The object to be styled is declared with attribute
CLASS="classname"

In an external file with extension .css a style sheet is coded:
<STYLE> 
</STYLE>

The browser will automatically assign the respective style to the object (given by classname ).

Note: If the Contents associated with a tab has any background color other than white, the respective tab has the same background color, while it is active. This is working only with an inline style declaration - with a global style sheet it remains white.
2. Local Style Sheet

The object to be styled is declared with attribute
CLASS="classname"

Before the </HEAD>-tag of the HTML document a style sheet is coded:

<STYLE> 
</STYLE>

Tabbing

A Tabs control is meant for tab-selecting by the user, simply by clicking a tab = having the associated Contents appear on screen. Sometimes, however, you will want to select a tab by your coding.

You can do that by calling function handleTab() with one parameter, the identifier of the tab to be selected.

Then however, the Tabs control must have been called with option id=… (see other options).

Here you have an example of tabbing (= selecting a tab) by a pseudo-link. It is coded as follows (but remember):

<A HREF="#" ONCLICK="return handleTab(tabs5)" STYLE="…">Options</A>

Initializing

In order to have a perfect Tabs layout right when it comes up on screen, each Tabs control must be initialized. You can do that by calling function handleTab() by an attribute in the BODY-tag of your HTML document:

Call the function with 1 parameter, the id of the tab to come up with. For details see Tabbing.

Tips

The following tips might help you towards most efficient coding of a Tabs control:

Block tags left open

A frequent source of errors is to have a block tag opened before calling Tabs, but not closed before. While this is irrelevant for the normal browser operations, it might have its effect in Tabs. For example, you might have opened a FONT-tag (deliberately not closing it!) right before the first line of your document. Thus you have changed all your BODY-font, Ok. However, it's distorting the positioning of Cont's done in function handleTab() .

Better you do it by a STYLE attribute in your BODY-tag, e.g.:

<BODY STYLE="font-family:sans-serif">
Contents covering the following text
It's tempting to write the following text right after the call of
the Tabs function. Then, however, it will be covered by the Cont area, and you might worry how it was lost. Instead, you should insert a series of line breaks between the last Cont in your HTML-document, before the text you want to appear past the Tabs:
```
<DIV CLASS="Cont">
       :
</DIV>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>


(text to follow)
```
Init to tab 1, if possible!
You will want to make the user forget about the loading time (see article Make Your Visitor forget about Loading Time!). To that end, it is a good idea to always initialize on the first tab. Then, while the browser is still loading all the stuff of the other tabs, your users have all the information of the first tab on screen already. So they have something to read and don't care about the fact that the browser is still loading. Later, when clicking another tab, its contents are already loaded - they are on screen instantaneously.
Many tabs: try vertical tab row!
If you have a complex subject that falls into many categories, you need a great number of tabs (>8 or so). Then you have two ways of arrangement:
1. Horizontal arrangement, with the tab row wrapping down to the next row. So you end up with an array of tabs. The Tabs control can handle that, but it might be unfamiliar to your users.
  (Though the Tabs control is avoiding the muddle you will know from standard Windows Tabs: tabs always remain at the same position, the association to the contents is reflected by the background color, at least by white background.)
2. Or, if you can name all categories by 1 or 2 words - try a vertical arrangement: Use the option Vertical . (It's a matter of taste, whether it should be right or not, and bottom or not.)
  For vertical arrangement, option tabwidth=… could be useful.
Very complex Tabs control: use explicit association!

By default, a Tabs control finds the Contents associated with a tab simply by scanning through the all collection of objects in the HTML document. (That's called "implicit association".) Normally this works fine, even nested Tabs controls can be handled that way if the inner Tabs is embedded within the last Contents of the outer Tabs.
If, however, you want nesting within the first tabs, you might get into trouble. Then you'll need "explicit association": use the option cont=… to establish an association between Tabs and Contents (see other options).
Referring to information on other tabs
A great strength of Online Communication is that you cannot only mention something that was described in detail somewhere else (hoping that your readers will remember and look back if they want to know more about it). You can also offer the readers an easy way to get back: just make it a "hyperlink"! The easiest way to do that is as follows:
- At the place you want to refer to, code a bookmark to the subject:
  <A NAME="…"> … (subject) … </A>
- Enclose it in tags as follows:
  <A href="#…" …> … (matter to be referred to) … </A>
If the information you want to refer to be within another Contents, you can refer to it by a pseudo-link calling the tabs handler function with the id of the tab associated to your tab's contents as parameter. For example, if we needed a reference to the Options tab, we could do that by a hyperlink linking nowhere but calling the handler function:

<A HREF="#" ONCLICK="return handleTab(tabs5)">Options</A>
If you want to refer not only to a whole tab but to a specific information there, you can even combine that. Say, it was coded as a Dynamic List. Then you could refer e.g. to the point Global Style Sheet by a pseudo-link
<A HREF="#" ONCLICK="handleDynList(style1); return handleTab(tabs6)">Options</A>
Consider using global style sheet!
If you have several HTML-documents, you will want them to have a consistent layout. A good way to have that is
- Build a global style sheet (i.e. style declarations enclosed in tags <STYLE> … </STYLE> , stored in an extra file whose name has extension .css )
- In any of your HTML-documents, link this global style sheet by a code line
  <LINK REL=stylesheet HREF="….css"> ( ….css being the name of the .css-file in which you stored it before)
Thus you have three advantages:
1. All your documents will automatically have a similar layout, without you wasting a minute on it
2. If you need local modifications, you can still override the global style sheet by a local one, or by inline style declarations (see Style)
3. If you can anticipate style modifications over all your HTML-documents now and then - changing the style declarations in the global style sheet changes the styles in all your HTML-documents which it is linked to!
Use option titles= to provide tabs descriptions!

The individual tab labels should be short, possibly one word only. You can make it user-friendlier if you provide a TITLE to each tab. That's a pop-up window coming up on screen when the user moves the cursor onto a tab and has it rest there for about ½ When the cursor is moved away or when the tab is clicked, it's being closed again. You can use the option titles= to provide a brief description of what the tabs are about (see Arrangement Options)
Use option openall for ease of searching and printing out!

The Tabs control is a very useful tool for compact presentation of masses of data, all within one screen only. Yet there are some instances when your readers will want to have all the information on screen temporarily, e.g. for searching any keyword (keys: CTRL-F) or for printing out all your information (keys: CTRL-P). And, after all, at one point you will want to have it all on screen, too: when you are finished with writing and want to copy your text to spell-checking.

You can provide an easy way to do that, simply by setting option openall before calling function Tabs() .

Due to this option, an image "OpenAll" on green background is created. When a reader clicks on this image, the full information is expanded and the image turns to "CloseAll" on red background. Clicking on it removes all the Contents, leaving the tabs only. By clicking on any tab, the usual tab-wise presentation can be resumed.

You can get a hands-own experience: Look at the tab row above, after the last tab. When you click on the green button there, all information of this article will be expanded. You can see it by watching the scroll bar at the right screen edge. Then it turns to a red switch. Clicking on it removes all the information, leaving only the tabs on screen. Then you should simply click the tab you are interested in next.
You should write a Heading to each Contents
It's a good idea to write a title to each Contents (= the information associated with a tab):
- The tab text is short, usually one word only. By the title you can give to your readers a slightly more elaborate indication as to what to expect.
- When all the information is expanded and printed on paper, it will be hard to tell all the Contents apart if they are not clearly titled.
In your HTML, all temporary information should be declared CLASS="TempInfo" !

Temporary information is a major part of the Tabs control concept. That is information which is hidden most of the time. Not before the reader clicks the "anchor" (such as the line above: "In your HTML, …") the associated information is displayed temporarily whereas all the surrounding information is hidden, thus always occupying not more than one screen.

An example of temporary information you have right before your eyes currently!

When the reader clicks the "anchor" once more, the temporarily displayed information is hidden again, the surrounding information is restored.

When you have such an information, you should always declare it

CLASS="TempInfo"

Currently this is needed only to hide all temporary information when the "CloseAll" button is clicked. Future developments will assume that all temporary information is declared this way, and will use it for its handling.

So, you can be rather on the safe side if you exert some discipline now already!
Consider tab Contents with different background colors!

If you have many tabs, perhaps even in several tab rows, it might be helpful to your readers if you present the associated information ("Contents") on different background colors. Once a tab has been clicked, i.e. the Contents has been opened, the pertaining tab will be set to the same background color, even when another tab is clicked afterwards.

This color could prove a good help to your readers for memorizing a tab: "What I would like to see now, I remember having seen on … background already. So I should click now the tab with the same background color!"

Requirements

Hardware Requirements
In order to make full use of the Tabs control, you should be sure of the following hardware at your users':
- Keyboard:
  Most of the Custom Inputs require keyboard typing.
  Will all your users have a keyboard?
- Mouse:
  All of the Custom Inputs are designed for mouse input.
  Will all your users have a mouse?
- Monitor - Colors, Screen Resolution:
  Some of the Custom Inputs assume multichrome monitors.
  Will all your users have a multichrome monitor?
  In general, you should be aware of the monitors' size and screen resolution. What will they be at your users'?
Browser Requirements

Tabs controls are applicable under IE browsers only.
Be sure, all your users will have an IE browser!
Software Requirements

Anywhere in your HTML-file, before the first call of a Tabs control, you should have the following two lines:

<SCRIPT SRC="OnlineComm.js"></SCRIPT>
<LINK REL=stylesheet HREF="OnlineComm.css">

Of course, you should make sure that the Javascript-Files OnlineComm.js and OnlineComm.css really are in the current working directory on your server. If not, you might have to alter the path, e.g.

<SCRIPT SRC="../JS/OnlineComm.js"></SCRIPT>
<SCRIPT SRC="../CSS/OnlineComm.css"></SCRIPT>
Calling Requirements

A Tabs control can be implemented by calling it in <SCRIPT>-brackets, i.e.

<SCRIPT>Tabs( … )</SCRIPT>

If you want to use options, they must be assigned to before calling Tabs and must be separated by a semicolon - e.g.

<SCRIPT>options = " … ";
Tabs( … )</SCRIPT>

You can have more than one Tabs control in an application. If so, however, make sure that they have different id's, if any.

id=…	By default, function Tabs generates the tabs without identifiers. Thus you can have multiple Tabs controls within one document, without caring about potentially conflicting id names. However, sometimes it might be useful if you have identified tabs (for example, if you want tabbing programmatically or for initializing.)
cont=…	By default, the association between a tab and the pertaining Contents is established by the sequence in the all collection of the HTML document: the first object with CLASS="Cont" is associated with the first tab, the second Cont encountered in all is associated with the second tab, etc. In most applications of a Tabs control this will work fine, even if the last Contents has another Tabs control nested within. In a very complex Tabs control, however, you will need this option for "explicit association": tab 1 will be associated with an object that has ID="… 1" , tab 2 with the object ID="… 2" , etc. (with "… " being the char sequence defined by option cont=… , with the suffix 1 , 2 , etc. attached.
openall	If you want to produce a very user-friendly HTML document, you should provide an easy way to prepare it for searching a word and for printing it out altogether. By this option you can do that: A small green button ("OpenAll") is created after the last tab. When the reader clicks it, all information hidden in your document is displayed, and the button turns into "CloseAll" on red background. When clicking this button, all the contents are hidden again, ready for the normal tabbing to be resumed.