JavaScript & jQuery: The Missing Manual, 2nd Edition

Chapter 10. Expanding Your Interface

A web page can feel like a long one-page brochure. Visitors are overwhelmed if there seem to be acres of text and pictures to scroll through, and they are unable to quickly get the information they need. It’s up to you to provide your visitors tools to find what they’re after. Using JavaScript and jQuery, you can streamline your web page and make it simpler for visitors to deal with—hiding content until it’s required and providing easier access to information.

In this chapter, you’ll learn common techniques to make your pages easier to read and use. Tabs fit lots of information in a small space and let visitors click a tab to access content in smaller chunks. Tooltips—pop-up windows with additional information about moused-over links, form fields, and other HTML elements—provide supplemental information. An increasingly popular tactic for controlling page content is a slider—sort of a window on the page where content slides in and out of view. Sliders let you showcase content and are commonly used on home pages.

You’ll also learn a few useful techniques for building your own interface widgets: how to determine the dimensions of the browser window, a page element, and the position of elements on a page.

Organizing Information in Tabbed Panels

Putting too much information on a page can overwhelm your visitors and make a web page look crowded. JavaScript gives you many ways to present a lot of information in a small space. One technique is the tabbed ...