Reader
You are here: Home / Archives for 2009

Archives for 2009

Flash Countdown Timer from Flabell

Last updated on by Gabriel Livan

Flabell released a countdown timer build in AS3 that shows the time left until an event happens. The colors can be controlled from a XML file. When countdown almost finishes the script plays a sound and the colors change. In the flashvar the time is passed in milliseconds and it is calculated based on the servers’ time.

flabell-countdown-timer

General Details:

  • Opens with: Flash CS3+
  • Resolution: 470×105
  • Published Size: 64Kb

Glow, an Open Source JavaScript Library by BBC

Last updated on by Gabriel Livan

glow-a-bbc-javascript-open-source-library

Glow is the first BBC’s JavaScript Library that is released as an open source software. It aims to make working with JavaScript and the DOM easier. It tries to do this by abstracting common tasks, hiding cross-browser issues, and providing a set of user interface widgets including:

  • widgets.AutoSuggest (works as an auto suggester for input elements)
  • widgets.Carousel (scroll through list of items)
  • widgets.Editor (A rich text editor that allows text formatting with form input elements)
  • widgets.InfoPanel (A panel with content directed at a particular point on the page.)
  • widgets.Mask (A semi transparent layer covering the page)
  • widgets.Overlay (A container element displayed on top of the other page content )
  • widgets.Panel (An overlay with default themes and addtional functionality. Includes templating system.)
  • widgets.Slider (Form control for setting a numerical value within a range. )
  • widgets.Sortable (Page elements can be reordered using the drag & drop feature)
  • widgets.Timetable (A scrollable list of ordered items displayed against a proportional axis.)

The library also has modules for setting powerful animations, validate forms, serialising and de-serialising data, sending data to & from the server etc.

Create Cute Site Maps: SlickMap CSS

Last updated on by Gabriel Livan

SlickMap CSS is a stylesheet useful to create beautiful visual site maps. It’s suitable for most websites, accommodating up to three levels of page navigation and additional unity links. Moreover, it can be easily customized to meet your own individual needs, branding or style preferences.

slickmap-css-sitemap

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

Features and benefits:

  • Eliminates the need for additional software
  • Easily revised with clients on-the-fly
  • Clickable anchors with visible URLs
  • Design process results in working HTML code

JS LightBoxes with Fancy Zoom Effect

Last updated on by Gabriel Livan

Do you need to implement a lightbox that has the zoom effect when it is triggered? Take a look at the following resources! Some of the frameworks used to develop the scripts are JQuery, MooTools, and Prototype.

fancy-zoom.1.1

FancyZoom 1.1 is a LightBox designed to view images inline without reloading the web page. It provides a smooth, clean, truly Mac-like effect. It’s very simple to implement in the pages of your website and it doesn’t use any JavaScript libraries.

Features include:

  • Easy to implement (requires just two lines of code in your HTML page)
  • Focuses on the smoothest, most polished zooming animation possible
  • Preloads full-size images in the background on link mouseover
  • Offsets the full-size image from the page by drawing a nice drop shadow under it
  • Uses Safari 3’s “box-shadow” feature to draw the drop shadow natively, no images required

jquery-fancy-zoom

jQuery plugin: Fancy Zoom – This is the JQuery version of the FancyZoom script. It comes with a few changes:

  • Fixed the overlay bug in IE6
  • images are resized if size is bigger than document screen
  • FancyZoom can be applied directly on an image, no more link wrapper needed.

Zoomy JavaScript based loosely on Fancy Zoom by Cabel Sasser – Developer John Nunemaker rewrote the original FancyZoom script, making some changes to it such as:

  • Implementation of box rounded corners
  • Works with any HTML (images, text, headings, flash)
  • Width and Height of Zoom Box are configurable through optional setting or CSS

The package contains FancyZoom versions for JQuery, MooTools and Prototype.

IPhone-like Password Fields: jQuery dPassword Plugin

Last updated on by Gabriel Livan

According to Jakob Nielsen, “usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures”. He suggests that passwords should be shown in plain text and masked only if the user chooses to do that by using a checkbox. Nielson also states that users make more errors when they can’t see what they’re typing while filling in a form and they are feeling less confident. Perhaps, for this reason Apple implemented an alternative method on IPhone/IPod touch: the passwords are masked when the users type them, except the last character.

iphone-like-password

Stefan Ullrich, created a JQuery Plugin that converts the last character of a masked password field into a plain text one. The effect is the same as the one from the IPhone/IPod touches.

Features include:

  • The script is unobtrusive; Non-JS users get the common masked password fields
  • Supports copy & paste
  • No HTML modification is required as finds the password fields by type
  • Options: interval, delay, replacement character, prefix, debug mode (requires FireBug enabled)