Many PHP developers who start using the Zend Framework for the first time get always scared of the complexity of this framework. I'd like to say that there's nothing to be worried about. Yes, the Zend Framework is quite complex, but it's perhaps the best documented framework available on the web. This means that there's a reference guide, an online documentation and, above all, a myriad of high-level tutorials available online. In short: all of your present and future questions about this framework have already been answered.

Read more »

I decided to create a PHP widget for Twitter because I was honestly tired of using JavaScript widgets which have the major drawback of causing accessibility problems in those browsers that don't support JavaScript at all. Two things came to my attention: how to replace text URLs with HTML links and how to properly calculate the time elapsed from your latest tweet. I addressed the first problem by using regular expressions, while the second was quickly solved thanks to a careful reading of some good tutorials on the subject. So I created the TwitterWidget class, which is as follows:

Read more »

Lowering the height of an element with the animate() method can be misleading. In fact, even the element's container will shrink its height following the animation's flow. That's not what we want. We want to lower the height from top to bottom with a particular shrinking effect. Here's the solution.

Read more »

The following video shows a practical use of the zRSSFeed plugin for jQuery. This plugin allows you to display any RSS feed on your web pages with a minimum effort. Surely one of the easiest ways of parse and render a local or remote RSS feed with jQuery.

While developing a simple Wordpress theme, I was struck (literally) by the fact that the documentation on CSS and Wordpress is lacking of some of the most essential parts of CSS development. One question really needs an answer: how can CSS work together with a dynamic environment like Wordpress? CSS is a static language because it was designed when the web was made up of static HTML pages. CSS has no conditional statements, if we don't consider the newest features of @media rules as conditional constructs. Let's try to answer to this question.

Read more »

jQuery can combine the accordion effect with the visual effect bound to a normal content slider. To accomplish this, we need to use the "magic" CSS table values (supported by IE8+) and the animate() method used together with the hover cumulative event handler. Let's get to the details.

Read more »

We want to implement the effect of a trash where you can drag and drop your items and then empty the trash. Further, we also want to add two sounds, one when the item is dropped into the trash and another one when the trash is emptied. Difficult? Absolutely not! All we need is jQuery UI drag and drop features and the HTML5 audio interface. Let's see the details.

Read more »

To build a jQuery menu with cursor we only need to insert an hidden element in our main menu container. When a user hovers a link, our cursor will be positioned just under the current item while getting the width and the position of that item. We're going to use the animate() method together with the mouseover event. Let's see how it works.

Read more »

An advanced jQuery content slider is a content slider that features several sequential animations on each slide. In our example we'll see a content slider having two sequential animations on each slide. The first animation resizes the main image while the second makes the side content appear for each slide. As you will see, there's nothing difficult with this, provided that you honor the correct animation sequence. Let's start with our markup first.

Read more »

One of the most widely used design techniques in CSS is called grey boxes. Grey boxes are simple layout sketches created with Photoshop (or another similar program) where you simply draw the basic layout structure of your web site. In this phase it's not necessary to add graphics, text or other widgets. All you need is the underlying skeleton of your CSS project. Grey boxes are a must if you want to build a flexible, scalar and reusable layout from scratch. In fact, you can reuse your sketches in many other projects.

Read more »

This video tutorial by Remy Sharp (the Remy Sharp) shows how to implement a simple contact form with AJAX and jQuery. The implementation is pretty simple because the server response is atomic. However, when such a response involves the use of more messages, it becomes pretty complicated to handle them.

Read more »

Creating a YouTube video slideshow with jQuery is exactly the same thing as creating any other jQuery slideshow. The only difference is that instead of divs or images we're dealing with the iframes used by YouTube to embed its videos in web documents. As you will see, there's nothing difficult with this. As usual, we start with our underlying markup first:

Read more »