Jimmy Cuadra Web Services

Pick An Item

Pick An Item is a plugin for jQuery that presents a nice animated interface for displaying the content of a collection of articles.

The plugin creates a horizontal list of all the article headers. When an article's header link is clicked, the other articles' headers fade out, the selected article header slides to the left edge of the parent element, the content fades in, and the text in the call to action is toggled between its two states. Clicking on the header link again reverses the process and returns everything to its initial state.

Download

Pick An Item is available for download from GitHub.

Usage

Begin with a simple HTML structure like this:

<div id="pick-an-item">
  <div id="call-to-action">
    <p>Select an article.</p>
    <p>Select the article's title to view all articles.</p>
  </div>

  <ul>
    <li id="article-X">
      <div class="header">
        <a href="#article-X">Article X</a>
      </div>

      <div class="content">
        <p>Content of article.</p>
      </div>
    </li>
    <li>
      ... repeat for each article ...
    </li>
  </ul>
</div>

Calling the plugin on the parent element is done like this:

$("#pick-an-item").pickAnItem();

At this point the plugin will reformat your articles and attach the behavior described above. There is a bit of basic CSS that is required as well. See the included HTML/CSS files for complete working examples. The CSS file contains only the bare minimum of what is needed for the plugin to work as intended. Two sets of example HTML/CSS files are included — one using XHTML and one using HTML 5. The plugin encourages the use of HTML 5 (though HTML 4 is the default) and allows you to customize the markup you use by supplying options to the plugin when calling it.

Options

Pick An Item accepts the following options:

widthPerItem
Width in pixels of each article. Defaults to 110 px.
slideTimePerItem
Time in milliseconds that it takes for an article to slide one article's-width to the left. Defauts to 250 ms.
itemFadeTime
Time in milliseconds that it takes for article headers to fade out when an article is selected. Defaults to 500 ms.
contentFadeTime
Time in milliseconds that it takes for content to fade in and out. Defaults to 750 ms.
callToActionId
The DOM ID of the call to action element. Defaults to "call-to-action".
callToActionChildren
The elements that the call to action contains. Defaults to "p".
section
The parent element of the articles. Defaults to "ul".
article
The element used to contain each article. Defaults to "li".
header
The element used to contain each article's title/link. Defaults to ".header" (any element with a class of "header").
content
The element used to contain each article's content. Defaults to ".content" (any element with a class of "content").
html5
A convenience method when using HTML 5 markup. When set to true, automatically changes the previous four options to "section", "article", "header", and "section", respectively. Defaults to false.
hiddenClass
The class name used to hide elements. Defaults to "hidden".
initializedClass
The class name used to attach the necessary styles to all the elements when the plugin is called. Defaults to "initialized".

Known bugs and limitations

  • Content does not adjust if the browser window is resized.
  • HTML 5 version does not work in Internet Explorer.

License

Pick An Item is licensed under the MIT License.

To do

  • Fix anything in the known bugs section
  • Allow certain links in the article headers to be excluded when attaching the click behavior.
  • Add support for multiple rows of article headers.

Find content by tags