Category: Scripting

Image Slide Frames using Slided.js 1.3

Another great work of style scripting that came from CVI-lab. Introducing slided.js 1.3, an unobtrusive set of Javascript to add slide frames and shadow to images on your webpages.

To get an aspect ratio of 1:1 the larger picture dimension than the minimum picture dimension (80×80px) will define the width and height. Therefor the needed space of the canvas element will grow if the aspect ratio of the picture doesn’t fit 1:1. Whenever you have uneven aspect ratio picture dimension, the frame border will persistent in 1:1 aspect ratio so it should produce interesting slide frame effect

Read the rest of this entry »

Add an instant picture effect with Instant.js 2.0

If you are looking for an alternative instant picture effect to images on your webpages, think of Instant.js 2.0 from CVI-lab. With this cool JavaScript, you can save time creating a Polaroid™ image effect.

You just need to add a class=”instant” to the image (after its installment into your website), and with custom classes you get these instant picture effects :

* various tilt directions on your pictures
* vary the shadow by the desired opacity in percent:
* shadow opacity class and prevent the shading by adding “noshading” class
* vary the frame by adding icolor followed by the desired color as hex:
* preserve the image aspect ratio
* vary the annotation text and desired color as hex:
* get the text from alt attribute by adding itxtalt class
* get the text from title attribute by adding itxttitle class

Should be a real time saver for you Check the details of how to implement this cool Instant.js 2.0 scripting to get nice image effect now!

TableSorter: Flexible client-side table sorting

A standard HTML table is commonly created with THEAD and TBODY tags. You will need to refresh it to look up new sort of data entries. Thanks to TableSorter.js, because this jQuery plugin will turn a conventional HTML table into a sortable table without page refreshes. It can successfully parse and sort many types of data including linked data in a cell. Great thing, since you can also add your own easily. TableSorter.js useful features including:

* Support multi-column sorting
* Parsers for sorting text, digits, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time, and many more.
* Support for ROWSPAN and COLSPAN on TH elements
* Support secondary “hidden” sorting (e.g., maintain alphabetical sort when sorting on other criteria)
* Extensibility via widget system
* Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
* Lightweight code size

There will be some examples on the source page that will show you more extend uses of TableSorter.js.
If you are feeling like today is a fun internet surf day, don’t forget to save this using your browser bookmarklets!

jCalendar - a jQuery calendar

jCalendar is a jQuery dynamic calendar developed by Ted Serbinski. The feature is fully supported by jQuery either version 1.0.4 or 1.1.2. It can be used with 3 form selects (one for day, month, and year) to visually select a specific date for input.
To implement this jCalendar usability, you will need to download jQuery, jCalender source code and optional jCalander CSS. Add 3 form selects for day, month, and year with these following classes:

* jcalendar-select-day
* jcalendar-select-month
* jcalendar-select-year

Visit the resource page to download the compressed jCalendar.js and find out more about the available features of this jQuery Calendar

Grow a Textarea with Textarea Resizer 0.1 JavaScript

Chris Barr of EjectMedia.net brings you Textarea Resizer 0.1 JavaScript that allows you to expand and shrink the height of HTML textareas. It is such a simple javascript to grow a textarea that based on Mootools 1.1
It requires:

* Window.DomReady
* Fx.Style
* Fx.Styles
* Fx.Transitions

Visit the source page to download the Textarea Resizer 0.1 JS if you like to give a try

ImageFlow 0.9 - Highslide Version

The ImageFlow 0.9 is originally developed by Finn Rudolph. A stylish animated horizontal JavaScript carousel as the images flow perspectively and controlled by a slider. After some tweaks work, ImageFlow has been slightly hacked by Ceasar Feijen. This tweaking makes ImageFlow compatible to the Highslide JS effect.
You can now single click the centered image or double click any image in the ImageFlow and it will highslide with a preloader. Highslided image can be rearranged back inside the ImageFlow content with double click. It also possible for you to drag ‘n drop the highslided image anywhere on the website.
Sounds wonderful? Take a tour to give a try on this cool ImageFlow - Highslide JS now!

SpaceGallery - jQuery Plugin

SpaceGallery is a javascript image gallery with jQuery plugin. Whenever you’ve managed to set the parameters for this gallery, images are animated with perspective style. Almost similar to accordion image gallery, but this gallery has its minimum scale for the image in the back. So, when you click the front image, it will fade in a smooth animation and replaced with the next image.
An interesting gallery when you only have limited number of images to showcase, since this SpaceGallery is designed in one way navigation (no back and forward buttons included).
Visit the demo page to find out more and to implement this image gallery to your website if you like!

Ext JS Accordion Widget

The Ext JS is the javascript library and its InfoPanel are components that works beautifully on major browsers : Firefox, Opera and Internet Explorer.

All panels can be dragged out from the Accordion dock into independent panels. If you do not want this feature you can turn it off. You can also drag undocked panels back to the Accordion dock again.

You can configure panels to customize look and functionality for your needs, either for accordion panels or independent panels, for instances:

* shadows
* show pin
* animation,
* various modes (undockable, independent)
* more…

Both Accordion and InfoPanel expose an Application Programming Interface (API) that makes implementation of custom functions easy. Here are several examples (of many) of Ext Accordion Widget best usage for your web pages:

* Page navigation
* Tools windows
* Hidable details
* Login forms
* Options dialogs
* Sticky notes

If you think this widget would be very useful for you, please read the step by step instruction to install this great Ext Accordion Widget now!

jCarousel - Riding carousels with jQuery

jCarousel is a jQuery plugin to control a list of items in horizontal or vertical order. The project has been developed by Jan Sorgalla. Jan presents long list of carousel gallery examples as sort of possible extent of its usage. The items of the content, can be static HTML or loaded dynamically with (or without) AJAX.
jCarousel has been tested and works on major browsers.
To use the jCarousel component, you will need to include these elements inside the tag of your HTML document:

* jQuery library
* jCarousel source file
* jCarousel core stylesheet file
* jCarousel skin stylesheet file

Read more to learn how those file elements integrate wonderfully to each other.