jQuery: image division, explosion and the like

Dividing an image with jQuery simply means that you have to create several elements which contain a different part of the image set as their background image and shown via the background-position property. So here's a simple (simple indeed!) plugin which, given the number of parts, their dimensions, the animation speed and an array of background coordinates, divides an image.

jQuery: loading tables faster

Writing high performance jQuery code is a task that requires some basic knowledge of how jQuery's methods work internally. For example, the html() method uses the clean() method to preprocess the HTML string passed in as argument. This makes html() much slower than the traditional innerHTML property. When it comes to tables, tests have shown significant improvements in slower browsers when HTML tables are built as arrays of strings which are turned into a plain HTML string using the join() method. Let's see how.

jQuery: video trailer for YouTube

I've just created a demo that shows a nice implementation of a video trailer for our YouTube videos. My demo makes use of jQuery and jQuery UI effects to create a simple presentation of a video. The source code, in its essence, is made up of chained animations glued together by the callback functions of each animation. Feel free to use this demo in your own projects. Of course mentioning me would be surely appreciated. Enjoy!

CSS: using @font-face

A couple of minutes ago I inserted the DejaVu Serif font on a Wordpress web site I'm working on. The main style sheet which makes use of the @font-face rule was downloaded from Font Squirrel together with the source fonts. There are four web fonts formats available: TTF, EOT, SVG and WOFF. At a first glance, the @font-face rule has been used several times to include all font variants. Each rule block takes care of inserting the specified variant using the four available formats. Let's take a look at these rules.

jQuery: the $.getScript() method

The jQuery's $.getScript() method is an AJAX method that allows us to load a JavaScript file and execute it in the global context. The peculiarity of this method is that it doesn't execute scripts which contain syntactic errors. However, if a script contains errors, nothing will be shown in your JavaScript console. For that reason, it's recommended to set up an error handler using the ajaxError event. Let's see how.

jQuery: difference between position() and offset()

The difference between the jQuery's position() and offset() methods concerns the way by which the top and left coordinates are calculated. The former always refers to the parent element's coordinates, while the latter may calculate such coordinates by taking into account the offset of the parent from the whole page when this element is positioned. If the parent element is not positioned, that is, if its CSS position is static, then both methods return the same results. Let' see an example.

jQuery: draggable objects details

In this post I'd like to make it clear to myself and you, dear reader, what happens behind the scenes of jQuery's draggable objects. jQuery UI is a great tool, but sometimes it's difficult to tame our scripts if we don't know all the details. Draggable objects fall into such category. Setting up a demo page to mimic the basic behavior of the widget section of Wordpress is not that easy because when we start coding we can't know all the nuts and bolts of dragging objects around the screen and from an element to another. Let's see these details.

jQuery: tracking, inspecting and debugging animations

Keeping track of the changes made to CSS properties during animations and inspecting their state it's a useful feature, especially for debugging. For that reason, I've created a simple tracking plugin that uses an array of CSS properties to follow the state of animation step by step. This simple plugin also stores the selector and context properties of the current jQuery's object to help you to locate the animated element in the DOM. Let's see the details.

CSS: animating a navigation menu

The concept of CSS transition applies only to particular states of an element. A CSS transition is much like an event listener: it keeps track of the properties of an element and when such properties change during a state, it simply applies an effect to the affected properties. States, for example, are :hover and :focus. Transitions work this way: you have to register a transition on the normal state of an element and then change some properties on a different state of the element (e.g. :hover). In this post I'll show you how to animate a navigation menu using transitions.

jQuery: testing remote JSON data with a type check

The $.getJSON() method of jQuery provides an easy way to retrieve a JSON resource to be used in your documents. Unfortunately, this method doesn't provide an option to test whether the returned data has been fetched normally and is ready to be used. Instead of using $.ajax() as an alternative, you can enhance this method with a simple check on data to verify the correct parsing of the resource. Let's see how to implement this enhancement.

Google: frequency of site updates and indexing

If you don't update your site regularly, your indexing by SE will be affected in a significant way. Google adjusts the frequency of the spider's visits based on the times you publish new contents on your site. This blog has been affected by a fluctuation in its update frequency and Google did react accordingly. Before the fluctuation, Google indexed my site contents as soon as a new post was published. Currently, it indexes my contents only after 24/32 hours. I don't know if there was also a reassessment by the end of the month that also affected the indexing routine, but I know for sure that now such indexing shows significant delays.

jQuery: using animation steps

Each jQuery animation can be broken down into singular atoms called steps. A step is a fragment of an animation and it allows jQuery to handle all of its effects on elements. Without steps, animations will be always instantaneous and without any possible additional effect, such as delay, easing and so on. jQuery allows us to control such steps using the step() method of the animate() method. Let's see the details.

jQuery: handling payment calculations in a shopping cart

Usually all payment calculations in a shopping cart are handled by a server-side language which fills out an HTML table with all the required numbers. For example, you have a table with some text inputs that allow the user to modify the quantity of his products. With jQuery, you can easily perform all these calculations (subtotal for example) without refreshing the page. Let's see how.

jQuery: create elements the right way

jQuery is full of surprises. The $() wrapper, in particular, is more flexible than one could expect. When we create elements on the fly, this wrapper accepts an object literal as its second argument where we can specify attributes and content of the newly created element. This is a really useful feature when we want to write a more concise and compact code. Let's see the details.

JavaScript: avoid lookups and optimize performance

Caching objects and references is a good coding practice to avoid lookups in browsers. Generally speaking, most modern browsers have significantly improved their lookups routines but not all. More specifically, IE8 and lower have still significant problems with lookups and performance. So if you want to get good results with performance, start caching!

jQuery: Colorbox gallery tutorial

Colorbox is a powerful jQuery plugin for creating image effects based on the popular Lightbox effect. In its essence, it's a simple wrapper that you can call on the wrapper links of your images. Such links should contain the path to your full-sized image, while the images within them are usually thumbnail images. Let's see a practical example of a basic image gallery enhanced with Colorbox.

jQuery: creating a shopping cart effect

How can I add items to a shopping cart? This is the first question that pops into your head when you have to create a simple shopping cart with jQuery. In this post I'll answer to this question in the simplest way possible: using the clone() method. Before digging into the details, a short note on drag-and-drop: do not use this feature, because if you do so, you'll probably make things harder for your customers. Big companies such as Amazon don't use this feature in their shopping carts, so this is a good reason for avoiding this practice.

JavaScript: the Factory design pattern

The Factory design pattern is designed to create new object instances depending on the argument passed to the constructor. In JavaScript, the implementation of this design pattern is rather straightforward. All we have to do is to create a new function which accepts an object as its argument. Depending on the type of object passed in, it will return the appropriate object instance or an empty object if no argument has been specified.

jQuery: testing and debugging

During my daily work as a web developer, I usually deal with a lot of templates and site themes. Though they're pretty impressive from a visual point of view, they actually lack of consistency and organization when it comes to jQuery. The point is that many of these templates are not thoroughly tested and debugged in various environments. Usually the theme's author chooses a testing environment and a target browser and simply tests his/her code on that environment. Things run smoothly and the author assumes that everything will work just fine in other environments as well. Nothing could be more harmful than this approach. Environments and browsers are different and even though progressive enhancement can actually provide a fallback mechanism for the worst-case scenarios, you should never assume that a code tested in the browser X will work also in the browser Y. Here follows a little list of tips and gotchas to help you with testing and debugging in jQuery.

jQuery: loading and executing code

jQuery's code can be loaded and executed either in the head or body elements. Putting your jQuery code in the head or body elements of a web page is not the same thing. Though many developers follow the second approach to improve the overall perceived performance of their pages, they're probably not completely aware of the existing differences between the two methods. Let's take a closer look at them.

jQuery: get a Wikipedia definition

Getting a definition from Wikipedia using jQuery requires only a PHP script used as a proxy to perform this task. This script will return a JSON object that we can parse with jQuery. I've used a general purpose function taken from this excellent article and I've actually modified it in order to make it return a JSON object. The PHP script is as follows: