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:
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:
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.
Daniel Ott has come up with a handy tool for converting pixels to EMs. Forget about using the headaches of manually using a calculator and doing all the math. This bookmarklet can take care of it and will it will also calculate the pixel to em value relative to a specific element.
Here is the bookmarklet:
Thank you, Daniel Ott for this very useful tool!
WebDesignerWall has come up with a trick that uses nothing but a little CSS and PNG to apply gradient effect onto plain HTML text. The trick involves overlaying a blank block element that contains a translucent PNG gradient on top of the regular text.
As can be seen in this demo page, it actually looks pretty good.
There are a few limitations to this, of course. One being that the gradient will have to use the same color as the text’s background. Second, the background will have to be a solid color.
Finally, it requires the PNG hack to work on IE6, which relies on JavaScript. So, if the viewer happens to have JavaScript turned off, be prepared to see some cross-browser uglyness:
All in all a novel idea, but I’m not so sure I want to risk the chance of loosing a visitor though an accidental flash of ugly design.
The Google Chart API allows you to easily create dynamic, professional-looking image (PNG format) charts with very little programming. Data can be encoded to provide up to 62 (with simple encoding), 1,000 (with text encoding), or 4096 (with extended encoding) different values.
Choose from a variety of charting styles including:
Pie charts (2D and 3D styles available)
and
Not only is the chart API is free to use, the best part is that it doesn’t come with advertisements. No, not even a Google logo gets embedded in the chart, though as far as I know this is the first of its kind to offer such a service, so there is really nothing out there to compare it to. So why are they offering such a great service — one that obviously consumes a lot of bandwidth — for free? I’m not part of Google, but I’m sure this is part of their grand scheme of taking over the world. In a good way, of course.
Shadowbox is a lightbox-style multimedia viewer inspired by LightWindow. This includes images, Flash videos, Quicktime, Windows Media Player, and even webpages.
From the website:
Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page.
Aside from support for Firefox 1.5+, Safari 2+ and IE 6+, it comes with adapters for most widely adapted JavaScript frameworks, allowing for easy integration and optimized code execution.
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.
You are currently browsing the archives for the JavaScript category.
