Category: Scripting

jQuery ComboBox dropdown list

jquery.ComboBox was created by a an application developer, Ahura Mazda due to the fact that the standard Select element cannot be styled, or it is limited to what can be styled for some internet browsers, for instance: IE 6.
Even at the moment the jquery.ComboBox behaves as a dropdown list and not a full combobox since it does not currently accept text input, this technique would still allow you to set up a structure of controls.

Some supporting features:

* easy to set up
* control over style of combobox using CSS (background opacity, background color, fonts choices, borders, drop-down button image etc. )
* supports keyboard navigation
* cross-browser support (best viewed in firefox)
* different style of animation for drop-down (fade or slide animation FX)
* original Select html control is still available for access and control and reflects the user’s selection
* works the same with forms and server-side form processing, retaining the original control’s ID and updated values

The latest developed version is jQuery.ComboBox 0.1.2.7. and it is available in .zip file to see offline demo with different styles. Should be interesting to have a try!

website >> http://jquery.sanchezsalvador.com/jquery/page/jquerycombobox.aspx
demo >> http://jquery.sanchezsalvador.com/samples/example.htm

Drag & Drop Sortable Lists with JavaScript and CSS

This JavaScript is another smart way to rearrange items in a list. From a basic list of bulleted items, this code is developed with some CSS style and cursor hinting to make the dragability more obvious.
Examples of its implementation are to create:
- Sorting floated, wrapped list items.
- Sortable links or buttons
- Windows-like toolbars
- Editable Content
- Sortable, Editable Lists
- Slideshow Sorter
Getting curious? Read more for detailed instructions by visiting ToolMan DHTML Library of Sortable Lists collection to create your own dragable lists into something awe!

JonDesign’s SmoothGallery 2.0

This javascript gallery and slideshow system is designed using mootools v1.11. The new released of SmoothGallery 2.0 produces simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website. Although the javascript file is only 24kb, you will have fully standard compliant web pages in a lightweight solution for your website

Here come the new features
- Back and forward buttons of your browser now controls the gallery.
- History Manager allows you to send URL up there to a friend.
- Gallery Sets brings you multiple galleries on one place and switch between galleries
- Transitions between slides option as an alternative to smooth fade-in pictures.
- Included a real preloader and loads only what is needed.
- Switched to mootools 1.11
- Automatically closed the carousel when you click on an item (can be turned off).
- Customizable to what you need.
- Upgraded license to GPL v3.
- An official flickr plugin available to display your picture sets as gallery sets.

Incredibly awe! Ready to give a try? Hurry up….. Get the details by visiting the official JonDesign’s SmoothGallery 2.0 website now!

site >> http://smoothgallery.jondesign.net/what/
demo >> http://smoothgallery.jondesign.net/showcase/gallery/

Timeago - a jQuery plugin

We found a unique jQuery plugin called Timeago. It was smartly built by Ryan McGeary and allows you to display automated timestamps refresh update on your website, for instances:

* user last login timestamps (Mr. X opened this page about 5 hours ago, Thomas last seen 4 days ago, etc.)
* user status related to timestamp queries (date of born, date of registration, etc.)

First, load jQuery and the plugin, then attach it to your timestamps on DOM ready. Getting warm up for the next step? Better read the rest of installment that can be found on Timeago source page now

JavaScript Color Fading Script

Are you looking for another simple effect that can bring something brilliant to your website appearance? Try this lightweight JavaScript Color Fading Script. It gives you color transition that is fading gradually to another color.

You can apply this script for tables, divs and many more.
Some elements that you can target are:
- background
- border
- text color

You will need to set the hex value of starting color, then hex value to fade to and number of times to divide the color difference. Experiment a bit on some different transition speed values to see how the color fading effect work beautifully for you!
The good news is, Michael Leigeber has written this script with the demo page! Visit the site to check it out

GreyBox - New Smart Window

GreyBox is actually a showcase box tool that works almost similar to pop-up window. Pop up window always distracting and most of us just hate it :D. So, what is so special about GreyBox?
GreyBox display many kinds of content at the same window in a very smart way, because it does not conflict with pop-up blockers. It has a nice pre-loader before displaying the content in a box. There is a simple nav-bar that sticks above the box showing the content title, arrow buttons to browse the contents, and exit button. You can easily alter the style as it is controlled through CSS.

GreyBox is useful to show:
- external pages
- AJAX uploading of files
- internal pages (login, user preference, properties, contact formulas etc.)
- a video or a flash animation
- images
- product information
- Admin sections
- and much more….

An advance usage set up is also available for a quick overview and kindly visit some of websites that use GreyBox to enhance your ideas when you decide to use this cool smart window!

JavaScript Color Fading Script

Are you looking for another simple effect that can bring something brilliant to your website appearance? Try this lightweight JavaScript Color Fading Script. It gives you color transition that is fading gradually to another color.

You can apply this script for tables, divs and many more.
Some elements that you can target are:
- background
- border
- text color

You will need to set the hex value of starting color, then hex value to fade to and number of times to divide the color difference. Experiment a bit on some different transition speed values to see how the color fading effect work beautifully for you!

The good news is, Michael Leigeber has written this script with the demo page! Visit the site to check it out

A Simple JavaScript Tooltip

This animated JavaScript tooltip script is very simple with only 2kb of file size. It works in IE6+, Firefox, Opera and Safari. The main idea is to create a lightweight script that fades a tooltip with rounded corners attached to the cursor position.

You will need to setup the namespace and global variables, then create a function to display the tooltip that takes two variables. Positioning the tooltip is the next step and you will need to set a function to fade the tooltip to the target opacity. On the mouseout event, fade function will incrementally hide the tooltip.

Get the complete source script and a walk-through of the code now. Because this is very easy to use

Coda-Slider: unique classes for navigation tabs

Coda-Slider is actually a very light jQuery plugin introduced by Niall Doherty. The first released was in September 15th, 2007 and after few improvements the latest version has more features.

The previous version has included multiple sliders and cross-linking choices, and also embedding YouTube videos using the embed code provided for each video. There are options to remove tabs or arrows. You can also customizing CSS to alter width and height of the slider box.
The Coda-Slider 1.1.1 has new feature which is different classes for each tab, so you can target individual tabs and give each one a different look.
This neat little Coda-Slider is absolutely validated to XHTML 1.0 Strict and CSS.

Whenever you need a slider, think of Coda-Slider 1.1.1 because its rich features are perfectly designed to meet user’s requests and visit the demo page to grab this cool jQueary plugin now!