Site5 Hosting

Posts Tagged ‘jQuery’

Slider scripts are one of the common objects of newspaper & portal websites. They are very useful as they help us present more content in a limited space.

YCodaSlider 2.0 is a slider script, inspired from Panic - Coda, and based on the Coda Slider of Niall Doherty.

This script helps you present your content with a tabbed menu + previous-next buttons to switch between tabs.

Coda Slider Script

YCodaSlider 2.0 requires jQuery to run and you can use any type of content inside the slider like HTML, Flash, webpages etc.

It can be configured easily to use different effects while changing the content.

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes.

tablesorter can successfully parse and sort many types of data including linked data in a cell.

Using tableSorter, you can have custom headers, sorting classes and row striping features.

jQuery Sort Table

How to use tableSorter?

The simplest usage is like below for a div with id value equals "simple":

<script>
$(document).ready(function() {
    $(#simple).tableSorter();
});
</script>

Some features of tablesorter:

  • Multi-column sorting
  • Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time.
  • 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+
  • Small code size

Tabbed content areas are a popular solution for the "lots of content - few space" problem.

Nettuts, a great tutorial website about web design & development has a nice example of creating a tabbed content area with jQuery & CSS.

JavaScript Tab Content

When clicked to the tabs, content area switches to the new content with a slick accordion type effect.

Besides getting the ready to use codes from the tutorial, you can see how every step of the project is completed.

Here is the final demo of this tabbed content area.

markItUp! is a lightweight and customizable jQuery plugin which turns any textarea into a markup editor.

It has ready-to-use tag sets for HTML, textile, wiki syntax, markdown and BBcode inputs. Also, you can easily create your own.

jQuery Markup Editor

Some powerful features of this markup editor are:

  • Fast and unobtrusive integration
  • Support for keyboard shortcuts
  • Fully customizable and scriptable
  • Ajax dynamic preview
  • Customizable skins

jQuery File Tree is a customizable AJAX file browser plugin for jQuery which you can create a fully-interactive file tree with as little as one line of JavaScript code.

It already includes connector scripts for PHP and ASP.NET, expand-collapse events can be customized, and is fully standards-compliant with valid & semantic XHTML.

jQuery File Browser

Here is an exaple code for creating the file tree. See how easy it is:

$(document).ready( function() {
    $(’#container_id’).fileTree({ root: ‘/some/folder/’ }, function(file) {
        alert(file);
    });
});

You can style the file tree easily with CSS and use icons for file-types. This AJAX file browser requires jQuery easing plugin for the attractive effects.

Sitemaps, which make the website navigation easier, can be created using CSS with the "tree hierarchy".

CSS Sitemap uses list tags for the hierarch and formats the user interface nicely.

CSS Sitemap

For the last touch, CSS Sitemap lets collapsing the sitemap using a jQuery function.

Similar to Ext Grid, but built on jQuery, Flexigrid is a feature 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.

jQuery Data Grid

Features of this jQuery data grid plugin:

  • Resizable columns
  • Resizable height
  • Sortable column headers
  • Cool theme
  • Can convert an ordinary table
  • Ability to connect to an ajax data source (XML only)
  • Paging
  • Show/hide columns
  • Accessible API
  • More..

Similar to Lightbox, FancyBox, a jQuery powered image zooming script, zooms the images with very nice loading and zoom-in / zoom-out effects.

jQuery Image Zoom

Features:

  • Automatically scales large images to fit in window
  • Adds a nice drop shadow under the full-size image
  • Image sets to group related images and navigate through them

Basic usage:

$(function() {

    $("div#test_zone a").fancybox();

});

FancyBox works with the major web browsers and can be configured for different closing effects.

For JavaScript and AJAX applications, Taffy DB is a beautiful tool.

Taffy DB is an open source JavaScript library that acts as a data layer inside the applications. Just think of it as a SQL database in your web browser.

JavaScript Database Library

Let’s say you have a collection of products and you want to find every product that costs less than $10 and is not a book. Simple, just write some JavaScript:
products.find({price:{lessthan:10},
type:{not:"Book"}});

Major features:

  • Under 10K!
  • Simple, JavaScript Centric Syntax
  • Fast
  • Easy to include in any web application
  • Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
  • CRUD Interface (Create, Read, Update, Delete)
  • Sorting
  • Looping
  • Advanced Queries

Check out the Getting Started Guide for Taffy DB’s capabilities.

Easy News is a jQuery plugin which allows creating "news slides" on the fly.

Supporting any HTML content, and even Flash, it can display the content with fade-in / out, left to right ,slide-up / down effects.

Using this jQuery news slide plugin you can adjust the speed of the effects and rotation, or enable / disable mouse-over pause features.

jQuery News Slide Plugin

Easy News, has also a "plus" version which displays content with another sliding effect and can be integrated into Joomla with a ready to use module.

feed-holder
FeedBurner
  • Gooey Templates
  • Krop
  • slice'n dice
  • Website Magazine
  • DNS Pinger
  • Advertise Here