nextwebgen.com

The Next Generation Web Now

Y! UI Carousel Component

Filed under: Web 2.0 News, Front Page, Toolkit, UI, Yahoo!, Component — Dion Almaer at 9:36 am on Friday, July 14, 2006

Bill Scott of Yahoo! has written up a nice new component on top of the Yahoo! UI library.

The Carousel component lets you flick left and right through content (images).

You will quickly see that there is a lot of documentation and a real API that allows for many uses:

  • Static HTML - Carousel content expressed
    solely in HTML markup.
  • DTHML Load - Carousel content loaded via
    JavaScript (client side load) displayed horizontally.
  • DTHML Load (Vertical) - Carousel
    content loaded via JavaScript (client side load) displayed horizontally.
  • Bounded DHTML Load - Loading
    Carousel via JavaScript (client side load) with the size constrained.
  • Ajax Load - Loading Carousel via Ajax (server side load).
  • Ajax Load - Two Carousels - Loading two Carousels on same page via Ajax (server side load).
  • Slide Show - Showing a carousel managing one large image at a time.
  • No Animation - Carousel configured for no animation.
  • Module Scrolling - Example of a news module supporting scrolling of content.
  • Module Tabset - Example of showing one page of
    content at at time in tabs.

Carousel

Ajax Activity Indicators Examples

Filed under: Web 2.0 News, Front Page, Prototype, Examples, Component — Dion Almaer at 11:50 am on Monday, July 10, 2006

Ian Selby has written a thorough article on ajax activity indicators - make them globel and unobtrusive.

Ian details his solution:

So, what can we do about these problems? Well, if you’re using prototype as a part of your framework, you can register global indicator functions. These get executed when there are active requests, and when the requests complete. However, there’s another dilemma with this method too: Where do you place a indicator that can potentially appear often and keep it from being obtrusive, or, even worse, not being seen as it’s placed outside of the content that’s currently in view? I had to tackle that issue this week while starting development on a new project at work. I wanted to create an indicator that would be in the same place on every page, and that I never had to write extra code to use.

Check out the demo:

Ajax Indicator Demo

Code Example

Ajax.Responders.register({
        onCreate: function() {
                if($('notification') && Ajax.activeRequestCount> 0)
                        Effect.Appear('notification',{duration: 0.25, queue: 'end'});
        },
        onComplete: function() {
                if($('notification') && Ajax.activeRequestCount == 0)
                        Effect.Fade('notification',{duration: 0.25, queue: 'end'});
        }
});