Tuesday, January 13th, 2009

Content visualization techniques and views

Category: Articles

Noupe has another nice roundup, this time they are showing 10 Smart JavaScript Techniques For Manipulating Content.

They share nice content views with demos and how to content. Included in the list is:

  1. jQuery pageSlide: jQuery pageSlide is a plugin for jQuery that slides the viewable webpage off-screen, revealing and populating a secondary interaction pane. It may be used in a similar manner to Lightbox, where screen real estate and centralization of the user experience are a concern.
  2. Create a simple ul list with a nice slide-out effect for li elements: We want to obtain this effect: when an user clicks on a link (“Hide”), the related
  3. element disappear with a nice animated slide out effect. A simple way to implement an animated “disappear” effect using MooTools slideOut()
  4. Portfolio Layout Idea Using jQuery: Benjamin Sterling created an interesting portfolio layout and added a nice easing method to the main content panel using easeOutQuad and easeInQuad using jQuery easing plugin.
  5. Creating a Slick Auto-Playing Featured Content Slider: Niall Doherty’s Coda Slider inspired lot of designers and got them started quickly designing around it. Chris Coyier created a Slick Auto-Playing Featured Content Slider using Coda Slider plugin pretty much “out of the box” and added to it.
  6. Easy Image or Content Slider: Easy Slider enables images or any content to slide horizontally or vertically on click. It is configurable with css alone.
  7. mooSlide: mooSlide is nice replacement of the common “lightbox” module. It has some interesting options to influence the look and behaviour of the sliding box.
  8. jQuery.SerialScroll: jQuery.SerialScroll allows you to easily animate any series of elements, by sequentially scrolling them.
  9. Agile Carousel: Agile Carousel allows you to easily create a custom carousel.
  10. Animated JavaScript Slideshow: This extremely lightweight JavaScript animated slideshow script includes a number of cool features to to style your content: description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.
  11. Sexy Lightbox 2: Sexy Lightbox 2 is a sexier and lighter clone of the classic Lightbox. Supports displaying images and HTML elements.
  12. UI.Layout: Was was inspired by the extJS border-layout. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.

Posted by Dion Almaer at 5:08 am

3.2 rating from 21 votes


Comments feed TrackBack URI

A few of these demos fail with Keyboard Navigation. Either you can not focus things with the tab or the tab screws up the layout of the scrollers.

People need to test with tabbing through the page and hitting the enter key. Not everyone uses a mouse.

Comment by epascarello — January 13, 2009

Thanks for showing my Agile Carousel plugin. Just wanted to let you know that I finally released a new version. Details are here: http://www.agilecarousel.com/instructions

Comment by edtalmadge — July 16, 2009

Leave a comment

You must be logged in to post a comment.