cssvault - inspiring creativity

GlassBox is a JavaScript library that allows you to add Windows Vista-like transparent effects on your website. It runs on top of the the Prototype and Script.aculo.us library and comes complete with an API documentation and tons of examples. It is released under the MIT license.

I’ve seen at least three submissions over here at CSS Vault of sites that use the “Step Carousel” effect. I did not even know what it was called until I saw this article, which outlines the steps needed to accomplish the effect using the jQuery library.

The result looks very nice and the animation is very smooth. The only issue is that this tutorial takes so many steps and makes use of inline JavaScript, though I suppose they can easily be converted to DOM-based JQuery statements, separating the presentation layer from the backend.

iBegin has just released iBox, a “lightweight, fast, and flexible” lightbox script.

It supports the following content types:

Images
It supports image overlaying and will automatically scale down the window if the browser’s viewpane is too small.

Documents
Displays linked documents in a similar fashion as Images.

Inline Containers
iBox can also display containers (e.g. hidden DIVs) within the same page.

YouTube Videos (Flash Video)
iBox’s architecture supports plugins. Images, Documents, and Inline Containers are all plugins, and YouTube Videos is provided as an example for developers to make their own plugins.

One notable aspect of iBox is its support for non-JavaScript capable browsers. It supports a target attribute which specifies the target document to be loaded, so that you can specify a different value for the HREF attribute. Very nifty.

Links:

• iBox Homepage
• iBox Support Forum
• iBegin Labs

jQuery happens to be my favorite JavaScript framework, so I was very happy when Noupe came up with a list of 50+ Amazing Jquery Examples. The article has “Part 1″ attached to it so expect to see more. The list ranges from useful to awesome to just cool, such as the following:

• Date Picker - a flexible unobtrusive calendar component for jQuery
• Style Switcher - allows your visitors to choose which stylesheet they would like to view your site with. It uses cookies so that when they return to the site or visit a different page they still get their chosen stylesheet
• Table Sorter - turns your standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes
• Form Validation
• Image Galleries
• and more …

MooFlow is an image gallery that mimics the look of Apple’s iTunes Cover Flow. It runs on top of Mootools.

While surfing around today day I landed on FitFlash, a JavaScript solution to resize Flash animations “… to 100% width and 100% height when your browser window is greater than the minimum desired size and resizes flash to the minimum desired size when the browser window is smaller…”

FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution.

It works seamlessly with SWFObject, which is great.

Lightview is an AJAX image viewer similar to the ever so famous Lightbox JS. It features very nice, PNG-less, customizable rounded corners, a slideshow mode, pulsing captions, and a very clean and smooth blackout animation and slideshow transition.

One thing that I really like about Lightview is that the image remains stationary when scrolling unlike in Lightbox where the image scrolls with the content.

Still, the script was implemented on Scriptaculous and Prototype, which, given the size of these things may not be the way to go for sites optimized for speed. For those looking for a lighter lightbox alternative, Slimbox may be the better choice.

I have seen a lot of OS X inspired dock menus out there but this is the best that I have seen by far, brought to you by our friends at N-Design Studio, a site that got featured here a few months back.

It uses the JQuery library and the Fisheye component so everything gets manipulated at the DOM level. My only gripe here as with other similar implementations is image aliasing due to browser-level resizing, a limitation that we just have to live with.

Check out the demo page to see what I mean.

There’s a nifty little JavaScript applet called Scrollover that provides an alternative visual cue to regular mouse over links. Instead of just changing the color, this one animates the link and scrolls it. A very nice alternative to regular :hover effects.

jQuery 1.1.3 has just been released! It boasts an 800% speed increase over the last version and remains a lightweight at 20KB. The last time I tried, I found jQuery harder to use compared to script.aculo.us, size and speed issue aside. Maybe it’s time to give it another spin.