Make Content Panels Using jQuery

One common design problem is how to display a large amount of content on a page and still make it easily accessible. Often times, a table of contents is used at the top with links within the same page to sections below. This gets pretty unwieldy if you have a lot of content, and splitting it up into multiple pages can be annoying and hard to navigate.

An easy and elegant alternative is to use a dropdown list with content panels made of individual divs. The dropdown acts as the table of contents, and each time a selection is made, only that panel is displayed.

Example:

contentpanel

With a little bit of jQuery and CSS, it’s very simple to create this kind of ui.

Continue reading “Make Content Panels Using jQuery”

Creating a modal window with jQuery UI

A common need in a web application is to open a separate window to display some information or get input. As most modern browsers have popup blockers, it is difficult to use window.open reliably, and it also detracts from the user experience.

A better solution is to have a modal dialog that pops up within the same page over the current content. You see this very commonly on sites, and it is extremely easy to achieve with jQuery UI,  a library that adds rich UI elements to jQuery, such as dialog boxes, date and color pickers, buttons, sliders, and tabs.

Continue reading “Creating a modal window with jQuery UI”