SlideDeck is a very powerful jQuery plugin to present your content on mobile phones and browsers is a very simple and clean slideshow. This jQuery powered plugin is easy to customize, powerful and able to deliver a better user experience to your readers.
Still remember our tutorial about jQuery Content Slider? SlideDeck brings all these slideshow and content slider to you in no time!
TopUp is a cross-browser compatible Javascript Library for creating popups to display images and web pages. To maintain the cross-browser compatibility, TopUp is jQuery and jQuery UI driven. However, Prototype developers can use TopUp along with Prototype by including TopUp before Prototype.
TopUp able to display various contents while maintaining your HTML code 100% clean. For example, it can display web pages, images, Flash, Yuotube, QuickTime, iframes and DOM elements. TopUp is compressed with Yahoo! YUI Compressor so that it is small in size and load faster.
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.
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.
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.
Tooltip is a good way to show extra information when user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out.
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.
qTip is an advance tooltip plugin which provides tonnes of features like rounded corners and speech bubble tips.
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.
(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.
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>
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.
Update: We have another article that covers tutorials and resources on creating graphs and charts using CSS(without Javascript/Flash).
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.
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.
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…)
WebDesignBooth.com is powered by Wordpress. Proudly hosted with WPWebhost.
