JavaScript
Article

10 Exclusive JavaScript and jQuery Tutorials Of 2011

By Sam Deering

This post is a compilation of some of fresh and exclusive JavaScript and jQuery tutorials from the year 2011.


1. Drag Drop Shopping Cart Using JQuery


There are a lot tutorial about creating drag and drop shopping cart, in this post I want to share my version still with JQuery, but the different is this example only shows the code on the client side, which mean all of data are hardcoded on the html, and counting price and total items will be handle by JavaScript.
Drag-Drop-Shopping-Cart-Using-JQuery-.jpg
Source


2. Get Element By ID


Forms are the most frequently used objects on dynamic web pages. There are various controls like textfields, lists etc used on the forms to get input from the user. So once you have got the user input, how do you store the values entered in the controls.
Get-Element-By-ID-.jpg
Source


3. Password Strength Meter Tutoria


It is 100% styled by CSS and allows for custom validations. It can be used with effects or without and has an optional text component that changes with each change of state. The text defaults to ‘Poor’, ‘Weak’, ‘Medium’, and ‘Strong’; but it can be changed according to preference or language.
Password-Strength-Meter-Tutorial-.jpg
Source


4. Create a Game Character with HTML5 and JavaScript – Part


In Part 1 of this series we will design a game character from scratch. We will start with a drawing on paper and with the help of JavaScript we will create breathing, blinking character on HTML5 canvas. Hopefully by the end of Part 1 you will have the tools and inspiration to create a character of your own.
Create-a-Game-Character-with-HTML5-and-JavaScript-–-Part-1-.jpg
Source


5. Create Delicious Tag Field using jQuery


Delicious tagging field, not a pure input tag element, it is a div box that contain list box, so when you search this it use the TextListBox keyword, user will see it as input field, but actually it is a div box with ul and li tag.
Create-Delicious-Tag-Field-using-jQuery-.jpg
Source


6. Making a Custom Facebook Wall with jQuery Templates


In this tutorial, we are going to create our own version of Facebook’s wall. We will be using Facebook’s Graph API with jQuery, and the template plugin. The jQuery.tmpl plugin will allow us to define templates within our page, and convert the posts we’ve obtained from the API into a real HTML page.
Making-a-Custom-Facebook-Wall-with-jQuery-Templates-.jpg
Source


7. How to Create Preload Images with jQuery in WordPress


In today’s tutorial, we’ll learn how to preload the images with jquery. With this feature your site can enhancing user experience.
How-to-Create-Preload-Images-with-jQuery-in-WordPress-.jpg
Source


8. JQuery Typing Game


This game inspired by an old shark typing game, which is created by pop cap game, but it seems not available anymore.
jQuery-Typing-Game.jpg
Source


9. Timer Gallery V2 Ajaxed


This is the newest version of Timer Gallery. In the original plugin, if there were too many images the gallery would break. I corrected this in the new version so that all the large images are loaded into the page instead of living within it.
Timer-Gallery-V2-Ajaxed-.jpg
Source


10. Spotlight: Constrained Stickies with jQuery


Today, we’re going to take a look at a plugin that implements a pretty neat effect — it’s pretty hard to explain in a sentence so you may as well click on the continue button to get started after the jump.
Spotlight-Constrained-Stickies-with-jQuery.jpg
Source

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.