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:
Each jQuery event has a
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:
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:
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:
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
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.
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.
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:
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.
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:
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 (
video) you must use the new media formats. But what's the support in web browsers?
$.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:
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:
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.
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?
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:
plugins directory inside a
jquery directory which in turn is contained within a general
libs directory. So you have:
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:
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.
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.
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.
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
$() 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:
attr() method, like so:
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
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.
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.
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.
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
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.
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:
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:
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:
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.
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
slideUp() effects. First of all, let's start with our basic markup:
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
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
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.
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.
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:
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:
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.
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.
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.
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:
In this post I'm going to show you how to create a nice spotlight effect using jQuery and the CSS3 properties
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:
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: