jQuery: binding objects to events

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:

Aruba server farm down due to fire

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

jQuery: creating widgets

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:

jQuery: Flickr cross-fade image rotator

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:

CSS: regular expressions in selectors

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.

JavaScript: structure of a Twitter button

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.

jQuery: event duration times

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: multiple events on the same element

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:

HTML5 media formats: welcome to the jungle

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?

Using Git and Github

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

jQuery: portfolio gallery

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 are harmful

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?

jQuery: the Lightbox plugin

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:

jQuery: form validation progress indicator

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:

CSS tutorial for jQuery developers

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.

jQuery: HTML5 Gmail notifier

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: easing with the Easing plugin

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.

jQuery: a slider with a select box

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.

jQuery: performance test

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:

jQuery: TV static effect

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

jQuery: stopping animations

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:

CSS: tabs and background image size

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.

jQuery: object-oriented slideshow

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: conflict resolution

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.

CSS: styling an RSS feed reader

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:

Customizing Twitter with CSS

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: