Event calendars and date pickers are really useful plugins for web applications. Wordpress does have a date picker, which allow bloggers to schedule the article.
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.
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.
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.
(more…)
Table is the most difficult object to be styled, due to its browser compatibility and markup. Most of the designers and developers will use div to replace table because it is much more easier to style div than table.
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.
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.
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.
(more…)
Syntax highlighting is very important especially when we want to show our code example on the blog. By enabling the syntax highlighting on the blog, readers can read the code blocks easier.
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.
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.
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.
(more…)
Photo Gallery, picture gallery, or slideshow are the best way to showcase your images/photos to your readers. There are a lot of different methods to create them and today we are going to look into different jQuery plugins that can be used to create a better photo gallery.
GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.
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.
(more…)
News Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.
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>
(more…)
We had shared a lot of useful resources about CSS/jQuery recently. Today, I am going to share useful resources and plugins to create a stylish chart. Graph and Chart are very effective ways of showing data.
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.
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.
This JavaScript Charts supports a lot of features and has a very good documentations. However, it is only free for personal use.
(more…)
There are a lot of different ways to implement tabs in our website. I had seen pure CSS implementation, Javascript implementation such as jQuery and MooTools tabs. Recently, my client request me to add tab interface to the current theme. So, i googled the web and found a lot of free scripts to do so. now, I am going to list down useful Javascript tabs that I found.
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.
(more…)
A lot of websites/blogs using page peel/page curl to add additional message such as advertisements at the corner. There are a lot of scripts that can achieve this function but unfortunately these scripts are not free.
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.
(more…)
