Skip to main content

10 Exclusive JavaScript and jQuery Tutorials Of 2011

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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

Learn PHP for free!

Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.

Normally RRP $11.95 Yours absolutely free


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

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.