Category: Scripting

Scroll Multiple Videos with jQuery.Scrollable.js

site>> http://www.flowplayer.org/tools/scrollable.html
tutorial demo>> http://www.flowplayer.org/tutorials/scrollable-view.html

Tero Piirainen has created a handy Flowplayer tool that scrolls playlist of several videos using jQuery. The tool is pretty light, which is wrapped in 3.9 Kb javascript file. The features are:

Read the rest of this entry »

jQuery.ComboBox dropdown list

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

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!

Galeriffic - a fast-performing photo gallery

Galleriffic works with jQuery-1.2.6 plugin, to deliver a high volume of photos. It is brought to you by Trent Foley. All photos are set in a neat grid and at the other section you can see the full zoomed preview of the selected photo. There are optional elements of selectors needed for a full-featured setup of Container Sel. The selectors are: controls, image, title, description, download, and thumbs.

Available features of Galleriffic plugin comes in:

* Smart Preloader
* Thumbnail Navigation (with pagination)
* Bookmark-friendly URLs
* Slideshow (auto-updates URL bookmarks)
* Image fade transitions
* Optional download link
* Flexible configuration
* Auto degrade when javascript is inactive or not available

You can initialize the gallery by calling the galleriffic init function, passing in the thumbnails container selector and an options. Set these default functions based on what has been stated at the source page to create your own Galleriffic. Now you can have massive numbers of photo gallery without feeling worry that your picture thumbnails would clutter the web design layout

Pamoorama - Spicing up Your Panoramic Image

site>> http://www.silverscripting.com/pamoorama/index.php
demo>> http://www.silverscripting.com/pamoorama/sample1.html

Pamoorama is a simple and lightweight script image scrolled box. This is a special image tool to style up your panoramic image. You will need MooTools module to build it. A ready use module as you don’t have to work on any CSS customization, barely any HTML.

How it works?
Moving the mouse over a panoramic image will scroll it in certain direction. You’ll see a frame (a part) of image that belong to a larger full size image.
Pamoorama will also display a small thumbnail panel of your panoramic image so you can easily navigate the frame by dragging it.

Features:
* Automatic scroll animation option (v 0.3)
* Custom caption, width, colors
* Dragging thumbnail frame only option
* Transition effects when you click on the small thumb (v 0.2)

It would be better if you visit the demo page to learn more about Pamoorama so you can create your first panoramic image previewer using Pamoorama.

Mootools Date Picker

site>> http://www.styledisplay.com/mootoolsdatepicker/
demo>> http://www.rickhopkins.com/DatePicker2/

Date Picker is a fancy Mootool calendar that will show selected date in a box. Looks nice with icon, and easy customization with CSS. There are options and default state to build this calendars.
The integers are:

* dayChars - Identify number of characters for the day names abbreviation.
* startDay - Setting up the week start on specific day.
* yearRange - An integer to set how many years the dropdown list will include, starting from your yearStart setting.
* yearStart - Enter the four-digit year, for instance 1980. This will be where the dropdown list will start, and continue up or down depending on your yearOrder setting.

Strings:

* format - A regular expression script is used to replace this string with the date.
* yearOrder - The direction to put the year dropdown will go, starting from your yearStart, and counting through your yearRange.

Arrays:

* dayNames - An optional script to set it based on the user’s language.
* daysInMonth - Optional script to set calendars with different days.

However, after we have sorted the default options for this Mootools Date Picker, you would still need to visit the source page to put the correct value for each of them. Take a quick tour to build your own Mootools Date Picker now

Scrolling News Ticker with Mootools

This tutorial will teach you how to implement a news ticker with horizontal scrolling using Mootools. As usual, Antonio Lupetti always explains it simple so you can easily implement and reuse this in your projects.

In the first step you’ll see how the structure of each news is contained into a li element and ul list is contained into the layer “NewsHorizontal” with overflow property set to hidden and position set to relative. Then, just add a link to mootools framework in the head tag of your page.

The next step is to build the main HTML elements inside the body tag and to style the News Ticker with CSS code. Last step is adding JavaScript function to enable vertical scrolling provided from Capitol Media. The code can only be found by downloading the source code for this tutorial.

Take a look the details to create your own Mootools News Ticker. Modifying this, to fit your web project, should be fun!

Outgoing Links Track Feature Enhancement on Google Analytics with jQuery

This tutorial will show you how to enhance outgoing links track feature, simply by using jQuery on Google Analytics. The idea is to add outbound link tracking to a new or existing site. You’ll need to set your links to other sites with “REL” attribute, therefore jQuery can track them very easily.

Somehow, by implementing this tip, you’ll get the all these benefits:

* Unnecessary JavaScript to every link for tracking.
* Simply work by inserting a click function to jQuery object to call Google Analytics
* This code will pass a page path of “/outgoing/” and the url of where the click was headed.
* Clearly display the outgoing URLs, total numbers of page views and its percentage on Content Overview Panel of Google Analytics.

Note up this simple tips and you can start to implement it if you think this would be useful for your website analytics.

Build Bulletproof Websites with Sparkl

Sparkl is a CSS Framework to build well structure of standardized web. Sparkl files package consist of: index.htm (the homepage of your website), stylesheets (where all the stylesheets are kept) and images file.

You’ll get many kinds of Bulletproof CSS Modules to produce flexible layouts that will allow content to flex with changes in major browsers. It is designed for better accessibility and flexibility. These modules are:

Read the rest of this entry »

mcDropdown jQuery Plug-in v1.2.07

Creating a dropdown menus with CSS is common thing, but what if you need to add more features that allow users to select from a complex hierarchical tree of options?
mcDropdown jQuery Plug-in is a solution for you to create menus with more enhancement of uses. The features are:

Read the rest of this entry »