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:

SMAU 2011 in Rome

March 31, 2011: my seminar at SMAU in Rome. Anxious as always, full of doubts about my performance but still ready to do my best, though I don't know how many persons will attend it. Hope it will be a success, though failure is my second name. lol I will talk about the benefits of web standards for the online marketing. Wish me luck!

View Larger Map

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:

CSS: styling a Slideshare embedded slide

We can actually customize the appearance of an embedded Slideshare slide using CSS. More precisely, all we need to do is to use CSS3 attribute selectors to make sure that we match the main container of our slide. In fact, a Slideshare embed code is made up of the following elements:

PHP: design patterns revisited

Design patterns are a cornerstone of OOP in PHP. This presentation shows the latest implementations of design patterns achieved with PHP 5.3. Very interesting, especially if we think that such summaries are scattered throughout many web sites.

Design patterns revisited with PHP 5.3

View more presentations from Fabien Potencier

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: image gallery with puff

In this post we're going to try an experiment: what happens to a jQuery image gallery when we apply a sequential puff effect to it using a JavaScript timer? The puff effect is part of the jQuery UI framework and makes an element disappear while augmenting its dimensions. Its syntax is as follows:

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.

CSS: float layout tutorial

Creating a CSS layout with floats could seem simple to advanced CSS users but not so simple to beginners. This tutorial aims to cover the basics for allowing you to create a simple CSS layout with floats. I'll follow a step-by-step approach to make things easier for you. For now, let's start with our HTML structure:

jQuery: pulsate effect

jQuery UI provides a useful effect called pulsate that makes an element pulsate by adjusting its opacity several times. This effect accepts as its options a speed parameter (expressed in milliseconds) and an integer value that specifies how many times the animation should be repeated. Its syntax is as follows:

jQuery: shake effect

jQuery UI provides, among other effects, the shake effect. This effect simply moves an element horizontally or vertically using the parameters specified in the effect call options. As you will see, this effect mimics a basic feature that we can find in most Flash-driven websites. Its syntax is as follows:

CSS: positioning boxes

This video tutorial shows you the very basic of absolute positioning in CSS. More technical details can be found on CSS Discuss, which also covers the theory behind building up a complete page layout using absolute positioning. If you're interested in some unusual applications of CSS absolute positioning, I made several tests here.

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).

Smau Roma 2011 Gabriele Romanato

View more presentations from Smau

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: drag and drop tutorial

Drag and drop is one of the most interesting and requested features of an interactive web application. jQuery provides its support to drag and drop functionalities through the jQuery UI framework. In this post I'll cover the main aspects of drag and drop by also providing some background insights.

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: the header selector

jQuery provides a useful selector to match all the headings of a web page, namely the :header selector. This selector selects only elements from h1 to h6. For example, given the following HTML structure containing several headings:

CSS: Internet Explorer debugging patterns

Debugging CSS in Internet Explorer 6 and 7 requires the use of some repeated patterns that you've surely encountered or used during the development of a web site. The aim of this post is to provide a simple reference for the most common patterns used with Internet Explorer (also called hacks).

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: shuffle elements

jQuery doesn't provide a method for shuffling elements, so I've created a global $.shuffle() utility function that returns one or more random elements from a DOM collection. This function is very simple but in my humble opinion it should be enhanced much more, for example by making it return always more than one element. It is as follows:

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.

CSS: shadowed tabbed menu

With the new release of Internet Explorer 9 we can start using all the recently added features of CSS3. Among these features, box shadows are certainly the most interesting from a web design perspective. In this post I'm going to show you how to create a tabbed menu having shadows on each tab item. First of all, let's start with our markup:

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:

CSS3 for web developers

Web developers are more interested in coding, while web designers are more attracted by the visual effects that we can achieve with web standards. This post aims to be a brief introduction to CSS3 for web developers, just for addressing some coding issues that may arise while switching from the old CSS 2.1 specifications to CSS3.

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:

innerHTML, new lines and Internet Explorer

Internet Explorer (6, 7, 8) has a major anomaly with new lines handling in the innerHTML property. This problem was first reported back in 2004, and apparently seems to still affect even the latest versions of IE. On this blog post, the problem is described with these words:

CSS: border-radius syntax and example

The CSS border-radius property has a peculiar syntax. First of all, it is a shorthand property that set the radius of each border in a single declaration. For that reason, it's the most used property for getting the effect of rounded corners on element boxes. Its syntax is:

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.