Each jQuery event has a data object attached to it. This object can store any kind of data, including simple object properties or even object methods. You can define a separate object and then associate it with your event through data. This object is the second parameter of the bind() method used to attach an event to a page element. Once you associate your custom object with data, you can later reference your object methods and properties using data. An example:

Read more »

In this post I'm going to show you how to create an effective entry effect with jQuery. Imagine that you have a slide with several components inside. You want that after this slide appears each component must be shown in a sequence. To accomplish this, we only need a few CSS rules a couple of jQuery effects. Let's start with our markup:

Read more »

Today the server farm that hosts the web sites where I store my examples and assets used in this blog has been shut down for several hours. Apparently, a fire started in a room so that all the servers have been put offline for precaution. Probably you first noticed that my blog was awful slow. That was due to the fact that your web browser was trying to load my unreachable assets, so I had to comment the HTML to temporarily fix the problem. Now everything works fine again, and my assets are back in place. My hosting company, Aruba, tweeted a lot about any news concerning this problem but it was forced to close their call centers (lines completely overloaded) while they were working to fix this problem. I have to say that they've faced the situation bravely: a fire in a server farm is not the ideal situation when you have the half of Italian web sites hosted on your servers. smile

In this post I'm going to show you how to create a resizable image gallery with jQuery UI and two simple CSS rules. The only thing we need to do before writing few lines of code is to reference the main CSS file of jQuery UI and, of course, jQuery UI itself. In the head section of our page we'll insert the jQuery UI CSS file, like so:

Read more »

In this post I will show you how to create a simple HTML widget to be used with the jQuery's html() method. Our widget, called ListWidget, create ordered and unordered lists using an array of values passed as one of its options. This widget can actually be more generalized to encompass a wider variety of HTML elements. The major advantage of this widget-based approach is that you keep your code more compact and organized. Here's the code:

Read more »

In this post I'm going to show you a simple implementation (yet to be a little bit enhanced) of a Flickr cross-fade image rotator with jQuery. The script itself is made up of two components: a call to the $.getJSON() method to fetch the JSONP Flickr feed and a JavaScript timer to rotate the retrieved images. First of all, let's define our CSS styles to display our rotator:

Read more »

In this tutorial I will show you a simple but effective implementation of a jQuery image tooltip. All we need is CSS and jQuery, nothing more. As usual, I'll follow a step-by-step approach to help you understand what's going on behind the scenes. Let's get started.

Read more »

Among the various proposals for CSS extensions suggested to the W3C CSS Working Group there is the use of regular expressions in selectors. This feature is rather interesting because it would allow developers to select elements and attributes in a more powerful way. For example, H<[0-9]+]> matches all names H0, H1,... H10, H11, H12,... etc. If this feature will be supported in the future, we could write complex patterns to select elements based on the returned matches.

Read more »

When you include a Twitter tweet button into your page, you basically use an HTML snippet which includes a link and a reference to a JavaScript Twitter file. But what happens behind the scenes? In this post I'm going to describe the inner process behind the creation of a Twitter tweet button in order to help you understand what might go wrong in some use case scenarios.

Read more »

Suppose that you want to implement a jQuery version of an arcade platform game. When the hero jumps from one platform to another, you have to find a way to calculate the time elapsed from the pressure of the mouse button (or a keyboard key) and its release in order to make the hero jump higher or lower, depending on the mouse pressed duration time. Here's how you can do with jQuery:

Read more »

jQuery allows us to attach multiple event handlers to the same element. This can be easily achieved using the bind() method and passing the event names we want to use (e.g. mouseover, click etc.) to this method. Problems arise when we want to perform different actions depending on the event type attached to our element. In this case, we can use the type property of the Event object to get the event name currently used and code accordingly. For example:

Read more »

HTML5 media formats were primarily designed to make the media format war come to an end. But, as you know, the devil is in the details and the result of the introduction of the new HTML5 media formats has only increased the level of complexity related to the choice of media formats. More surprisingly, some old and widespread adopted media formats (such as Flash video) are no longer supported by the new HTML5 media elements. So if you want to use these new elements (audio and video) you must use the new media formats. But what's the support in web browsers?

Read more »

The jQuery's $.extend() is often used with object literals to extend them, thus creating a resulting object by merging other objects together. However, the power of this method goes well beyond object literals and encompass also object instances of traditional objects which make use of the new operator. For example, having these two objects:

Read more »

In this post I will show you how to create the effect of a box that changes its top position when the page is scrolled. All we need to do is to set position: relative on the box we want to move in our CSS and then use jQuery. In order to add an additional bouncing effect, we'll also include the jQuery Easing plugin in our page. Here's the jQuery code:

Read more »

Git and Github are probably the most used version control systems available today. This video will show you how to use Git and Github. I'm posting this because I still have problems with getting the habit to get to the terminal and type commands. I did it a few times but I'm still missing something important. I hope this video tutorial will help you out. smile

In this post I'll show you how to create a dynamic portfolio gallery with jQuery. Imagine that you want to display a gallery with all the previews of the web sites you have worked on with the addition of an overlay effect when you hover a site preview. If you have a preview generator on your web site, you can use it very easily. In my example I'll use several iframe elements to mimic such a service, because I do not have a preview generator. sad. However, the techniques explained here fit beautifully also to other use cases. Let's get started now.

Read more »

CSS hacks should be avoided wherever and whenever it's possible. They make your CSS code harder to read and to maintain. Since the overwhelming majority of CSS hacks are targeted to older versions of Internet Explorer (mainly 7 and 6), the true question that they arise is when you should support these browsers or not. Let me put it in this way: if we extend the concept of backward compatibility to its maximum, then we should be able to create web sites that look perfect even in Netscape 4 or Mosaic. Now tell me: how much time will be required to fulfill this task? How much money of your budget are you going to spend?

Read more »

In this post I'll show you how to create a vertical content slider with jQuery and a couple of CSS rules. As you will see, the secret is not moving the slides, but the slider container itself. For that reason, we need to store the top offset of each slide in an array and then move the slider wrapper by using such offsets. We start with our markup, as usual:

Read more »

Lightbox is a very simple but effective jQuery plugin used to enhance your image presentations. The following video shows how to download, install and use this plugin. The only thing you have to bear in mind is to change the paths that point to your plugin CSS and JavaScript files. I generally create a plugins directory inside a jquery directory which in turn is contained within a general libs directory. So you have:

Read more »

In this post I'm going to show you how to create a progress indicator during the validation process of a web form. We're going to use CSS sprites on an element whose background-position property will be updated every time a field is filled up with the correct value. In our example we'll simply use a test to check if the passed value is not empty. First of all, we need to insert our progress indicator at the very top of our form, like so:

Read more »

This tutorial is targeted to jQuery developers who want to know a little bit more about how CSS works. CSS and jQuery are tightly coupled together, because the main syntax of jQuery is CSS-like. Also, jQuery can read the values of all CSS properties, thus providing an invaluable help in most cases. What's more, jQuery animations are CSS-based and the jQuery UI theming is based in turn on CSS cascading. Let's see some use cases of how CSS works.

Read more »

In this tutorial I'm going to show you a simple implementation of a lightbox effect with jQuery. To understand the techniques presented here, you should be familiar with the concept of CSS positioning. Anyway, don't worry about it because I'll try to explain it to you in the clearest way possible. If you're ready, we can get started.

Read more »

In this post I'm going to show you how to create a simple news rotator with jQuery. We're going to use a JavaScript timer to repeat our fading animation between one news and the other during a time span of two seconds. First, let's take a look at our HTML structure:

Read more »

In this post I'm going to show you how to create a Web 2.0 header with CSS. To accomplish this, we only need to define our underlying markup, a couple of background images and, of course, our CSS styles. Let's see how.

Read more »

Today I played a little bit with jQuery and the HTML5 audio element to create a simple Gmail notifier than not only displays a bubble box, but also plays a sound when the bubble is displayed. It works fine in Firefox, Safari, Chrome and Opera, that is, in all the browsers that correctly support the play() method of the HTML5 audio interface. I can't test it in IE 9, so if you can do it, please let me know the results. When the document loads, the bubble takes two seconds to be displayed thanks to the setTimeout() function. Enjoy! smile

Live demo

jQuery: HTML5 Gmail notifier

Download

ZIP file

jQuery allows us to associate any kind of data even to normal JavaScript objects. This can be achieved thanks to the $() wrapper and the data() method. The interesting thing to note here is that objects are not modified in any way, thus preserving their integrity. For example:

Read more »

Internet Explorer has some problems with handling JavaScript reserved keywords when these appear within a jQuery method. For example, suppose that you want to set a CSS class using the attr() method, like so:

Read more »

jQuery's easing is part of the animation process of an element. In the animate() method, it can be specified after the duration of the animation, just before the callback method (if any). jQuery natively supports only two types of easing effects, namely swing and linear but these effects can be augmented if we use the Easing plugin which supports up to 31 easing options. Let's see an example.

Read more »

In this tutorial I will show you a simple implementation of a jQuery image slider with image preview (a series of thumbnails). Every slider is always made of three components: the HTML markup, the CSS styles and the jQuery part. As you will see, there's nothing difficult with each of these parts if we follow a step-by-step approach.

Read more »

My good friend Carlo asked me a question: "I have two forms on a page. I want these forms to be first hidden and then shown with a sliding effect when you click on two links which point to the corresponding forms. I want only one form to be shown per time. How can I do this with jQuery?". Let's see how.

Read more »

A slider built with a select box is simply a normal slider where slides are selected through the values associated with each option element. All you have to do is to remember that the change event is related to the select element, not to its options. In the following example, each option has an anchor as its value that points to the corresponding slide to be animated. All we have to do is simply to select the correct option element.

Read more »

This tutorial will show you how to create a simple but effective jQuery slideshow with an image rotation effect. We'll follow a step-by-step approach to allow you to understand clearly what's going on behind the scenes. If you're ready, let's get started.

Read more »

In this post I'll show you how to create a simple PNG animation with jQuery. There's nothing difficult with this: all we need is a PNG image divided into several sequential frames that will be progressively revealed by adjusting the horizontal value of the CSS background-position property. Here's our image:

