CSS: styling a YouTube video gallery

In this post I'm going to show you how to style a YouTube video gallery with CSS. We'll use an unordered list to contain our videos, which have been embedded using the YouTube's default iframe elements. Since iframes are actually inline-block element, we have to turn them into block-level elements before applying styles to them. Here's the markup structure:

jQuery: slideToggle() example

The jQuery's method slideToggle() simply alternates both the slideUp() and slideDown() methods in an alternate way. The following video tutorial shows you some interesting visual effects that you can achieve with this method. It could seem just an exercise of fun, but I recommend you to watch this video to grasp the basics behind slideToggle() because if you use it properly, you can actually create some interesting visual effects, especially on content-driven web sites.

Delaying the jQuery chain

During the development process of complex, Flash-like animations I realized that the core jQuery's delay() method is powerful but somewhat limited, because it can be used only with effects. So I developed a minimal plugin, called delayChain() that allows you to delay the jQuery's chaining process by a user-defined time span. This plugin is very simple and makes use of a call to the JavaScript's setTimeout() function to delay the execution of a jQuery action. Here's the code:

jQuery: OOP tutorial: visibility

Visibility in OOP concerns the fact that class methods and properties can be accessed from outside the class. JavaScript doesn't provide default keywords for setting the visibility of a class member, so we have to use scope to mimic this behavior. In this post I'm going to explain you these basic concepts that also turn out to be useful when developing a jQuery plugin. First of all, let's start with a basic DOM structure that consists of an unordered list with four list items:

jQuery: plugin example

In an earlier post I covered the theory behind the jQuery plugin development. Now it's time to create a practical example. Let's say that we have an image gallery made up of different image sets, each one containing three images. We want the side images to be smaller than the main image, which must be centered and larger. Further, we need a repeated animation that switches images so that the side images will always be the same, but with an alternate opacity, and the main image should always change. In practice, we should have an effect like: 1-(2/3-3/2)-1. Let's start with our HTML structure:

Error 500 and usability

Errors happen. The HTTP error 500 happens when the server encountered an unexpected condition which prevented it from fulfilling the request (HTTP 1.1 specifications). In practical terms, if such condition is met, a user cannot complete the operation currently in progress and he's often stuck to such error page. When this error is distributed, a user cannot get back to the referring page because the entire site is not responding. This is the worst case scenario for a web site, especially when a payment or another commercial operation must be completed. So what should we do? Let's try to see this problem from a user's perspective.

jQuery: top 5 mistakes to avoid

This interesting conference by O'Reilly is surely one of the most useful videos on jQuery that you can find on YouTube. Sharp, one of the core jQuery developers, explains what are the 5 top mistakes that we can do in our projects with jQuery and how to avoid them. Performance, maintainability, code consistency are all topics covered here. I recommend to study this long talk (more than one hour) very carefully.

jQuery: data() method

The jQuery's data() method (and its counterpart removeData()) allows you to attach any kind of data to a jQuery element. This method works by creating a referenced object literal that will be accessible within an element's context. In this way, you can store arbitrary data avoiding memory leaks, which is great from a performance perspective. This method has the following syntax:

jQuery: modal window example

Modal windows are surely one of the most interesting things that you can build with jQuery. In this post I'm going to show you how to create one of those modal windows, plus adding an overlay effect when the window is showed. Most of the heavy-lifting is done by CSS, while jQuery simply adds and shows the element created from scratch. Here's our HTML structure that we're going to create with jQuery:

CSS layout tutorial: the basics

CSS layouts are always recommended to keep presentation and structure separated. However, CSS layouts are not easy to understand for people who come from a table-based approach. Recently I found an interesting article (of some years ago) that gives a detailed overview of the most common problems encountered during the development process of a CSS-based layout. Here is an excerpt:

Benefits of web standards for online marketing

On March 31, at 16.00 PM I'll take my seminar during the SMAU event in Rome. I'll talk about the benefits of web standards for online marketing. Unfortunately, the following slides are only in Italian but I'm going to write an excerpt of my speech after the event (this time translated into English).

Debugging jQuery: test case

Following a Twitter link I found this tutorial, organized in slides, that should theoretically be an introduction to HTML5 for XHTML developers. In practice, the page is almost completely unusable due to the interaction of scripts and browser-specific meta tags. I mean, contents are really interesting, but the pagination is somewhat broken after the fifth slide (even in Chrome). When I saw Chrome taking so much to paint the layout, I honestly said to myself: "Something is very wrong here".

