Advertise here with BSA

jQuery is so easy to use that sometimes we just forget that it’s not CSS. While using CSS, we don’t have to give much thought to performance, because it’s so fast that it’s not worth the effort to optimize it. But when it comes to the real world, jQuery can drive developers crazy with performance issues. Sometimes you lose precious milliseconds without even noticing it. Also, it’s so easy to forget about some functions and we keep using the old (and not-so-good) ones.

Let’s take a look at a few of the most-common-and-easiest-to-fix mistakes while using jQuery in your projects.

1. You aren’t using the latest jQuery version

Each version update means higher performance and several bug fixes. The current stable release is 1.7.2, and I’m pretty sure you know about plenty of sites developed using 1.6 and below. Ok, ok, you can’t just update every old site for every jQuery update (unless your client is paying you to do so) but you should at least start using it for your new projects. So, forget about this local copy and just grab the latest release every time you start a new project.

2. You aren’t using a CDN-hosted copy of jQuery

How many unique visitors you`ve got last month? I bet the number is still under 1 billion, right?
So you’d better use Google’s copy of jQuery instead of yours. If your user still has the cached file of Google’s website (or from many other sites that uses its CDN) his browser will just get the cached version, improving a lot your website’s performance. You can use it by copying & pasting this HTML:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

3. You aren’t using a fallback for CDN version

I know I said Google is awesome and stuff, but they can fail. So, every time you rely upon external sources, make sure you have a local fallback. I’ve seen this snippet in the HTML5 boilerplate source code and just found it amazing. You should use it too:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

4. You aren’t chaining stuff

While doing common operations, you don’t need to call the element every time you want to manipulate it. If you’re doing several manipulations in a row, use chaining, so jQuery won’t need to get the element twice.

Instead of this:

$(“#mydiv”).hide();
$(“#mydiv”).css(“padding-left”, “50px”);

Use this:

$(“#mydiv”).hide().css(“padding-left”, “50px”);

5. You aren’t caching stuff

This is one of the most important performance tips. If you’ll call an element at least twice, you should cache it. Caching is just saving the jQuery selector in a variable, so when you need to call it again you’ll just reference the variable and jQuery won’t need to search the whole DOM tree again to find your element.

/* you can use it this way because almost every jQuery function returns
the element, so $mydiv will be equal to $(“#mydiv”); also it’s good to
use the $mydiv so you know it’s a jQuery caching var */

var $mydiv = $(“#mydiv”).hide();
[.. lot of cool stuff going on here …]
$mydiv.show();

6. You aren’t using pure js

Specially for attributes modification, we have several built in methods to get stuff done with pure javascript. You can even “convert” jQuery objects back to DOM nodes to use them with simpler methods, like this:

$mydiv[0].setAttribute('class', 'awesome'); //you can convert jQuery objects to DOM nodes using $jqObj[0]

7. You aren’t checking plugins before including in your site

You know, jQuery is not the hardest thing in the world to code. But good JS (and jQuery), that is pretty hard. The bad news is that while you aren’t a good programmer, you’ll have to rely on trial and error to find out what is good and what isn’t. A few points you must be aware of while including a plugin in your project:

1. File Size (the easiest to check!) – if a tooltip plugin is bigger than jQuery source, something is really wrong;
2. Performance – You can try it with firebug and others. They give you easy to understand charts to you’ll know when something is out of place;
3. Cross-browsing – Test, at least on IE7, but Chrome, Firefox, Safari and Opera are good ones to try also
4. Mobile – Don’t forget that everything is getting mobile. See if the plugin works, or at least doesn’t crash your mobile browser

8. You aren’t open to remove jQuery

Sometimes it’s just better to remove it and use simple ol’ CSS. Actually if you want, for instance, an opacity hover, or transition can be done with CSS along with good browser support. And there’s no way jQuery can beat plain CSS.

9. You are using jQuery for server side tasks

I know that masking and validating are good, but don’t rely just on jQuery for those. You need to recheck everything on the server side. That is especially important if you are thinking about using AJAX. Also, make sure everything will work with JS disabled.

So, it’s your turn!

Do you have anything you think should be on this list? Share your thoughts!

Advertise here with BSA

Whether you’re already a pro at creating responsive web sites or your just learning what it’s all about, it’s good to have some scripts handy that you can easily integrate into your site. We all know how popular image and content sliders are now, and for good reason. So we decided to round up some jQuery slider plugins that are already responsive – meaning they will adapt to the size of their container.

Flexslider

FlexSlider is an awesome, fully responsive jQuery slider plugin. In other words, it resizes to fit the screen on which it is displayed, and looks good doing it. We love this slider so much that we use it in our responsive WordPress themes at Theme Trust.

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

unoslider

unoslider is a fully responsive, touch enabled, mobile optimized jQuery slider plugin.

Responsive Thumbnail Gallery Plugin

jQuery Plugin for creating image galleries that scale to fit their container.

wmuSlider

Elastislide – A Responsive jQuery Carousel Plugin

Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.

Responsive Image Gallery with Thumbnail Carousel

A jQuery image gallery with a thumbnail carousel. You can download it here.

Elastic Image Slideshow with Thumbnail Preview

Create an elastic slideshow with a thumbnail preview.

Advertise here with BSA

With a recently estimated over 20 million websites currently using jQuery it is essential to know what jQuery plugins there are out there in order to stay with the web design trend. Today, we’ll put some focus on some popular jQuery user interface plugins to help you enhance your current website to stay ahead of the crowd!

jQuery Image Parallax

Ever wanted an animated header but refused to put Flash on your website? Well, there is now a jQuery plugin which allows you to do just that with, you guessed it – zero Flash! It creates an overlay of images and animates them when your mouse hovers the header. Get that WOW factor with jQuery Parallax.

jQuery News Ticker

Ever wanted to display the latest news on your website in a sort of “headline news” way. Well, this jQuery News Ticker plugin will not only display your latest news it can also be loaded in from an RSS feed. This would allow you to display news from any website which has an RSS feed. Pretty cool!

jQuery Letterings

This awesome little jQuery plugin creates eye catching fonts, typical called web typography! It’s lightweight, easy to use and can really transform that ugly looking heading you’ve always hated into something quite spectacular. There is also a CSS3 fall back for those people who might (for some unknown reason) have JavaScript disabled.

jQuery Stylesheet Switcher

Designing a web page and can’t decide what styles to choose for a client? Well, this little jQuery plugin lets you switch stylesheets instantly with just a click of a link! Now you can switch back and forth when showing choosing designs with clients.

jQuery Page Peel

This little jQuery plugin which does exactly what it says on the tin – creates a page peel! This is a little page animation which sits at the top right hand of the screen and when the mouse hovers it the page “peels” down and reveals the content behind it. It could be used to display a popular area or feature of your website but is most commonly known these days to display advertisements. Let’s face it the page peel grabs your attention straight away!

jQuery Simple Modal

Lets face it, alert boxes which display things like “Wrong password” or “Saved.” are outdated! Well fortunately these days are over and there a few good jQuery plugins out there that manage modal boxes. These modal boxes are essentially windows which can be style customized to suit your website! The simple modal is my favorite as it’s so easy to implement and manage.

jQuery Scroll Slider

Ever wanted to grab someones attention when they are reaching the end of a web page, essentially to keep them from closing it? Well, with the jQuery Related web pages Scroll Slider you can do just that! As the visitor reaches the end of the page a sliding animation with slides out from the bottom right of the screen! Great Stuff!

jQuery Position Absolute

This nifty little jQuery plugin can make products fit on screen creating an interesting way of displaying them so that they are all visible. Now your days of reducing the size of your images to small thumbnails are over with this fantastic jQuery plugin.

jQuery Easy UI

This awesome jQuery plugin allows you to create amazing professional looking websites with ease. There are a whole range of demos of the different types of components to get you started. I have noticed it can be particularly useful for displaying data in tables using a DataGrid layout. It is very easy and yet so powerful!

jQuery iFrame/textArea Resizer

OK so you are using an iFrame to display a web page, form or images on your web page. iFrames usually have a fixed height and are a pain to resize across the different browsers. This little jQuery plugin allows you to resize iFrames and textAreas on your page with a nice grip bar, hassle free!

Advertise here with BSA

The jQuery programming library has dramatically changed the way we work online. Web developers are able to prototype animations and backend effects much quicker with fewer lines of code. This brings to the table a profound collection of functions which you can read about here. It doesn’t take long to figure out jQuery syntax, especially if you are fairly well versed using JavaScript.

But if you are new to the language it shouldn’t take long to get started. I’ve added a collection of great tips below for newbie programmers. If you are interested in coding frontend web applications then I highly recommend playing around in jQuery. Even understanding the most basic terminology can push you towards a much greater understanding of DOM manipulation and effects.

Setting Up your Documents

The first thing you’ll want to do is include the most recent version of jQuery. This is a no brainer as it’ll pull the source library into all your pages. Head over to jquery.com and check what their most recent version is. You have the option of downloading the file directly and packaging it with your web app. Or alternatively Google hosts all of the jQuery versions live via their servers.

If you include an external document from Google this saves you time on each pageload. Granted it won’t be much, but there are many advantages to this technique. Now we should start by checking if the document has loaded properly. This could be done in JavaScript, but jQuery offers advanced selectors so we can achieve this much quicker. Below is some example code:

$(document).ready(function() {
	//do stuff
});

The above block is using the jQuery $() selector syntax. Whatever object you place inside the parentheses becomes a focal point for all the functional code written afterwards. In this case we’re targeting our webpage document object. Inside the core function we could include any number of methods to preform directly on page load.

Creating Functionality

If you are struggling to understand how constructors are used to target elements, spend a bit of time browsing the jQuery tutorials section. Your selector is the most important part to any jQuery call, and you’ll be working with them in nearly every script.

But if we would like to create some basic functionality let’s build a small alert box upon clicking a link. This can be done in a few ways, and it really depends on your requirements. We could give the link a class or ID which can then become a target in jQuery. Remember that IDs are unique throughout any webpage and begin with a hash symbol(#) while classes can be used multiple times and are preceded with a period(.)

Below is some crude HTML and jQuery code to display our alert box. It’s worth noting that we are using two script tags altogether. The first is added within our heading to include the most recent jQuery library code. The second scripting tag will be written in the HTML to make things easier.

<body>
<script type="text/javascript">
$(document).ready(function() {
	$("a").click(function(e) {
		e.preventDefault();
		alert("hey there!");
	});
});
</script>

You can see I’ve added the code directly after our opening body tag. This isn’t required, as jQuery scripting is actually loaded before the full document. This is why when our code begins we’re selecting the entire document and passing the ready() function to check if it is finished loading. This structure is very basic for jQuery programming, so get used to this template.

Breaking Down the Code

This is a simple block, so we can expand fairly quickly. After our document has finished loading we call a new selector. This attaches a click event handler onto all the a links in your page. It doesn’t matter what their href value is set to, either way the code inside your function will be executed.

But if you do have links which lead externally the first bit of code prevents such behavior. Passing in a variable to your function (in this case we chose e) can store the event taken from any object. In this scenario we’re storing the click event from any hyperlink on your page. But the preventDefault() method will stop any link from loading further… very handy to save in your code snippets for later on.

Finally we call our alert() function with a small greeting. To test this out simply add a new link into your HTML document. Make sure you’ve also added the JavaScript code above and attached the latest jQuery library from Google Code APIs. Now this example is fairly practical as the code is reusable for other click events, too. Below we will delve into one more sector of programming in jQuery.

Creating Fade-ins and Fade-outs

The jQuery scripting library is best known for so many things. Document manipulation, DOM programming, applying text effects, and especially dynamic animations. Some of the simplest effects to understand are fades. These can reduce or increase the opacity of any given HTML element on your page.

Below I’ve worked out a simple fading effect which applies to specific types of paragraphs. These include some fancy styling to help them stand apart from the rest of your page. Of course, these are only implemented for this tutorial, so you should change the classes to suit your website.

<style type="text/css">
p.fading { font-family: Arial, Helvetica, sans-serif; background: #ccc; padding: 3px 7px; }
</style>

You can add this style anywhere or even include them into a separate .css file. We will be targeting paragraph elements with the class “fading”. I’ve just set the font to Arial, added some padding, and updated the background color to a light gray. We could also set opacity from here, but it’s easier to stick all that in our new jQuery code.

If you remember before we opened a $(document).ready() event for our link alert box. It’s a simple matter to add in some new code within this call, still inside our ready() function. I know this can be a bit confusing. Thus instead of including just the new code, I’ve added the whole block so you can see what changes have been applied.

<script type="text/javascript">
$(document).ready(function() {
	$("a").click(function(e) {
		e.preventDefault();
		alert("hey there!");
	});

	/* set opacity 30% */
	$("p.fading").css("opacity","0.3");
	$("p.fading").hover(function() {
		$(this).stop().animate({
			opacity: 1.0
		}, "slow");
	}, function () {
		$(this).stop().animate({
		opacity: 0.3
		}, "slow");
	});
});
</script>

So right after our click event handler I’ve added two separate bits of code. The first sets all paragraphs with the class of “fading” to 30% opacity. This number can be changed in accordance to the decimal values, such as 0.5 for 50%.

Afterwards I’ve set a similar method to the .click() handler which is hover(). Anytime you hover over a paragraph element with the class of fading our function will be called. What’s special about jQuery hover is that we can provide actions for both on hover and on release. This is why we have two defined functions, one setting full opacity and the other resetting back to 30%.

Try adding the code above into your same document from before. Be sure to add in a small paragraph with the class “fading”, and add some filler text. It’s absolutely amazing the amount of functionality which can be built in jQuery, all in a matter of just a few minutes.

Conclusion

This has been a brief introduction into some of the methods and syntax behind jQuery. This powerful programming language has changed the way we use the Internet and design modern websites. User interfaces can be drafted in just a few hours with full animations and wonderful effects.

The other great piece of jQuery is full extensibility. Developers have created and released a lot of plugins for free, all powered on the jQuery library. Check out a few to see if any can fill a requirement for your websites. Functionality is key, but without proper design and user support your website will become bloated and fall apart. Use jQuery sparingly in your code and with the right balance you can start building incredible interfaces at the drop of a hat.

Advertise here with BSA

jQuery helps us web designers and developers do some amazing things, and plugins make it almost too easy. That’s why it’s an obsession of mine to find new ones. I’ve been on the lookout for the past couple of weeks, and I’ve collected some good ones. Here are 8 Fresh and Useful jQuery Plugins.

Isotope

Isotype is a jQuery plugin for creating dynamic and intelligent layouts. It also lets you reveal & hide items with filtering, re–order items with sorting – all done with captivating animations.

jQuewy

jQuewy is a simple, efficient, and lightweight loader for javascript functions, with a powerful CDN-ready backend.

Sausage

Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.

ImageLens

ImageLens is a jQuery plug-in to add lens style zooming effect to an image.

jquery.timepickr.js

This jQuery plugin is an experimental approach to enhancing web time picking.

CodeExplorer

This jQuery plugin produces an online code explorer. It allows for different themes, multiple instances, fullscreen mode, github connections, and much more.

960 Grid on jQuery-Mobile

960 Grid on jQuery-Mobile is a port of 960 grid to jquery mobile. It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets.

jMenu

jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.

Advertise here with BSA

It seems that jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we’ve found some good ones for you. Here are 10 fresh jQuery plugins that you should find useful.

arbor.js

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

Mobily Map

MobilyMap is a jQuery plugin (7KB) that can create a Google Maps-like, draggable interface from any image.

Awkward Viewline

This is a simple plugin for displaying any type of media on a straight line. As an example it can be used for displaying a product line over the browsers entire width.

liteAccordion

liteAccordion is a horizontal accordion plugin that only weighs 4.5kb, and the themes don’t use any background images.

Zoomy

Zoomy is a quick and easy plugin that will zoom into a picture. You only need two copies of one image first the display image and then the zoom image.

Waypoints

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

Reveal

Reveal is a lightweight plugin that lets you easily create modal windows.

Subway Map Visualization

This plugin gives you a way to display data by generating HTML in the form of a subway map.

jQuery Runloop Plugin

With jQuery Runloop, you can create your own small runloop with keyframes at your own choosing, each with code to execute. You can put whatever code you want in each keyframe, rearrange keyframes easily, and use reusable maps of code and/or animations to share between runloops.

Activity Indicator

Activity Indicator is a jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML.

Advertise here with BSA

We all know and love jQuery for its flexibility and many uses. But some of the most impressive jQuery applications are those that involve images. It really can allow you to do some useful stuff and even add a “wow” factor to your project. So here we’ve rounded up 10 jQuery plugins to help you display images in your next project.

Slides

Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination.

Face Detection

Face Detection is an impressive plugin that does just what its name suggests. It detects faces in photos.

AviaSlider

AviaSlider is a jQuery slideshow plugin with unique transition effects.

Fullscreenr

So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image? This plugin does that.

Slidy

jQuery Slidy is a plugin that generates a customizable transitions automatically.

MobilyNotes

MobilyNotes is lightweight (2KB) jQuery plugin that shows your images or other html content in a stacked format.

jQuery Easy Slides

Easy Slides is an extremely easy to use plugin for making slideshows. It also has the advantage of being fairly light weight, with both Javascript and CSS weighing in at just under 2.1kb.

Booklet

Booklet is a jQuery plugin for displaying images and more in a book format with a turning page effect.

MobilySelect

MobilySelect is jQuery plugin (2kB) that replaces one collection of items with another.

Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.

Advertise here with BSA

jQuery is great for enhancing a website. Whether it be by adding effects that give the site a wow factor, or by making navigation easier, jQuery can have a big impact on the way a website is perceived and used. jQuery is extremely popular among web designers and developers for it’s flexibility, ease-of-use, and of course it’s plugins. So for this post, we’ve rounded up 10 more jQuery plugins and techniques that you should find very useful.

Supersized 3.0 Plugin

This plugin produces a full screen slideshow complete with transitions, preloading, and navigation controls.

Apple-like Retina Effect

Learn how to create an Apple Retina Display magnifying effect with jQuery and CSS.

Flip!

Flip is a jQuery plugin that will flip easily your elements in four directions.

jSlickmenu

jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It’s fairly easy to use, highly customizable and pretty cool (and fun!) to see.

jQuery Address

The jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state.

Overscroll

Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. The plug-in adds a draggable drift to overflowed DOM elements as well as a set of fading ‘thumbs’.

jQuery Page Curl

This jQuery plugin allows you to add an interactive page curl to your website.

Contactable

Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort.

Panning Slideshow

In this tutorial you’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides.

Sliding Labels

Sliding Labels is a nifty plugin that displays text fields with the labels inside. When the field is clicks, the labels slide out allowing the user to input text.

Advertise here with BSA

The popularity of jQuery continues to grow. This means that we’re seeing it used on more websites these days, and there are more developers coming up with new ways to use it. The great thing about that is many of these developers are sharing what they learn though tutorials and plugins. We’re always on the look out for this new jQuery stuff. So for this post, I’ve gathered 10 tutorials and plugins that will help you learn and implement some fresh jQuery effects in your projects.

Beautiful Background Image Navigation

This tutorial will teach you how to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position.

Quovolver

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.

Lettering.js

Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography.

imgAreaSelect

imgAreaSelect is a plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

An HTML5 Slideshow w/ Canvas & jQuery

This tutorial will help you create a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

Tiny Carousel

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library. Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

jQuery Panel Gallery 2.0

jQuery Panel Gallery is a plugin that converts a set of images into a slideshow with fancy transitions.

Collapsing Site Navigation

Learn how to create a collapsing menu that contains vertical navigation bars and a slide out content area.

Style my Tooltips

Style my Tooltips is a simple jQuery plugin to better style native browser tooltips.

jQuery Mega Select List

The jQuery Mega Select List is a plugin that converts a long select-list into a mega-menu style display, which makes it easier to find and select the right option.

Advertise here with BSA

Sometimes using tabs just makes a lot of sense. For instance, if you have a limited amount of screen real estate, tabs can allow you to save room by giving the user a way to toggle between several items in a small space. And to take your tabs a step further, you can throw jQuery into the mix for some nice transition and animation effects. If you’ve yet to build a tab navigation with jQuery, here are 11 tutorials and plugins to help you get going.

Create A Tabbed Interface Using jQuery

A tutorial and plugin for creating an animated tabbed area.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

In this tutorials you’ll learn how to create an AJAX-powered tab page with CSS3 and jQuery.

Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery

This tutorials teaches you how to build a dynamic tabbed blogroll with some fun jQuery animations.

Create a Slick Tabbed Content Area using CSS & jQuery

This tutorials teaches you how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

Feature List

This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.

Fancy Sliding Form with jQuery

This tutorial teaches you how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

Create A Tabbed Interface Using jQuery

This tutorial teaches you how to easily create a tabbed interface using the Tabs function in the jQuery UI library.

Tabify

This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.

Accessible-Tabs

jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.

idTabs

idTabs is a plugin for jQuery that makes adding tabs into a website super simple. But it can also open the door to endless possiblities.

jQuery Moving Tab and Sliding Content Tutorial

Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.