I am a big fan of jQuery, so i always use jQuery Calendar plugins to accomplish my tasks when the clients asked me to implement an event caldendar for them. In this article, i would like to share 9 really useful jQuery Event Calendar and Date Picker plugins that every web designers and developers should know.

1. FullCalendar

FullCalendar is a famous jQuery calendar plugin which offers features like drag-and-drop, integration with Google Calendar and able to fetch events through JSON. Designers can easily customize the look and feel of the calendar, while developers can utilize the exposed hooks for user-triggered events.

2. Astonishing iCal-like Calendar

This is a tutorial which uses both jQuery and CSS to build an iPhone styled calendar application. The author also implement the Coda-like effect for the popup event.

3. jQuery UI Datepicker

The jQuery UI Datepicker is a highly configurable plugin that adds date picker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

4. jMonthCalendar

jMonthCalendar supports full month calendar and events. The interesting part of this plugin is it allows developers to interact with the calendar.

5. Date Picker

Date Picker is a jQuery calendar plugin released under MIT and GPL licenses. It has a lot of options and features. For example, you can have multiple calendars in the component, mark dates as special days, easy to customize through CSS and allow different selection modes. All these can be easily setup though the configuration options.

6. jQuery Week Calendar

jQuery Week Calendar is a plugin which will include a weekly calendar in the web application. The events can be supplied as an array or JSON, and these events can be easily drag, drop and resize. There are a lot of options and event callbacks which you can refer through the official plugin page.

7. Simple jQuery Date-picker Plugin

This is a very simple date picker plugin. However, it provides a lot of useful and necessary features for a date picker. For example, you can easily navigate to the months and years through the drop down selection boxes.

8. jQuery Date Picker Plugin

This is an clean, unobtrusive plugin for jQuery which allows you to easily add date picker to your web forms and pages. There are a lot of configurations and options for this simple plugin. You can refer to the plugin page for more examples of how to use this plugin.

9. jQuery Interactive Date Range Picker

This powerful date range picker is a modified version of jQuery UI’s Datepicker component. It has a quicker date selection from a list of preset dates/ranges and a smooth transitions. The latest version uses the jQuery UI 1.7 and jQuery UI CSS Framework. With the power of jQuery UI, user can now switch the calendar theme easily.

Related Posts

• 15 Great jQuery Plugins For Better Table Manipulation
• 15 jQuery Plugins To Create A User Friendly Tooltip
• 9 Useful Wordpress Poll And Rating Plugins
• 18 Useful Wordpress Contact Form Plugins
• SlideDeck – Cool jQuery Plugin For Slideshow

But, we still need table in our daily applications, one of the best example is comparison table. This article will share 15 useful jQuery table plugins for you to display, sort, filter and manipulate your data in table.

1. DataTables

DataTables is very powerful jQuery plugin which offer a lot of features. For example, you can have on-the-fly filtering, ajax auto-loading of data, pagination, sorting columns, highlight sorted columns, extensive plug-in support, themeable by CSS or jQuery UI ThemeRoller and also a complete documentation.

2. uiTableFilter

uiTableFilter is a jQuery plugin for filtering table rows. The author shows a detailed example on how to implement the filter function for your table together with the plugin.

3. Scrollable HTML Table

Scrollable HTML Table plugin for jQuery able to convert a table into scrollable.

4. Tablesorter

Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. It supports multi-column sorting, cross-browser and easily extensible via its widget system.

5. Flexigrid

Flexigrid is a lightweight Web 2.0 Javascript Grid for jQuery. It has a lot of cool features such as theming, paging, toolbar, search, sortable, ajax loading data source, resizable columns, height and width.

6. HeatColor

HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element.  The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.

7. JQTreeTable

With JQTreeTable, you can have a treeview in your table. With this plugin, users still get the plain table even thought they disable Javascript.

8. Ingrid

Ingrid is yet another jQuery Datagrid plugin. It has features like column resizing, paging, sorting, row and column styling and more. The author’s website provide great documentation on how to get started with this plugin.

9. jQuery ColumnManager plugin

columnManager is a jQuery plugin that able to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. This is a very tiny and lightweight plugin which is only 3.6kb packed.

10. jQuery treeTable

jQuery treeTable is similar with JQTreeTable, which is able to display a tree in a table. This plugin keeps the HTML documents clean and will degrade nicely when Javascript is disabled in the browser.

11. CSV2Table

CSV2Table will load a CSV file and creates a table with contents from the CSV files.

12. Table Pagination

This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.

13. jQuery TableRowCheckboxToggle

This plugin can add toggle checkbox to any rows that can be specified through the CSS class names.

14. Table Drag and Drop jQuery plugin

This simple plugin allows user to reorder rows within a table usingd rag and drop. Individual rows can be marked as non-draggable and/or non-droppable.

15. uiTableEdit

uiTableEdit is another cool jQuery able plugin from Greg Weber, the author for uiTableFilter. uiTableEdit will makes the tables editable by users.

Related Posts

• 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers
• 15 jQuery Plugins To Create A User Friendly Tooltip
• 9 Useful Wordpress Poll And Rating Plugins
• 18 Useful Wordpress Contact Form Plugins
• 5 Alternative And Tiny CSS Grid Systems

There are a lot of free and useful syntax highlighting scripts around us. Most of the scripts are written using Javascripts, though some of them are powered by other programming languages such as Phyton or Ruby.

Today, we are going to look into 9 Syntax Highlighting Scripts that powered by Javascript.

1. SyntaxHighlighter

I believe this is the most common syntax highlighting script used by most of us. It supports a lot of different languages and you can easily create new “brush” for your language if it is not supported by default. Check out the custom brushes list compiled by Abel Braaksma.

2. SHJS

SHJS stands for Syntax Highlighting in Javascript. It uses language definations from GNU Source-highlight and support a lot of different programming languages. SHJS has been tested and support major browsers sych as Firefox 2 and 3, IE 6 and 7, Opera 9.6, Safari 3.2 and Chrome 1.0.

3. beautyOfCode

beautyOfCode is a jQuery plugin for syntax highlighting. It uses the SyntaxHighlighter scripts by Alex Gorbatchev and makes it more XHTML-compliant.

4. Chili

Chili is a jQuery code syntax highlighting plugin. It comes bundled with recipes for a lot of languages and supports many configuration options.

5. Lighter.js

Lighter.js is a free syntax highlighting plugin for MooTools. Using lighter.cs is as simple as adding a single script to your webpage.

6. Highlight.js

highlight.js is easy to use and supports a lot of programming languages. It has some plugins for easily integrations to other CMS, forum or blog.

7. DlHighlight

DlHighlight is a simple syntax highlighting scripts that supports only 4 programming languages: JavaScript, CSS, XML, HTML.

8. Google Code Prettify

Google Code Prettify a Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page. It is the scripts wich powers code.google.com.

9. JUSH

JUSH is yet another jQuery syntax highlighting plugin which supports different programming languages such as HTML, CSS, PHP, PY and SQL.

Related Posts

• TopUp – Javascript Library For Pop Up And Lightbox
• 14 Javascript Resources And Plugins For Creating A Stylish Chart
• 25+ Useful Javascript Tab Navigation Scripts
• SlideDeck – Cool jQuery Plugin For Slideshow
• Highcharts – Pure Javascript Charts Library

1. GalleryView

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

2. Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play. Pikachoose is designed to be easily installed and easy to setup.

3. Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded.

4. Galleriffic

Galleriffic was inspired by Mike Alsup’s Cycle plugin, but with performance in mind for delivering a high volume of photos.

5. Supersized

Supersized is an image gallery built by BuildInternet.com and it is able to slideshows the images with full screen. Besides that, it has navigation controls that allow for pause/play and forward/back.

6. slideViewer

slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images.

7. Easy Slider

Easy Slider (as I call this plugin) enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.

8. EOGallery

EOGallery is a web animated slideshow gallery maid with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures.

9. jQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

10. jqGalScroll

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

11. jQuery Scroll Show

ScrollShow is a unique photo gallery implementation that uses scrolling to display the items.  It’s similar to a carousel implementation, but simpler and more flexible.

12. prettyPhoto

prettyPhoto is a jQuery lightbox clone. It has excellent animations and support themes.

13. Space Gallery

Space Gallery is another fancy jQuery photo gallery plugin. click on the image will make it fade away and the next image will move forward.

14. PictureSlides

PictureSlides is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects, if desired.

15. Image Gallery by qd-creative

This is a simple image gallery created by the author of qd-creative.co.uk.

Related Posts

• SlideDeck – Cool jQuery Plugin For Slideshow
• Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin
• TopUp – Javascript Library For Pop Up And Lightbox
• 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers
• 15 Great jQuery Plugins For Better Table Manipulation

If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces. Today, we are going to see 15 jQuery plugins to create an user friendly tooltip.

1. qTip

qTip is an advance tooltip plugin which provides tonnes of features like rounded corners and speech bubble tips.

2. jQuery Tools/Tooltips

This tooltip plugin can contains any HTML element such as links, table, forms, and images. Implementing this plugin is very easy. The default effects are sliceup and toogle. However, you can easily build your own effects.

3. Simpletip

Simpletip allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

4. jQuery (mb)Tooltip

jQuery (mb)Tooltip is a beautiful alternative tooltip which is depended on jQuery timers and dropshadow plugins. It has a lot of options for different needs.

5. EZPZ Tooltip

It is flexible enough to customize the look and feel without requiring the bloat of any CSS or images. Hover targets should be mapped to their content counterparts by convention.

6. jQuery Input Floating Hint Box

It provides an automatic box hint in the right side of an input, when focus on that input, and disappear when focus go (blur).

7. HTML Tooltip

Inline HTML Tooltip lets you define rich HTML tooltips that are embedded directly inside your webpage and that appear when the mouse rolls over links on your page. The tooltip appears directly beneath the anchor link, and adjusts its position dynamically based on whether the mouse is too close to the window’s edges.

8. Orbital Tooltip

With the Orbital Tooltip you can choose to position the tooltip on any object in a 360 degrees around it.

9. Tipsy

Tipsy is a jQuery for creating a Facebook-like tooltips effect based on an anchor tag’s title attribute.

10. clueTip

The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script.

11. jTip

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.

12. BeautyTips

BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event.

13. Hovertips

The hovertip plugin is quite flexible. With a little javascript, you can customize which nodes become the tooltips and which targets activate them.

14. BetterTip

BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on  Cody Lindley’s jTip, but it is much more flexible.

15. jqTooltip

The jQuery Tooltip Plugin allows you to easily create tooltips with ajax content.

Related Posts

• TopUp – Javascript Library For Pop Up And Lightbox
• 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers
• 15 Great jQuery Plugins For Better Table Manipulation
• 9 Useful Wordpress Poll And Rating Plugins
• 18 Useful Wordpress Contact Form Plugins

There are a lot of great tutorials discussing on how to implement news ticker, however most of the tutorials that i found are not really suitable for a beginner. So, i decided to use jQuery and its plugin jCarousel Lite to create a simple yet powerful news ticker.

Why i choose jCarousel Lite? it is because jCarousel Lite is a tiny but powerful plugin. Furthermore, you can easily tweak/configure it to achieve different effects. News ticker is just a sample application for this plugin.

Let’s start to create our news ticker using jCarousel Lite. Download both jQuery and jCarousel Lite before we can start.

Step 1

Let’s create a blank index.htm file, and include jQuery and jCarousel Lite. Also, create a blank style.css file for later use.

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="jcarousellite_1.0.1c4.js" type="text/javascript"></script>
</head>
</html>

Step 2

In the same document, create a <div> and name it as “newsticker-demo”. Basically, this is the container for the news ticker. We will have another <div> class name “newsticker-jcarousellite”. Remember, this is very important and you will need to use the same class name when you configure jCarousel Lite.

Step 3

In the “newsticker-jcarousellite” <div>, create an <ul> element. Each news will be an individual <li> element. In this example, i had created 6 news, so i will have 6 <li> elements(but i am not going to show all). We will have the thumbnail float to the left, while the title and other information float to the right.

<li>
    <div class="thumbnail">
        <a href="#"><img src="images/1.jpg"></a>
    </div>
    <div class="info">
        <a href="http://www.vladstudio.com/wallpaper/?knight_lady">The Knight and the Lady</a>
        <span class="cat">Category: Illustrations</span>
    </div>
    <div class="clear"></div>
</li>

Step 4

After you created your <li> element, it is the time for us to configure the jCarousel. Under the <head>, add these scripts:

<script type="text/javascript">
$(function() {
$(".newsticker-jcarousellite").jCarouselLite({
        vertical: true,
        visible: 3,
        auto:500,
        speed:1000
    });
});
</script>

