Spritely provides two key methods, sprite() and pan() both of which simply animate the background-image CSS property of an element. The difference between the two is that a ’sprite’ image contains two or more ‘frames’ of animation, whereas a ‘pan’ image contains a continuous image which pans left or right and then repeats.

Developed by Artlogic Media; Spritely is dual licensed under the MIT or GPL Version 2 Licenses. You can find further information, documentation, demo & download on Spritely Website.

Similar Posts:

• Replace One Group of Items With Another Using Quicksand
• Let DOM Object Follow Your Page With Scroll Follow
• Dynamic Behavior Based on Page Scrolling With ScrollSpy
• QuickFlip 2 – The jQuery Flipping Plugin
• jQuery PageSlide Plugin

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

GetSimple is ideally suited for small to medium site websites. IF you are comfortable with WordPress theme development, you will really like GetSimple. Like WordPress, GetSimple allows developer to create their won themes and extend its functionality using Plugins. Plugins enables you to provide customized solutions without having to make things too complex.

Features

• XML Based – No Databases
• You can “Undo” Almost Everything
• Easy to Learn UI
• Simple Installation
• Simple Theme Customization
• Sitemap Generation & Pinging
• Website Archives
• Keyword & Tagging Suggestions
• Cron Ability
• Comprehensive Logging
• Friendly URLs
• Extend CMS with Plugin System

Developed by Chris Cagle; GetSimple is available for download under GNU General Public License. You can find further information, documentation, demo & download on GetSimple Website.

Similar Posts:

• TomatoCMS: CMS Powered By Zend, jQuery and 960 Grid System
• jCore: Open Source Multisite CMS
• Pligg – Social Publishing CMS
• QuickChange: Free In-Line Content Editor
• JoobsBox: Open Source Job Board

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

jCore has two main systems, jCore Server – which holds all the libraries and modules, and jCore Client – which is the stripped version of the core system that install with each website. You don’t really need to install jCore server, just copy the files in a public place so that all you websites can access it.

jCore allows designers to easily create custom look & feel of their website by simply adding new blocks (DIVs) from the admin area and apply any style (CSS) or script (jQuery). The developer on the other hand can easily  create new Modules to extend the site’s functionality.

Features

• Custom Look & Feel with CSS/JavaScript
• Multilanguage Support
• Multiple Menus
• Manage your site’s content with a WYSIWYG editor and attach files/pictures to them
• Create submit forms with custom fields and store or send values trough email
• Extend your site with new functionality like Photo Gallery or a File sharing module and so on
• Include posts, modules, blocks, forms and other are of your site in your posts/blocks contents
• Keep your readers up to date with RSS feeds
• Easily place ad codes / banners on your site and earn money
• Manage your site members or send out mass emails to let them know about news
• SEO Friendly Links
• Custom 404 Error Page

Developed by Istvan Petres; jCore is available for download under GNU General Public License. You can find further information, demo & download on jCore Website.

Similar Posts:

• Pligg – Social Publishing CMS
• TomatoCMS: CMS Powered By Zend, jQuery and 960 Grid System
• GetSimple: XML Based Content Management System
• GalleryCMS: Free CMS For Managing Photo Galleries
• Open Atrium – Open Source Intranet Package Powered by Drupal

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Image Power Zoomer is pretty simple to implement. Based on your understanding of jQuery selectors, you can apply the power zoom effect on an image using variety of ways (e.g., if you need to apply it to multiple images you can select images using class attribute). Image Power Zoomer is a cross browser plugin that works on all major browsers including IE6.

Features

• Applies the zoom effect to any image on the page without adding any additional markup to it.
• The default zoom level can be changed for each image.
• When the user scrolls the mouse wheel while over the image, the zoom level decreases or increases based on the scroll direction.
• The range of zoom can be changed.
• The size of the “magnifier” can be changed for each image.

Developed by Dynamic Drive; Image Power Zoomer is available for download for Free. You can find further information, demo & download on Dynamic Drive Website.

Similar Posts:

• jQZoom Evolution – JavaScript Image Magnifier
• maxImage: jQuery Image Scaling
• Create 360 Degree View of Images With jQuery Reel Plugin
• JavaScript Image Cropper UI
• YoxView: jQuery Image Viewer Plugin

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Floom is lightweight and really simple to implement. You can either specify the image URL and the caption using the key-value notation inside JavaScript or by adding image tags inside a <div>. If you specify images in your markup you can provide image caption is the title attribute.

Features

• Specify directory where to look for images/slides
• Enable or disable progress bar
• Enable or disable captions
• Specify interval between slide change
• Specify amount of blinds
• Specify animation duration
• Specify axis: either horizontal or vertical

Developed by Oskar Krawczyk; Floom is available for download under the MIT Licenses.  You can find further information, demo & download on Floom Website.

Similar Posts:

• jQuery Easy Slides
• loopedSlider jQuery Plugin
• YoxView: jQuery Image Viewer Plugin
• jQuery Infinite Carousel Plugin
• Supersized – Full Screen Background Slideshow

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Less Framework layouts work perfectly in Chrome, Safari 3.0+, Firefox 3.0+ and Internet Explorer 7+. Your layout will collapse into a single column in legacy browsers and on small screens. The frameworks allow you to use HTML5 tags with the help of HTML5 enabling JavaScript file.

Developed by Joni Korpi; Less Framework is available for download under Creative Commons Attribution License.  You can find further information, demos & download on Less Framework Website.

Similar Posts:

• 52Framework: HTML5 and CSS3 Framework
• Elastic CSS Framework – Easily Make Elastic, Fixed & Liquid Layouts
• EZ-CSS: Lightweight CSS Framework
• Definitive List of CSS Frameworks – Pick Your Style
• Definitive List of Free WordPress Theme Frameworks

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

RegExr has very simple and easy to use interface. It provides you with built in sample (organized into various categories) for quick reference. You can also search through expressions shared by the community and share your own. It also allows you to save your own expressions locally.

Features

• Real time results: shows results as you type
• Code hinting: roll over your expression to see info on specific elements
• Detailed results: roll over a match to see details & view group info below
• Built in regex guide: double click entries to insert them into your expression
• Save your expressions: My Saved expressions are saved locally
• Share and rate expressions: search Community expressions and share your own

Developed by Grant Skinner; RegExr is a free tool that you can use online or download it desktop version.  You can start using the online version by visiting RegExr Website.

Similar Posts:

• Interactive Learning Tool – Google’s AJAX APIs Playground
• Show If: PHP Code Generator For Targeting Visitors
• List of Really Useful Free Tools For JavaScript Developers
• Test Your MooTools Code With MooShell
• Online Mini IDE and Debugging Tool

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Featured authors include: Matt Hedberg, Kevin Liew, Mary Lou, James Costa, Rob Flaherty, Nick La, Adnan Osmani, Lam Nguyen, Christian Heilmann, Chris Spooner, Madhuri & Mona, Mike More, David Walsh, Johnny, Marco Kuiper, Nikunj Sakhrelia, Jeffrey Way, Chris Coyier, Martin Angelov, Mehdi Mousavi, Louis Simoneau, Soh Tanaka, Zach Dunn,Chris Lea, Sameer Borate, and Jonathan Snook.

• Useful and Practical jQuery Image ToolTips Tutorial
  By Kevin Liew, February 26th, 2010
  Site: Queness
• Having fun with jQuery and HTML 5
  By Mehdi Mousavi, February 26th, 2010
  Mehdi Mousavi
• Design a Prettier Web Form with CSS 3
  By Matt Hedberg, February 25th, 2010
  Site: Nettuts+
• How To Get Digg, Delicious and Tweet Counts Using jQuery
  By Saud Khan, February 24th, 2010
  Site: W3Avenue
• Grungy Random Rotation Menu with jQuery and CSS3
  By Mary Lou, February 24th, 2010
  Site: Codrops
• The Taxonomy of Type
  By James Costa, February 23rd, 2010
  Site: The Phuse
• Serving Static Content from a Cookieless Domain
  By Rob Flaherty, February 23rd, 2010
  Site: Ravelrumba
• CSS3 Dropdown Menu
  By Nick La, February 23rd, 2010
  Site: Web Designer Wall
• How To Create a Website Toolbar From Scratch and Add Widgets To It
  By Adnan Osmani, February 22nd, 2010
  Site: AddyOsmani
• Learning jQuery: Your First jQuery Plugin, “BubbleUP”
  By Lam Nguyen, February 22nd, 2010
  Site: AEXT
• The Seven Deadly Sins Of JavaScript Implementation
  By Christian Heilmann, February 22nd, 2010
  Site: Smashing Magazine
• A Guide to Creating Professional Quality Logo Designs
  By Chris Spooner, February 22nd, 2010
  Site: SpoonGraphics
• Adding Markers to a Map Using the Google Maps API and jQuery
  By Madhuri & Mona, February 17th, 2010
  Site: Sitepoint
• Create a Slick Menu using CSS3
  By Insic, February 17th, 2010
  Site: Insic Designs
• Make your MooTools Code Shorter, Faster, and Stronger
  By David Walsh, February 17th, 2010
  Site: Nettuts+
• Pure CSS3 Bokeh Effect With Some jQuery Help
  By Marco Kuiper, February 16th, 2010
  Site: Marcofolio
• Future of CSS: The Flexible Box Model
  By Johnny, February 16th, 2010
  Site: Webtint
• How to Pull Your Google Buzz with jQuery
  By Mike More, February 15th, 2010
  Site: AEXT
• Create an Animated Sliding Button Using MooTools
  By David Walsh, February 15th, 2010
  Site: David Walsh Blog
• How to Build a Custom Wordpress Theme from Scratch
  By Chris Spooner, February 15th, 2010
  Site: SpoonGraphics
• How to Code up a Web Design from PSD to HTML
  By Chris Spooner, February 15th, 2010
  Site: Line25
• HTML5 and CSS3: A 3D Progress Bar
  By Nikunj Sakhrelia, February 15th, 2010
  Site: IT Shala
• Top 10 Things that JavaScript Got Wrong
  By Jeffrey Way, February 12th, 2010
  Site: Nettuts+
• HTML 5 Web SQL Database
  February 12th, 2010
  Site: OpenBit
• Animate Panning Slideshow with jQuery
  By Zach Dunn, February 11th, 2010
  Build Internet
• jQuery MagicLine Navigation
  By Chris Coyier, February 9th, 2010
  Site: CSS-Tricks
• Making a Sleek Feed Widget With YQL, jQuery & CSS3
  By Martin Angelov, February 9th, 2010
  Site: Tutorialzine
• Debug PHP with Firebug and FirePHP
  By Louis Simoneau, February 9th, 2010
  Site: Sitepoint
• How nth-child Works
  By Chris Coyier, February 8th, 2010
  Site: CSS-Tricks
• Automatic Image Slider With CSS & jQuery
  By Soh Tanaka, February 8th, 2010
  Site: Soh Tanaka
• Bulletproof backups for MySQL
  By Chris Lea, February 4th, 2010
  Site: Think Vitamin
• Making a Photoshoot Effect With jQuery & CSS
  By Martin Angelov, February 3rd, 2010
  Site: Tutorialzine
• Reading Google Analytics data from PHP
  By Sameer Borate, February 1st, 2010
  Site: Code Diesel
• Multiple Backgrounds and CSS Gradients
  By Jonathan Snook, February 1st, 2010
  Site: Snook.ca

So which tutorials you found most useful. Also feel free to recommend any good article that we may have missed.

Similar Posts:

• Really Useful Tutorials You Should Have Read in July 2009
• Really Useful Tutorials You Should Have Read in November 2009
• Really Useful Tutorials You Should Have Read in September 2009
• Really Useful Tutorials You Should Have Read in August 2009
• Really Useful Tutorials You Should Have Read in October 2009

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Implementing jqFancyTransitions is pretty simple; all you have to do add image tags inside a placeholder with unique “id”. In order to add multiple slide shows in your page, you just need to specify different “id” for each placeholder. You can add captions to each slide using “alt” attribute.

Features

• Three predefined effects:  Wave, Curtain and Zipper.
• You can make custom effects by setting your own speed, number of strips, direction, type of effect, etc.
• Supports multiple slideshows in a single page.
• Can work without any additional CSS, and can be easily styled via CSS.

Developed by Ivan Lazarevic; jqFancyTransitions jQuery Plugin is dual licensed under the MIT and GPL licenses.  You can find further information, demos & download on jqFancyTransitions Website.

Similar Posts:

• iCarousel – Rotates Content Horizontally & Vertically
• Horinaja Slide Show Plugin For jQuery And Scriptaculous
• Coda Slider: Highly Customizable Content Slider
• Easy Slider – jQuery Plugin For Sliding Images and Content
• AnythingSlider jQuery Plugin

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

Luckily, some providers can respond to our requests in JSONP format – which is perfect solution for loading data from remote sites using JavaScript. Since jQuery’s getJSON() method can also load data in JSONP, we can use it to achieve our objective. If this is true, it should be pretty simple – well it really is. The only difficult part is digging through provider’s API documentation, to see if it supports JSONP.

In this brief tutorial, I am going to show you how to programmatically get Digg, Delicious and Tweet counts for a specific URL using jQuery. You will be able to style this data however you like using CSS. And the best part is that you can do this without depending on any server side code.

Lets Start

I am assuming that you have sufficient CSS skills to style your own counters, and have basic understanding of how to add jQuery code into your pages. Lets start with following HTML page containing very simple markup.

<html>
<head>
<title>Get Digg, Delicious & Tweet Counts Using jQuery</title>
</head>
<body>
<h2>Share / Bookmark</h2>
<ul>
    <li><a href="http://digg.com/submit" id="digg">Digg</a></li>
    <li><a href="http://delicious.com/save" id="delicious">Delicious</a></li>
    <li><a href="http://twitter.com/" id="twitter">Twitter</a></li>
</ul>
</body>
</html>

The only thing you need to note is the presence of “id” attribute in each anchor tag. We will use these to select link’s text when appending counter to it.

Now lets add following code between <head> . . . </head> tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    url = "http://www.w3avenue.com/";
    beforecounter = " [<b>";
    aftercounter = "</b>]";

</script>

This covers basic requirements, i.e., including jQuery library and a function that will execute when the DOM is fully loaded. Inside the function we have added three variables:

• First variable is “url”, which is a required value. This is URL of the page for which you need to retrieve counter(s).
• The other two variables: beforecounter and aftercounter are optional, and may be used to add extra text (or markup) around the counter.

After assigning values to these variables, you will need to add following code snippets to get your counter data.

Get Number of Diggs

Digg has pretty good API and offers several response types: XML, JSON, and JavaScript. We are going to use “javascript” response type with story.getAll method to get total number of Diggs for our story.

        $.getJSON('http://services.digg.com/1.0/endpoint?method=story.getAll&link='+url+'&type=javascript&callback=?',
            function(data) {
                $('#digg').append(beforecounter + data.stories[0].diggs + aftercounter);
        });

Get Number of Delicious Bookmarks

Delicious provides read-only data feeds in several formats (including RSS and JSON) for bookmarks and other information. We are going to use “http://feeds.delicious.com/v2/json/urlinfo/data” feed to get total number of Delicious bookmarks.

        $.getJSON('http://feeds.delicious.com/v2/json/urlinfo/data?url='+url+'&callback=?',
            function(data) {
                $('#delicious').append(beforecounter + data[0].total_posts + aftercounter);
        });

Get Number of Tweets

You can get number of tweets from more than one providers. Following code snippets shows you how to get total number of tweets from TweetMeme and Topsy.

Using TweetMeme API

        $.getJSON('http://api.tweetmeme.com/url_info.jsonc?url='+url+'&callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.story.url_count + aftercounter);
        });

Using Topsy API

        $.getJSON('http://otter.topsy.com/stats.js?url='+url+'&callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.response.all + aftercounter);
        });

NOTE: You only need to add one of these methods in your code to get number of tweets for your web page.

Complete Code

That’s it – we are done. This is how your complete code will look like:

<head>
<title>Get Digg, Delicious & Tweet Counts Using jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        url = "http://www.w3avenue.com/";
        beforecounter = " [<b>";
        aftercounter = "</b>]";

        // Get Number of Diggs
        $.getJSON('http://services.digg.com/1.0/endpoint?method=story.getAll&link='+url+'&type=javascript&callback=?',
            function(data) {
                $('#digg').append(beforecounter + data.stories[0].diggs + aftercounter);
        });

        // Get Number of Delicious Bookmarks
        $.getJSON('http://feeds.delicious.com/v2/json/urlinfo/data?url='+url+'&callback=?',
            function(data) {
                $('#delicious').append(beforecounter + data[0].total_posts + aftercounter);
        });

        // Get Number of Tweet Count From TweetMeme
        $.getJSON('http://api.tweetmeme.com/url_info.jsonc?url='+url+'&callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.story.url_count + aftercounter);
        });

/*
        // Get Number of Tweet Count From Topsy
        $.getJSON('http://otter.topsy.com/stats.js?url='+url+'&callback=?',
            function(data) {
                $('#twitter').append(beforecounter + data.response.all + aftercounter);
        });
*/
    })
    </script>
</head>
<body>
<h2>Share / Bookmark</h2>
<ul>
    <li><a href="http://digg.com/submit" id="digg">Digg</a></li>
    <li><a href="http://delicious.com/save" id="delicious">Delicious</a></li>
    <li><a href="http://twitter.com/" id="twitter">Twitter</a></li>
</ul>
</body>
</html>

When adding your own CSS or other markup, you should always keep in mind how it will degrade when JavaScript is turned off.

Hopefully you have found this brief tutorial useful. Feel free to share your opinion and suggestions in the comments.

Similar Posts:

None Found

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.