Loading...

Web Interface Tricks

Tab Sheet How to do it Code
Tab sheets are useful for grouping related but separate information in the one place for easy navigation or comparison
To show a tab you just loop through some DIVs and hide all except the required one. Then you use whatever elements you want to indicate which one to show, such as a sequence of spans at the top, which act as tabs.

The apparent lack of border between the tab and the sheet comes from overlapping the two slightly, giving the tab a higher z-index and making its bottom border the same colour as the sheet.
See the Tab view examples page or see "_Tab View_" in source code

Sortable Table

String Number Date
giraffe1Jan 10 2010
dog2110 Feb 2010
bear4Jan 11 2010
marmoset62010 Jan 12
aardvark71Jan 13 2010
armadillo13Jan 20 2010
elephant9Jan 10 2011
zebra10Jan 10 2012
hippo3Jan 10 2013
narwhal4Jan 10 2015
beaver3Jan 10 2016
tiger61Aug 12 2010
seahorse4Sep 1 2020
Welcome to Web Interface Tricks.

Here you will find examples of how to make your page behave less like a static document and more like a normal application. You can learn to make menus, tab-views, tree-views, sub-windows, sortable tables, footers and other things which are not part of basic html but which can be done with a bit of script and css magic.

The articles below explain how these effects can be achieved and most contain links to more detailed explanation and example pages. The source code is copiously (and neatly) commented.

All features have been tested for internet explorer 7, 8 and 9, firefox, chrome, safari and opera.

Please email any requests or comments to admin (at webinterfacetricks.com)

Article Expander
All articles are in a container div which captures click events. This container-wide handler checks if you clicked an article header and if so, calls the toggle code for that article.

The expanding/shrinking code uses the basic animation function also used by the , and the . You can learn more about it at the basic animations page.

For each iteration of the animation loop we also check if the page needs to scroll to make the article visble.

The just-expanded article is highlighted so that you can see it more easily after any scrolling.

See the expander examples page for more explanation and examples, or find "_Article Expander_" in the source code of this page.

Sidebar
Sidebars for navigation, are more useful if they are always visible or at least easy to access.

Using the window.onscroll and window.onresize events, we can make sure things are sized and positioned as we want them.

Once you scroll past a certain point, the sidebar is set to position:fixed, which means it no longer moves when you scroll, and stays in the same position relative to the window (as opposed to the document).

To see the code for a basic sidebar, check out the sidebar example page or find "_Side Bar_" in the this page's source.
Tree View
Tree views are really just lists, with sub-lists that can expand and contract, plus some markers that indicate the item type and whether it has sub-items.

This tree-view uses only standard markers or characters, but you can use list-style-image or background-image in your css to show custom icons.

For more detail, find "_Tree View_" in the source code.
Header
Like the , the header becomes position:fixed once you scroll past a given point. This is achived using the window.onscroll event.

The main difference with the header is that you need to put it in a container that doesn't become position:fixed. Otherwise, as soon as the header floats (becomes position:fixed), the remainder of the document would move upwards by the height of the header, since it's no longer taking up that formatting space.

Anyway headers are a great feature. Try to think of an application that doesn't have menus or toolbars that are always at the top. Only games, really. In the case of most operating systems it's a footer instead, but the principle is the same.

See "_Header_" in the source code.
Menus
Basic CSS menus only go in one direction, which is a problem if there are several layers of sub-menus as they might go off the page.

One approach is to position them all in the same direction (e.g. down and to the left), when there's enough space to do so, otherwise you position them on the side where there's more space.

This requires getting the position of the menu and its container, plus the size of the menu, its container, the sub-menu and the window.

Then you can test how the previous-level menu was positioned, and whether there's enough room to do it for the next level. Otherwise you can see if the other side has more space, and if so use that side.

This is a lot of work to avoid having menus run off the screen, but you only have to write it once and then you can have all menus (top, bottom or side) positioned automatically, taking into account how the previous level was positioned, and the space available.

You can also set a different positioning function for the very top level of menus, so you can have them pop upwards or drop down, but after that use the automatic positioning.

Check out the menu examples page or see "_Menus_" in the source code for more info.
Tab View
Tab-sheet views are simple to make from functionality point of view. You just loop through a collection of boxes and hide all but one, which you show.

You have to mess around with styling a bit though to get the tabs looking right.

See the tab view page for more detail, or find "_Tab View_" in the source code.
Sortable Table
To sort a table you can to turn the table-rows collection into an array. Then you can create a custom sort function that can handle table rows, and pass that function to the array.sort() method.

When you click a column header, the click event code needs to specify which column to sort by and how to interpret the values in that column.

Using this information you can construct a custom sorting function on the fly and pass it to array.sort();

For more on how to do this and why it's necessary, see the sortable table page or find "_Sortable Table_" in the source code.
Footer
Footers can be used instead of headers for always-visible features, or in addition to headers with a separate purpose. For example the header could have menus and the footer could have tool-buttons, like to share the site, print the page, copy link and embed code, etc.

Like the header and the sidebar, you use position fixed. Make sure you give the file a doctype so that it works on ie7 and 8.

See "_Footer_" in the source code.
Windows
To make movable objects you can catch the document-wide onmousemove and onmouseup events to move or stop-moving the appropriate item. The same principle is used for sizing when you click on the borders.

The second part of the puzzle is making a box with clickable borders that scales its contents correctly. You can see how it's been done in the source code by finding "_html windows_" and scrolling down to the html portion.

Once you've made a box you're happy with you can just clone the element whenever you want to make a new window at run-time, and then you can copy whatever contents-element you want to use, into the windows contents node.

"Modal" windows are just done with a semi-transparent, cover-all div that has a lower z-index than the modal window but a higher one than the rest of the page.

Click the buttons on the footer to test out some windows, or see "_html windows_" in the source code for more explanation of how the sizing, dragging and cloning works.
More
Panel Splitter
Character Maps. Long loops that don't freeze the GUI.
onkeydown vs onkeypress
Getting/setting cursor position in a textarea
Timed loops. Basic animation.
Crossfade effect for slideshows, etc
Getting variables from the url.
Setting an iframe's height according to its contents.
Toggling with radio buttons. Synonymous form elements.
Doing a deep word-count within an element.
Accessing the event object in dynamically created event functions.

A "clear:both" div will extend the contents column past the right-floating divs