The script itself is pretty straight forward. The “auto:500″ means it will auto-scroll every 500ms. There are a lot of options which you can configure easily. Refer the documentation for more information.

Step 5

Basically you had done everything, except styling your content. So, just copy and paste the scripts below in your style.css file.

* { margin:0; padding:0; }

#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}

#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }

#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}

.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

.clear { clear: both; }

Finish!

That’s all! You can view the demo here, or download the source code for your own project.

Related Posts

• Step By Step To Create Content Slider using jFlow, A Minimalist jQuery Plugin
• SlideDeck – Cool jQuery Plugin For Slideshow
• TopUp – Javascript Library For Pop Up And Lightbox
• 9 Useful jQuery Calendar And Date Picker Plugins For Web Designers
• 15 Great jQuery Plugins For Better Table Manipulation

There are a lot of different methods to generate graphs/charts. For example, you can use Flash, Javascript, CSS, or server side script such as PHP or ASP to generate them. Today, we are going to look into Javascript solutions to generate charts.

Update: We have another article that covers tutorials and resources on creating graphs and charts using CSS(without Javascript/Flash).

1. Creating accessible charts using canvas and jQuery

This article show you how to use fgCharting, a jQuery plugin to convert HTML table into a stylish chart/graph. This plugin support several different types, such as line, filledLine, additiveLine, additiveFilledLine, pie, bar, additiveBar.

2. Emprise JavaScript Charts

This JavaScript Charts supports a lot of features and has a very good documentations. However, it is only free for personal use.

3. Flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

4. Canvas Pie Chart with Tooltips

This Mootools pie chart class is based on Stoyan Stefanov’s Canvas Pie.The code now requires less html markup than the original.

5. jQuery Google Charts

6. jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

7. moochart

moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

8. JS Charts

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting

9. ProtoChart

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

10. Raphaël—JavaScript Library

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

11. PlotKit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

12. Flotr Javascript Plotting Library

Flotr is a javascript plotting library based on the Prototype Javascript Framework and inspired by Flot.Flotr enables you to draw appealing graphs in most modern browsers with an easy to learn syntax.

13. Yahoo! UI Library: Charts

The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies

14. TufteGraph

TufteGraph is a beautiful jquery Chart plugin.

Related Posts

• Highcharts – Pure Javascript Charts Library
• 25+ Useful Javascript Tab Navigation Scripts
• TopUp – Javascript Library For Pop Up And Lightbox
• 9 Useful Javascript Syntax Highlighting Scripts
• SlideDeck – Cool jQuery Plugin For Slideshow

jQuery plugin

1) jQuery UI Tabs

This tab script is built in to the jQuery UI and there are a lot of configurations. For example, you can have rotating tabs, nested tabs, and etc.

2) jQuery idTabs

jQuery idTabs makes adding tabs into a website super simple, but it also open the door to endless possibilities.

3) Minitabs – jQuery minimalistic approach to tabs
Minitabs looks simple, but I can’t found any working demo from the website.

MooTools plugin

4) MooTabs

MooTabs is a tiny class for MooTools and you can load tab content via Ajax request. It will only works on MooTools 1.1.

5) Pluggable MooTools Tabs

6) Sliding Tabs

Sliding Tabs is a cool MooTools 1.11 plugin that mimic Panic software’s Coda site. For MooTools 1.2, you have t go for other plugin such as Perspective Tabs.

7) Perspective Tabs

Perspective tabs is a simple MooTools plug-in that allows for a lagre number of tabs to fit into a small space.

MorphTabs

MorphTabs is a clone for MooTabs by Shaun Freeman. But, MorphTabs will only works for MooTools 1.2 and above.

9) Accessible Ajax Tabs with MooTools

Other Javascript Tabs

10) Yetii – Yet (E)Another JavaScript Tab Interface Implementation

It is an extremely lightweight and object-oriented javascript code. You can even define custom function to run when certain tab is clicked or user leaves the tab.

11) DOMTab – Navigation tabs with CSS and DOM Scripting

DOMTab is a popular Javascript tab implementation script. Basically, it will turn a list of links connected to content sections into a tab interface. You can get example code through the website.

12) JavaScript Tabifier – Automatically create an html css tabs interface

This is a plug-and-play Javascript tab script. To use it, simple include the js file and make some minor modifications to your current html code. Use CSS to customize the tabs’ appearance.

13) dhtmlxTabber – AJAX powered DHTML Javascript Tabber component

This AJAX-enabled component lets you create nice looking and feature-rich tabs easily. You can put your tabs to left, right, top or buttom aligned according to the predefined or your own style.

14) Tabtastic

Tabtastic supports multiple or nested tabsets on the same page and allow users to bookmark the page loading to a specific tab.

15) Kollermedia Tab Menu

This ia a Javascript tab implementation that used by Kollermedia. The author implemented the script by himself and decided to share the scripts with us after received feedbacks from his readers.

16) Ajax Project – Tabbed Page Interface

This is a script that can load a new page to the tab without a page refresh.

17) XP Style Tab Panes

To get this script working properly, simply put your content into separate “div”s and then call a javascript function which creates the tabs dynamically.

18) Ajax Tabs Content Script from Dynamic Drive

This is an Ajax tabs script that lets you display content pulled from external files inside a “div” and organized wia CSS tabs.(Non-Ajax version here)

19) DD Tab Menu from Dynamic Drive

DD Tab Menu is a standards compliant, 2 level tab menu script. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.

20) DOM dynamic Tabs

DOM dynamic Tabs allows you to easily create tabbed content on the fly without creating HTML.

21) Tab Pane

The look and feel of Tab Pane is entirely decided by CSS. So, you can change it easily through creating different styles.

22) SimpleTabs by Komrade

SimpleTabs doesn’t depend on any third party Javascript library so it will not cause any conflict if you are already using any Javascript library such as jQuery or MooTools. It is small in size and can remember last tab clicked before you reload your page.

23) Closeable Tabs module

The closeable tabs module allows tabs to be removed. The HTML markup for this tabs module is same as standard tabs module.

24) Yahoo UI Library: TabView

This is another tab component by Yahoo UI Library. It comes with a cheat sheet, good tutorials and also examples.

25) Advanced Tabs from EXT JS

This is the most powerful tabs component that I can found. It comes with a lot of features such as auto tab resizing, tab scrolling, icons, context menu plugin, and also add/remove tabs via script.

26) Nanotabs

Nanotabs is a tiny version of idTabs that doesn’t require jQuery. It is only 2KB in size!

27) Fabtabulous – Simple tabs using Prototype

This is a tab implementation using another famous Javascript framework – Prototype.

Related Posts

• 14 Javascript Resources And Plugins For Creating A Stylish Chart
• Building Tabbed Navigation using SpryTabbedPanels
• TopUp – Javascript Library For Pop Up And Lightbox
• 9 Useful Javascript Syntax Highlighting Scripts
• Horizontal Navigation Menus: Tips, Tricks and Showcases

Recently, 1 of my client requests me to implement page curl on his WordPress theme. So, I search through the internet and found some free and extremely simple ways to implement it.

1) Simple Page Peel Effect with jQuery and CSS by Soh Tanaka

In this example, Soh Tanaka show us how to achieve the page peel effect using purely jQuery and CSS.

2) The Sexy Curls jQuery Plugin

This is another open source jQuery plugin to achieve page peel/page curl effect by Elliott Kember. To use this plugin, you are required to install both jQuery and jQuery UI.

3) jQuery Page Peel 1.2 by Smpl Multimedia

The jQuery Page Peel by Smpl Multimedia is a minimalist jQuery plugin that achieve page peel effect. Also, there are a lot of options for you.

4) How to create a page peel advertisement in WordPress

You had seen so many free jQuery scripts to create page peel effect, but what happen if you want to integrate it with your blog? You may follow the tutorial from PCandWeb if you are using WordPress.

5) WordPress Page Peel plugin

If you are using WordPress and want a cool Web 2.0 style flash page peel effect, then you should consider Page Peel plugin for WordPress by Avramovic. It comes with a admin configuration panel.

Conclusion

The first 3 methods using jQuery while the last 2 methods use flash to achieve page peel effect. Using Flash to achieve page peel will have better animation, while using jQuery will have smaller file size and load time.

So, it is depended on yourself to choose which method to use.

Related Posts

• The Dynamic World of Sports Flash Websites
• FlashMoto: Top Flash Content Management System
• SlideDeck – Cool jQuery Plugin For Slideshow
• 23 Professional Facial Photoshop Retouching Tutorials
• TopUp – Javascript Library For Pop Up And Lightbox