Category: Scripting

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!

3 mooTools Accordion Scripts

Nyokiglitter brings you three really great scripts to create a horizontal, tab style or two columns accordion. All you need is mooTools and some CSS:

Horizontal Accordion Script

Read the rest of this entry »

Flexigrid - lightweight but rich data grid

Flexigrid is a lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content.

Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Features are:

* Resizable columns
* Resizable height and width
* Sortable column headers
* Cool theme
* Can convert an ordinary table
* Ability to connect to an ajax data source (XML and JSON[new])
* Paging
* Show/hide columns
* Toolbar (new)
* Search (new)
* Accessible API
* Many more

Easy Scroll v1.0: unobtrusive content scroller

Easy Scroll v1.0 is created by Alen Grakalic of CSS Globe.com. It is an unobtrusive JavaScript function that allows you to scroll any type of content. If you visit the demo page, you will see how some features beautifully done.

Scrolling down content would have more options, such as:
1. Automatic scrolls when up and down buttons are rolled over
2. Double speed when up and down buttons is pressed.
3. Reset button to get you into default position content

You can also customize this function with css to improve its appearance. The content is fully accessible to users with JavaScript disabled browsers, but of course there is no longer scrolling options available.

If you think this “regular” JavaScript function is useful for you, visit the source website that provide you a wonderful demo page and download the script file now!

GlassBox - compact Javascript User Interface library

GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. The GlassBox library is easy to use, customizable and skinnable, comes with a coherent API and documentation, tested with IE 6, Firefox 2, Opera 9 and Safari 3. Really nice one.

It is easy to use, customizable and skinnable. It comes with comes with a coherent API (CSS based parameter) and a short introduction. And it is free!