Follow @endyourif rss Facebook LinkedIn

jQuery Tutorial

jQuery is the most popular JavaScript library that simplifies almost every interaction with elements on a webpage or actions performed by users. It provides extraordinary tools to easily manipulate DOM objects when coding with JavaScript. jQuery is an open source framework that has been around since 2006 making it the oldest library there is and the most used by every web developer.

jQuery Tutorial

What is jQuery?

  • jQuery is used to allow for rapid application development using JavaScript
  • Simplifies common tasks like performing AJAX requests
  • Listen to HTML event methods like click, blur, submit
  • Manipulate DOM elements
  • Apply dynamic CSS changes

jQuery Examples

Below are a list of jQuery articles that will provide the essential tools to take you from a beginner to an expert with jQuery by providing clear and concise demos with practical, real-world examples. Whether you are looking for beginner tutorials or advanced tutorials these examples will provide the essentials to become more proficient with the jQuery framework.

jQuery Datepicker with a Knockout js custom data binding

Whether you are using the Bootstrap datepicker or the jQuery datepicker, they both use the same underlying JavaScript library. So with today's example, let's explore implementing the jQuery library with an added bonus of creating a Knockout js custom binding.

The end goal of this custom data bind is to create a form input field data bound not to the standard value binding, but instead to the custom one appropriately named: datepicker.

Full screen/background video from YouTube using jQuery

I was searching the web for some neat ideas and I came across this intriguing jQuery plugin that allows you to embed a YouTube video on your website. No, not the standard player, but instead the video is your background. Similar to how you would use an image or color, the YouTube video plays automatically in full screen as the background of your website; here is a demo of the plugin.

Checking if an element exists with jQuery

You want to do some conditional processing depending on if an item or items exist in your DOM (Document Object Model). By default, jQuery doesn't have a function that performs this; however, there is a very simple way to extend jQuery to do so.

Creating Your Own jQuery Selector

By default, the jQuery selectors are pretty advanced. You can select items by classes, ids, attributes, the first, the last, etc… But why stop there? By simply extending jQuery, we can add our own custom selectors to further enhance how we use jQuery. In this example, I will create an extended function called widthOver300 leveraging jQuery's $.extend

Implementing a trigger callback with jQuery

As we move into a more and more interactive era of website development, more of the JavaScript work is being done asynchronously and not "top-down". This can provide some interesting challenges, for example, executing a specific action after a specific process has been completed – also known as a callback. Thankfully, jQuery provides some useful functions to help with this process. This article will explore using $(window).trigger();.

Manipulating an array of DOM elements with jQuery $.map()

jQuery's $.map() function is a pretty neat function. It accepts an array as a parameter and then will iterate through each item in the array allowing you to further manipulate and build a new array with that data. This article will explore how to use it while providing a useful example.

Displaying a Progress Bar with HTML

HTML5 now contains a markup tag progress. This displays a basic progress bar based on two attributes that you must specify: the current value and the max value. Using some basic Javascript, you can increment the progress bar so the user knows something is happening and will be done soon.

Using CakePHP with the jQuery Sortable Plugin

It's time to permanently remove all "manual" sorting from the Internet. You know the one I mean where it has the up and down arrows – or even worse, the text box that accepts a numerical order input. By implementing the jQuery Sortable Plugin, you will be able to provide a simple, but effective drag-and-drop ordering solution for just about any type of data!

In a recent article, I described the required HTML and Javascript code need to implement the jQuery Sortable Plugin on a gallery of images. If you haven't already done so, please begin by reading this article because this one will gloss over those features and focus on how to implement this with CakePHP.

Organizing data with the jQuery Sortable plugin

Have you ever written some code that lets a user change the display order of something – articles, photos, widgets, etc…? You know the one, either you have the up and down arrows or go old school and let them enter a numerical value. By implementing the jQuery UI Sortable plugin, you will never have to write such a poor system again!

The jQuery UI Sortable allows for many different types of data to be sorted. It can be a list of items (horizontal or vertical), a table, a bunch of pictures – the sky truly is the limit. In this example, I will explore creating a photo gallery that allows the user to sort the display order of the photos. If you wish to see some demos, check out the jQuery Sortable plugin demos on their website.

Transitioning AJAX Content into view with jQuery $.animate()

As a user of the Internet, I enjoy slick looking features that help make my experience look cool and seem fast or seamless. A nice trick to include this type of functionality is to perform a transition of new content using jQuery's $.animate() function.

jQuery: Splitting an unordered list into multiple columns

I was recently answering some questions on Stackoverflow and an intriguing question came up. How do I split an unordered list into a multiple lists to turn them into columns? Using a combination of Javascript and jQuery, I will leverage splice, append, html and a common for loop.

jQuery: Creating templates for your HTML Content

When you have a lot of AJAX calls on your website, especially ones that return a list of data, it can be quite expensive processing time on the server to retrieve the results, format them with HTML, and return them to the browser to display – not only that, your bandwidth costs can be quite high as well. With jQuery templates, you can alter your AJAX calls to return JSON, and then populate the content client-side providing faster response times and less server processing as well.