Read more »

In this post I'm going to show you how to implement a simple performance test with jQuery. We're going to demonstrate that the html() method is considerably faster than appendTo(). To accomplish this, we'll calculate the number of milliseconds required for inserting 1,000 elements into the DOM by using either methods. We first need a basic benchmark object to calculate these time differences:

Read more »

In this post I'm going to show you how to retrieve the contents of a Twitter JSON feed, parse and format it with jQuery. We first need to know what's our current feed URL. Generally, Twitter places our status feed at this URL:

Read more »

jQuery books are a vast collection of publications. In this post I'm going to try to give you a simple overview of the most significant ones by also providing a brief description of them.

Read more »

jQuery provides the very useful method replaceWith() to replace the HTML contents of an element with new content specified as a markup string. The following video tutorial shows both basic and advanced implementations and use cases of this feature. I find more useful for beginners to watch video tutorials instead of reading code. smile

In this post I'll show you how to create a simple overlay effect on a YouTube video. The final effect is achieved by combining CSS absolute positioning and the jQuery slideDown() and slideUp() effects. First of all, let's start with our basic markup:

Read more »

I was watching The Ring last night and I was wondering if it was possible to achieve the TV static effect with jQuery and CSS. It's actually possible, thanks to the toggleClass() method invoked within a JavaScript timer created with setInterval(). A word of caution on accessibility: if you suffer from neurological problems or you're epileptic or something else, don't watch this demo, because the final effect is annoying even for a normal user. I'm not responsible for what it could happen if you watch my demo, so be careful. smile

Demo

jQuery: TV static effect

HTML5 introduces new elements and features. In this post I'll provide the complete list of the new HTML5 elements plus a reference to an online complete reference. Most of these elements are still not supported by web browsers, so it's recommended that you check out your target browser support before using them.

Read more »

In this tutorial I'll discuss with you a simple implementation of CSS tabs. We're going to create these tabs using background images, but be aware of the fact that the same effect can be achieved with the CSS3 border-radius property. Said that, we'll follow a step-by-step approach to help you understand the underlying techniques.

Read more »

With the jQuery data() method we can attach any kind of data to a jQuery element. This means that we can even attach functions and methods to elements. The basic syntax of the data() method allows us to specify the name of an object literal where we can attach our data. It is as follows:

Read more »

jQuery animations are grouped together into queues. These queues are handled internally by the fx object. Sometimes, however, we need more control over the queuing process. Consider the case of a simple fade effect using the hover() event. Without controlling the underlying queue, you often get undesired results. For that reason, jQuery provides the stop() method to stop and reset a queue with its animations. Its syntax is as follows:

Read more »

In CSS, a background image set on an element can be either constrained or unconstrained. This particular algorithm applies to the width of background images. When an element has no stated width, the background image is unconstrained. Conversely, when an element has a stated width, the background image is constrained. Consider the example of CSS tabs: usually we use background images that are much bigger than the actual width of the tabs. This is where this algorithm comes into play. If we omit to specify a width for the tabs and we use only some padding, then we'll see the background image filling the tab without problems.

Read more »

In this post we're going to create a jQuery slideshow using an object-oriented approach. Why? Consider the situation of the 'previous' and 'next' slideshow buttons. Each button has a click event associated with it that makes the slides move forwards or backwards. The functions associated with each event don't communicate with each other so that one function doesn't know what is the current image to be animated. This is where the Observer Pattern comes into play. By using this design pattern we make sure that both functions are aware of each other. Let's see how.

Read more »

CSS cascading inevitably leads to conflicts in the way styles are applied to elements. In this case, CSS conflict resolution can be seen under two main aspects: the first aspect is given by the way a browser handles such conflicts using the rules for cascading and specificity, while the second is under the direct control of the author of the style sheet who, in turn, can change his/her style rules to resolve these conflicts.

Read more »

Styling an RSS feed reader is easy with CSS. In this post I'm going to use the main RSS feed of the jQuery's blog to show you some CSS techniques that you can reuse in your own project. The feed will be fetched with jQuery using a local copy of it, but you can always use a server-side language to retrieve its contents. We'll see how to accomplish this as well. First, our basic markup structure:

Read more »

In this post I'm going to show you how to create a nice spotlight effect using jQuery and the CSS3 properties text-shadow and box-shadow. These properties will be used dynamically together with the mouse coordinates of the mousemove event. We start with a basic markup like this:

Read more »

I've collected all my CSS demos, cloning and experiments on this page, where you can find some of the most advanced CSS pages ever made by me. I'd like to say that all these demos work even in Internet Explorer 6, because I carefully tested the final rendering in a wide variety of web browsers. What else should I say? Enjoy! smile

Twitter uses CSS in a very intelligent way. Due to the fact that this social network allows users to change the visual layout of their web pages, CSS styles must be handled in a per-user way. Basically, each Twitter user can customize his/her home page by changing colors and backgrounds, either by using the suggested schemes or using custom user schemes. This is achieved by simply binding a CSS class to the body element of the user home page:

Read more »