CSS: layout with display table values

Tables have been extensively used in the past for building complex page layouts. This was due to the fact that tables are flexible, meaning that they always fit their content. Originally browsers handled tables with their internal algorithms, but after the introduction of CSS these algorithms have been reformulated to meet the requirements of the CSS specifications. We can take advantage of the table values of the display property to build multi-column CSS layouts. Let's see how.

jQuery: screen effects with animations

With jQuery we can create impressive screen effects using animations. In this post I'm going to show you how to create a simple screen effect with animations, ideal for an introduction to your web site. First of all, we need a basic markup structure to start with. Some of these elements have been inserted in the markup just for the sake of the example. You can obviously insert them with jQuery:

CSS: vertical and horizontal centering boxes

CSS allows you to center an element within the viewport by using absolute positioning and negative margins. It works this way: you specify the width and the height of an element, then you set the top and left properties to 50% and then use negative values for the top and left margins by specifying the half of the height and width, respectively. So if your box is 400 pixels wide and 300 pixels tall, you can write the following:

jQuery: Matrix effect

The movie Matrix was one of my first favorite movies back in 2001. Of course at the time jQuery didn't exist and JavaScript was quite a mess. After ten years I decided to pay my tribute to this movie by creating a jQuery demo that reproduces some of the effects of the movie's title screen. This demo works in Firefox, Opera, Chrome, Safari and IE 7 and higher. IE 6 fails spectacularly by returning a JavaScript error when you load the script. Vincenzo Palumbo took a screenshot of the error and reported it to me. Here's the picture:

jQuery: JavaScript popups over Flash

Simple Flash objects do not cause problems with JavaScript popups. For example, you can specify a full screen width in your CSS and the JavaScript popup will appear as expected, provided that you've previously allowed your browser to do so. Also call-to-action based popups will work fine. Problems arise when you use some parameters on your object element. For example, the following is a plain Flash object:

CSS: generated content tutorial

CSS generated content is specified through the :before and :after pseudo-elements and inserted into the page thanks to the content property. Generated content only belongs to the presentation layer of a document, meaning that it's not part of the DOM structure of the page. In other words, generated content displays some content but without modifying the document tree.

jQuery: sticky tooltip

In the 13th Chapter of jQuery Cookbook, Nathan Smith presents an elegant solution to achieve the effect of sticky tooltips. In practice, this effect is achieved by adjusting the tooltip position on the screen while keeping track of mouse movements. The jQuery code is made up of three parts. First, the tooltip container is inserted into the page and hidden. Second, when a user moves his mouse over and out of a link, the tooltip itself is first revealed and then hidden again. Third, using the mousemove event, we get the coordinates of the mouse pointer and we perform some calculation using the body element dimensions and the tooltip dimensions as references. First, we need some styles for our tooltip:

jQuery: panel slider

Sliding panels and panel sliders: two important jQuery features that have become a must on every content-driven web site or when you have a series of elements that you want to animate in some way. In this post I'm going to show you how to create a smooth animation on a series of panels using jQuery. First of all, a word on markup: since we're going to use a series of elements, the best choice is to use an unordered list for this kind of task. For example:

jQuery: exit from a loop

jQuery's loops differs from normal JavaScript loops in how you can exit from them. In a normal JavaScript loop you can use the break statement to exit from the loop, while in jQuery this is not possible. Instead, you should use the return statement plus a given condition to make the loop stop. For example, suppose that you're looping through a set of list items and you want to exit from the loop just after the third item has been selected. Here's how you can do:

jQuery: accessible tooltip menu

Screen readers usually interpret the declarations display: none and visibility: hidden, even though they're part of a visual style sheet. The result is that they're not able to read aloud the content of an element having these declarations attached to it. Many jQuery menus that make use of such declarations are not fully accessible because some elements remain hidden. In this post I'm going to show you how to create a tooltip menu whose contents are fully accessible.

jQuery: the slice() method

jQuery provides a useful DOM method for selecting a subset within a matched wrapped set. This method is called slice() and accepts two parameters. The first is the numerical index (starting from 0) of the first element of the new subset, while the second is the number of elements that will be contained in the new subset (starting from the first element of the wrapped set, that is, from 1). So given the following DOM structure:

jQuery: the clone() method

jQuery provides, among other DOM methods, a simple method to clone an element with all its children. This method is called clone() and accepts as its optional value a Boolean flag that specifies whether event handlers must be cloned along with the elements they're attached to. This flag defaults to false. Bear in mind, however, that even attributes are cloned, so you should use this method carefully. For example, given the following DOM structure:

CSS: inset box shadow

The CSS3 box-shadow property accepts an optional first value that specifies whether the box shadow must be rendered as an outer shadow or as an inner shadow. This parameter is called inset and has a simple Boolean value. If specified, the shadow will appear within the box edges, whereas the default behavior is to place the shadow outside the box edges. For example, the following CSS rule creates a normal box shadow:

PHP: multiple class inheritance

In PHP the extends keyword accepts only one class name after it, thus implying that multiple inheritance is not natively supported. However, sometimes it's preferable to have a class that inherits from different classes. To accomplish this task we need to use the __construct() method attached to any PHP class. Suppose that we have three classes, A, B, C where only the C class inherits directly from B:

Quickly Merge Excel Lists without Using Formulas or Macros

This is a guest post by Yoav Ezer

If you have two lists to merge together that were created in Microsoft Excel, and in the end you only want unique entries, how would you do it?

Many people would either start planning some complicated formula or macro solution, and the rest of us might throw our hands up in defeat. In fact there is a quick and easy way as we will see.

jQuery: data URLs and AJAX

Data URLs are a useful feature introduced in the web scenario during the last years. Using this feature, we can include small graphics (only up to 32 Kb in size) in our web documents. This kind of URLs have the syntax data:content-type;base64,encoded-data, where content-type is the mime type of our resource (e.g. image/gif) and encoded-data is a Base-64 encoded string containing our resource. You can use these URLs on all HTML elements that accept external content, such as a, object and, of course, img. Here's an example:

jQuery: fold effect

Scriptaculous has another nice visual effect called Fold(). This effect adjusts the width and height of an element until it completely disappears. Emulating this effect with jQuery is a little more complicated than one could expect. The jQuery's animate() method can accomplish this task by setting the dimensions of an element to zero, but this effect is different from the original one that we want to reproduce. We need a jQuery's plugin that makes use of timers and accepts as its sole parameter a factor to progressively reduce an element's dimensions. Here's the code:

jQuery: puff effect

Scriptaculous provides a nice Puff() effect which consists of a simple increase in the element's dimension and an adjustment of their opacity to zero. We can actually mimic this effect with jQuery by creating a puff() plugin which accepts two options, factor and speed. The former is the value by which the dimensions of the element will be incremented, while the latter is the speed of the overall animation. Here's the jQuery code:

jQuery: rounded corners and CSS

Internet Explorer 8 and lower doesn't support CSS rounded corners obtained by using the border-radius property. For that reason, developers use a simple technique: they stack several different elements one on the top of the other and apply a different background image on each element, thus creating the effect of rounded corners. The major drawback of this technique is that you have to manually add these elements to the markup. Fortunately, we can automate this process using jQuery. Let's see how.

JavaScript: object initialization study

Object initialization is surely among the most requested features in OOP with JavaScript. JavaScript has no constructor methods like PHP, so we need to take inspiration from existing JavaScript frameworks, such as Prototype. This library provides an initialize() method to be used with any new object that is being created. I've tried to emulate this behavior but I found only a quick-and-dirty solution that works with objects that make use of the functional constructor patter. Here's the code:

CSS: styling a video gallery

In this post I will show you how to style a video gallery with CSS. We're going to apply the same principle used for fluid image galleries, that is, element dimensions expressed in percentages, including the object element. As you will see, since this kind of element is just a replaced element as images, everything will work as expected. Now let's start with a basic HTML structure that makes use of an unordered list to contain our gallery:

jQuery: convert new lines to br

Replacing new lines with the br element is a required task that we need to perform especially when we want to normalize the default behavior of browsers with the innerHTML property. Browsers such as Internet Explorer, for instance, don't preserve new lines when they have to copy and reproduce the HTML content of an element. Characters such as \n or \r must therefore be converted into br before dealing with this HTML content. In this post I'm going to show you how to accomplish this task with jQuery.