If you already have a lot of AJAX calls that return HTML, do not fear; it is not a lot of work to convert them to jQuery templates and improve the speed of your website. If you are just getting started, glad to see you're thinking ahead!

jQuery: Padding a Variable or String with a Specific Character

Every so often you will receive data from a database or potentially user input, but a specific number of characters might be required to format or display the data properly. As an example, you may wish to ensure that a number less than 9 is prefixed with a 0 where numbers that are 10 or more do not need the padding. By extending jQuery, two functions can be created to either prefix or postfix a specific value to a DOM element using a jQuery selector.

To start, here is an example of the starting input and the ending output:

Experimenting with the canvas for a basic walk animation

I don't claim to be an animator, Javascript expert, or anything else; I simply wanted to explore the canvas tag in HTML5. In the following article, I demonstrate how to create a simple walking animation using a free sprite that I found on the Internet.

Before I show the solution, I'm going to start with the finished product. Like I stated, it's extremely basic and not the most overly exciting thing in the world. But from a person who has been creating web applications for 10 years, I found it pretty cool.

Deep clone an object with jQuery

To copy/clone an object using jQuery, you will want to leverage the extend function. This function accepts N objects to clone/merge as well as a boolean to indicate whether it should copy recursively or not.

jQuery: Global AJAX Events for Start, Stop, Complete, or Error

When your website contains a lot of AJAX requests using jQuery and you want to add a global event at the start or finish of the AJAX request, e.g. add a spinning icon, or handle all AJAX errors in a particular fashion.

The jQuery library provides multiple events for ajax event handlers. This article will focus on ajaxStart and ajaxError.

Node.js – Ajax Pagination without the Pages

With my recent endeavours into Node, I thought that taking a fun article like this one - CakePHP 2-0 Ajax Pagination WITHOUT The Pages – would be a really fun experiment to see how difficult it would be to accomplish in Node.

At the end of the day, the logic is still the exact same, retrieve the items, determine the max length, calculate the number of pages, and then perform AJAX as well scroll down to fill in more content as-needed.

Leveraging the Express API and Jade templates, this is quite painless to implement into Node.

Using Jquery to Check a Checkbox

This is an excellent follow up on a recent post – Determine if an element is visible with Jquery – because in that post we use the is Jquery operator to check if an item is visible or hidden.

Spoiler alert, in this article, we can leverage the exact same function by altering the value of the selector passed into it.

Determine if an element is visible with Jquery

When I interview web developers, I always like to ask the following basic Javascript question:

Write a function in Javascript that will ‘toggle’ or show/hide an element upon being fired.



function toggle(elementIdValue) {



}



I typically see one of two answers: Jquery or classic JavaScript.  Both of course are effective.  But, in this article I'm going to demonstrate another way as well.

A Fancier Twitter Timeline

I truly enjoy the finer things in life.  For example, if I'm going to eat a steak I don't want some fatty low grade piece of meat.  I would much rather (in this case, spend the additional money) to get an AAA grade of meat.  The taste is worth it.

The same is true with development; the Twitter Timeline is "nice", but I personally don't want a linear, scrollable representation of my Tweets!  I want the AAA grade where in this case it just takes a little bit more time instead of money…  As you can see above, my Tweets are sliding in and out every 7.5 seconds.  Once it cycles through my latest 10, it restarts again.

PhoneGap and Jquery Mobile – A Truly Winning Combination

Any regular readers may have noticed that I finally got around to updating and adding a new book under "My Books" on the right-hand side of the screen.  Yes, I not-so recently published my third book (and second with O'Reilly) earlier this year.

The book is called 20 Recipes for Programming PhoneGap – Cross-Platform Mobile Development for Android and iPhone.  Throughout this book, I get you up and running quickly using the PhoneGap API along with the Jquery Mobile API to take care of the pesky mobile design issues.

Much like I did when I released my MVC 3.NET book, I provided a free chapter from the book for my readers.  Well here is an excellent recipe sample from my PhoneGap book.  The goal of this recipe is to provide a standard approach to automatically fire (or trigger) a JavaScript function when a PhoneGap page has loaded – either on initial launch or after the user has navigated within the application.

Making AJAX Content Loading Prettier

In today's article on Webistrate I explore Transitioning AJAX Content into view with $.animate() using some basic jQuery.  Please note, it doesn't look overly pretty because I'm not a designer, but the functionality is there and it can be prettied with relative ease.

Improving the speed of AJAX request and response times

Today a new article was released on Webistrate that discusses how to use jQuery Templates to speed up your websites AJAX queries by return back JSON data and then doing the visual enhancements on the client-side with the use of a predefined jQuery template.

CakePHP 2-0 Ajax Pagination WITHOUT The Pages

As I promised in this article, I have created a full CakePHP example of performing AJAX pagination without the pages.  The goal of this article is to display news articles to a user.  As the user scrolls down, we will dynamically load in additional content so they can continue to scroll and read.

One of our challenges is to not load too much or too little content.  For more details on this, please review the theory article.  Let's begin.

Creating AJAX Pagination WITHOUT The Pages

You may have noticed some changes in the way a few websites work.  For example, if you go to Google Images and do a search, there is no pagination (1, 2, 3, Next, Previous) anymore.  Instead Google loads the images as you need them, e.g. when you scroll down.

Another example is Facebook's newsfeed.  I read an excellent article a few months back on their developer blog about this design decision.  By default, Facebook will only load a "full screen" of information with minimal scrolling.  However, as soon as you start scrolling they begin to fetch and display more content.  In the article, Facebook described this decision as a bandwidth saver.  They found that a lot of people would navigate away from the newsfeed before ever scrolling down or only looking at the top content.  By only showing 10-15 posts, they can keep the size of their newsfeed down oppose to loading 30+ posts that are never going to be read!  File size can easily go down 100s of KBs per page view and when you're talking about millions of page views per second, that's a significant number.

Maintaining the back button with AJAX

Last week I blogged about whether or not you can use too much AJAX on your website.  The short answer was no; with one caveat being that you must not lose the user interaction experience.  In this scenario I'm referring to the back button.  If the user has "felt" like the content changed, they are likely to click the back button to return.  If they do this, it's important for them to "go back" to where they "think" they were and not the last page that was loaded without AJAX!  I've put together a quick example of how to do this.

Jquery vs Prototype/Scriptaculous

About two years ago I started learning AJAX and drag and drop.  The first project I applied it to was an existing project that was using Prototype and Scriptaculous.  So, I didn't really have a choice as to what library I was going to use.

Two years later, I do not know Jquery all that well, but I am absolutely falling in love with.  Doing things with Jquery seem to be 10 times easier to me.

I always struggled with the each() function that I seemed to be constantly using with Prototype.  Jquery seems to understand this and simplify things for us.

In this article, I'm going to describe my top reasons why I am becoming a Jquery lover over Prototype.

Drag and drop category management with CakePHP

Today's article is going to walk you through creating a slick drag and drop with AJAX category management system.

CakePHP offers a really nice built-in tree management.  In fact, at a bare minimum you simply need to create a table with 2 extra columns, tell your model to act like a "tree" and rather than doing a find('all') you do a generatetreelist() or a find('threaded') and CakePHP takes care of the rest.

After doing a quick test, I was quite impressed with what CakePHP did for me, but I was not satisified.  I wanted to create a really slick category management system that I can re-use and show off.  Well, in this tutorial I go about 90% of the way.  The only thing I didn't have time to finish was, rather than redrawing my tree through AJAX, use DHTML and dynamically update my tree after dragging and dropping.  Don't worry, I plan to finish this with a part two soon.

Drag and drop with animations in jquery

Every year at Halloween, my company offers prizes to the best dressed employees.  For the past two years I have one as well as my co-worker that partakes in our crazy costumes.  You may be wondering what this has to do with drag and drop, don't worry I'm getting there.

This years prize happened to be a monkey slingshot.  Basically you place your index and middle fingers in pockets attached to the monkey's arms.  You then proceed to pull back and let fly.  Well, as you can imagine, we had a lot of fun with this guy, so much fun in fact we broke it :(

So one day after work I was messing around with drag and drop and some jquery animations.  I was quickly able to get a "mock slingshot" shooting at a target and this is what I want to share today.

How to add comments with AJAX in CakePHP

In today's article we are going to create a very basic blog that allows people to create a post and posts comments on that post via AJAX.  We are going to keep it extremely basic and just focus on that actual AJAX functionality.

Ready? Let's begin.  We are going to start by creating two database tables: posts and posts_comments.  Below is a sample create statement for the posts table:

Fixing slow drag and drop with scriptaculous

Recently on a project I was working on, I was tasked with fixing drag and drop that was terribly slow.  The drag and drop was implemented with scriptaculous on a calendar system.  When you clicked an event to drag it it took about 5 seconds before the page would actually let you drag it!  This was clearly unacceptable and it has to be possible because Google Calendar is lightening fast.

 The first thing I did was download and setup jquery to see if it was related to how scriptaculous was created.  After setting up jquery, it was just as slow.  This lead me to believe that it was a fundamental problem with how the drag and drop was set up in both libraries.

Drag and Drop with AJAX Example

At my work it's quite clear to me that a lot of people have difficulty with both AJAX and drag and drop functionality.  In this article, I thought I would provide a realistic and simplistic example of how to accomplish both AJAX and drag and drop together.

By the end of this article you will be able to create an extremely slick content management system that works really smoothly.

Knockout.js Book

If you're looking how to use jQuery incombination with another framework that allows for creating rich, dynamic web pages I would highly suggest the book I wrote called Knockout.js - Building Dynamic Client-Side Applications where I demonstrate how to use an MVVM framework using jQuery as a strong companion library.

What do I do now that I've learned jQuery

My blog has been around since 2009 and I've written 100s of articles where I've compiled common technologies into an organized, easy-to-follow examples. When you are familiar with JavaScript you can learn Knockout js where I've written over 10 articles to get you started.

If you are interested in using JavaScript as a server-side language then I have also compiled a nice collection of Node js tutorials that will get you started with using the Express package to create a web server using Node js as the server technology.

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP