A jQuery numbered content slider is a normal content slider which features a progressive numbering at its very bottom indicating the current slide number. When a slide appears, the corresponding number gains a CSS class that highlights it. Implementing this kind of content slider is not very difficult. First, let's start with our markup:
After running an extended web search for the PHP __autoload() magic method, I was struck by the fact that none of the most useful resources found ever mentioned a basic aspect of this method, namely the underlying include path settings. Either we're talking about basic tutorials or
more advanced strategies, nobody seems to take this setting into account. In short, __autoload() works by searching for files with a given class name in your include path. If it doesn't find a file in your include path, it raises an error.
I've just finished to make Google Prettify support all the reserved keywords of PHP. Since Prettify already supports PHP, I had to create a new language handler called prepro so that its corresponding CSS class will be lang-prepro. Here's an example:
With the aid of the jQuery's ScrollTo plugin we can actually create a content slider that simply works really smoothly. There's nothing different from other content slider examples, except that we're going to use scrollTo() to make everything work. First of all, let's start with our usual markup:
In this post I will show you a basic implementation of a folder view obtained through jQuery and CSS. We'll provide two views to our users: a view where all elements feature a large icon and another view where all elements are laid out as a simple list with smaller icons. This effect can be achieved by simply switching to a specific CSS class with jQuery. Said that, let's see our basic markup:
When you combine jQuery and CSS you can actually get really impressive results, especially when the final effect is to recreate the appearance and working of a desktop environment. I've created this demo just to test how far we can go with the emulation of a desktop application. Of course you can extend this demo with a lot of additional features. This can be considered as my first, real live test on the capabilities of jQuery and CSS when applied to a live environment. Enjoy! smile
In this post I will show you how to style a Twitter feed with CSS. To fetch the Twitter feed, we'll use the jQuery's Tweetable plugin , but you can use a server-side approach as well (as explained in this post). Let's start with our basic markup:
Some consuming web platforms, such as Twitter, offer a great opportunity to use the SimpleXML library to fetch results from remote using XML files. However, sometimes things go wrong and all you get is a bunch of errors. In the case of SimpleXML, this is mainly due to the fact that a web service may be down so that it cannot satisfy your request. In the case of Twitter, this happens too often. So one day you get your latest tweets or news and the other one you get a PHP warning containing (that's too bad) also some sensitive information about your PHP environment.
In this tutorial I will explain you in details how to parse and format a Twitter RSS feed with your latest tweets. What we need to know is the basic structure of a Twitter feed, its URL and how to convert into HTML links all the plain text URLS contained within the feed. First of all, the basic structure of a Twitter feed URL is http://twitter.com/statuses/user_timeline/ followed by your Twitter ID and ended with .rss. To get your Twitter ID, simply visit this site and enter your Twitter username into the form. Done that, you're ready to work with a Twitter feed.
Wordpress automatically formats the post_date field in the wp_posts table using various date formats, including the RSS and Atom ones. The default data type for this field is datetime, which means that the date stored in this field has the format YYYY-MM-DD HH:MM:SS. However, sometimes we may need to format this data type directly, for example if something goes wrong with our RSS or Atom feeds and we actually have to manually create a physical feed. Here's how we can do:
If you come from a classical, traditional OO programming language and you stumbled on this famous article by Douglas Crockford on JavaScript inheritance, you are probably thinking the worst thoughts ever conceived on JavaScript. Don't get me wrong: this article is superb and its author a first-class JavaScript programmer, but surely he doesn't make life easy for non-JavaScript programmers. Let's face it: it's complicated. Yes, it's stimulating, precise, consistent, interesting but, hey, still complicated. Furthermore, this article also describes four sugar methods for dealing with inheritance that, only in theory, should explain inheritance better. Instead, they get things even more complicated to follow. In this post I'll try to explain this article in simpler terms.
If you run a search for AJAX and the MVC pattern, you'll surely notice that the overwhelming majority of results explain you how to create an AJAX-based MVC system but not how to integrate AJAX into an existing one. AJAX is already a three-component system, being based on the interaction between browsers, JavaScript and a web server. The problem with AJAX is that we actually don't know where to put it within an MVC pattern. Do we need an AJAX Model? Do we need an AJAX Controller? Do we need an AJAX View? Since AJAX works in the web browser, and the web browser handles only the View part of our design pattern, it seems obvious that we only need an AJAX View. In other words, we only need that our components return an output that can be handled by JavaScript and AJAX. But here a problem arises: what if our HTML template system is not set to handle such situations?
While studying the source code of Prototype, I discovered that Prototype clones objects by passing an empty object as the first parameter of its extend method. This allows us to get an exact copy of the source object without affecting the original. Since also jQuery has a similar method, called $.extend, I've tried a similar approach by creating a global jQuery function called $.clone that performs an almost identical action. Its code is as follows:
Sometimes we need to run multiple JavaScript timers in parallel, especially when we have to handle multiple repeated animations. In this post I will show you the implementation of a simple utility function to accomplish this task. This function makes use of the jQuery $.extend() method for its default options. The code is as follows:
Frustration is what I feel right know after spending six hours straight trying to understand what's happened to a Wordpress installation that seemed to work fine, at least until the recent upgrade to version 3.1. Here's the story: before the upgrade, the major problem was the RSS feed that simply returned a 404 page. I tried to reset the permalink structure, changed the writing/reading mode privileges on the .htaccess file, removed all unnecessary white-space from template files, disabled and then reactivated plugins, disabled and then reactivated the main theme (which is the Striking theme) and finally created a physical RSS feed by using a real /feed directory and the core Wordpress RSS file handlers. Nothing. Same error: 404 Not Found. Frustrating.
Every time we have to define our breadcrumb separators with CSS we always stumble on the same problem: separators must be proportional to the text of each item. Borders don't work, because they're always taller than expected so a possible choice is to use background images. However, if breadcrumbs are inline, we could experience some problems with horizontal spacing. A good, modern solution is to use generated content to create such separators, which is the same thing as inserting raw characters within the markup. This solution, instead, is a lot neater:
Finally I've found a very useful script that actually randomizes/shuffles an array, so I decided to implement a $.randomize() global jQuery method to accomplish this task. It soon turned out that the aforementioned script works well especially when we deal with jQuery DOM node lists turned into arrays using get(). The implementation of this method is as follows:
A mosaic gallery is a simple CSS image gallery where every single image is put in a specific position within a container. To achieve this effect, we'll use absolute positioning by placing the very first image on the center of the gallery and other four images on its corresponding four corners. jQuery will be used to animate this gallery with a fading effect that will progressively show each image and then collapse them all. Of course you can get more interesting CSS effects if you make your images overlap and use CSS3 transformations. Here's our CSS:
Forty minutes ago I received a message from Facebook where my good friend Ivan asked me his Facebook friendship again. I asked him what was going on and he simply said that he did try to reset his password but he failed because he couldn't remember his very first password. In short, the system simply blocked his actions because he exceeded the limit of attempts. This is a normal procedure due to the prevention of malicious attacks against one user's credentials. However, this
also happened because the application's password recovery works only on a single level, not on multiple levels. In this post I'm going to explain you why a multilevel approach is a better way to handle password recovery.
So far I've rarely used jQuery's plugins in my projects (except perhaps the jQuery UI effects) because every time I found a plugin I stumbled on some problems. First, documentation: the overwhelming majority of jQuery plugins simply tell you what's the basic usage of the plugin and its options without digging into the details of what I call "unexpected use cases". Such cases are compelling and stimulating. For example, I wanted to create a complex content slider where I had a centered slide and two other slides situated each one on the left and right edge of the container. Further, such slides were partially hidden. I searched the web for hours but the only type of plugins I found was the classic floating-based one (and that was not my case). In short, I had to write the code all by myself. Zero plugins, more fun.
If we play carefully with CSS absolute and relative positioning, we can actually get some interesting effects through the animate() method. This is the case of an expandable image gallery: you click on a magnifying glass, a box appears at the bottom of the gallery and then the current image moves from its position to the center of the box with enlarged dimensions. Finally, you click on a closing button and the image gets again its original position and dimensions while the box disappears. This can be actually done by first declaring the image as relatively positioned, then absolutely positioned and finally relatively positioned again. Let's start with our basic markup:
My next jQuery project will be all about the remake of a Flash-driven web site of a company. This web site features an image gallery where each image set is displayed on several columns, each one with a progressive number. The gallery first appears as empty and then each image set is displayed on its corresponding column when you hovers the column itself. When you move your mouse from the column, the image set disappears and so on. The effect is much similar to the jQuery UI drop effect applied to the hide() and show() methods, so I've created a demo for that purpose. First, our markup:
Sometimes we have to get the dimensions of an element when they're defined in our CSS styles. Unfortunately, the style object attached to every element doesn't work in this case, because it can only handle inline styles. Instead, we should get the actual computed styles of an element. Since Internet Explorer uses the currentStyle property and all other W3C DOM compliant browsers implement the getComputedStyle() method, we have to write the following function, popularized by Peter-Paul Koch:
A jQuery vertical image scroller is simply a container that scrolls when a user performs an action on each image contained within it. In our case, we'll see what happens when a user hovers an image with the mouse. Scrolling has nothing to do with the scrollTo jQuery plugin but only to the CSS top property of the image container which will change according to the vertical offset of each image. As always, we start with our basic markup structure:
Swapping elements with jQuery simply means replacing one element with another. This can be actually done with the replaceWith() method combined with the clone() method. In fact, we need to have a copy of the replaced element and a copy of its replacement. We can write the following mini-plugin to accomplish this task:
The key aspect with developing jQuery applications is to have a clear idea about the actual structure of the application itself. Before coding, you should know what kind of components are required by your application. If you don't know these details, the risk is basically only one: writing redundant code. Redundant code is the typical result of a ill-planned application. Generally speaking, this happens when your deadlines are tight and you don't have the time to write modular code. This happens very often.
This video tutorial explains very clearly some practical uses of the jQuery data() method. Personally, I find this video more interesting than my own tutorials on the subject. smile
Internet Explorer still has some problems with jQuery animations and image transparency. When you animate an image by changing its opacity from transparent to opaque, IE shows a black outline that gradually disappears when the animation is complete. This problem affects all jQuery animations and effects, regardless of the image type. To fix this problem, you can write the following code:
Each jQuery selector expression comes equipped with two important properties, namely selector and context. The former returns the string representation of the CSS selectors used in the query, while the latter displays the context where this query takes place, starting with the global HTMLDocument DOM object. For example, suppose that we have the following DOM structure:
During the last months I've downloaded dozens and dozens types of jQuery plugins, used a few and found out that many of them are not cross-browser. If you've read some of my previous posts on the subject of backward compatibility with IE6 and 7, you probably know what's my standpoint. However, jQuery plugins are a completely different category. When you write a jQuery plugin, you're actually providing a new functionality to the web community using jQuery. Though it would be better if in our sites and application there was no room for IE6 and 7, sometimes our clients ask us to support these browsers or, speaking more frankly, they order us to extend our support to IE6 and 7 for whatever reason (they probably have their reasons, which obviously we don't endorse). How we can do this?
In this post we're going to analyze the main style sheet of a Wordpress theme. For our example, we've chosen the Amazing Grace theme which, using the words of his author, is a
"lightweight, super-optimized WordPress theme packed with features (SEO, Adsense, Translation and Widget Ready)
". When you download this theme, the main CSS file is located in the main theme directory, namely amazing-grace. All the images used by the main style sheet are located within the images directory. Let's start our analysis from the very beginning.
In this tutorial I will show you how to create a neat accordion effect with jQuery. An accordion is made up of two main parts: an accordion trigger and some hidden content. When you click on the trigger (usually an heading), you check whether the content is still hidden or not. If it's visible, you hide it again, otherwise you show it. Meanwhile, you change some styles (usually a background image) on the trigger depending on the visibility of the content. Most developers use a jQuery slideDown()/slideUp() effect on the content area, so we're going to use that too. First of all, let's start with our markup:
Most developers get frustrated by the fact that they can't style form controls as they wish. The problem lies in the fact that form controls are not covered by the CSS specifications. CSS defines only the default display role of some form controls, such as input and textarea, by declaring them as inline-block elements. As result, browsers tend to apply their default algorithms and styles to form controls, making life really hard for developers. This post is a simple list of common problems and solutions encountered during my daily work with form controls.
HTML 4.01 introduced the concept of successful form controls. Quoting the HTML 4.01 specifications, "A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a
. This definition might lead to some confusion, so the specifications add the following:form element and must have a control name.
One of the first concepts you need to grasp in JavaScript is the difference between global and local variables. As a rule of thumb, you should avoid global variables because they pollute the global namespace of your JavaScript code and potentially lead to unexpected problems, not to say that they can generated conflicts between libraries and scripts. I realize that the best tutorial is a tutorial when you can experience a sense of empathy with the author, so here it follows an interesting video tutorial taken from YouTube.
Serializing a form without jQuery is not a complex task. All we have to do is to loop through all the elements of a form and select the appropriate ones together with their values. To accomplish this, we'll use the special DOM collection called elements which comes bound to every form. This collection is a relic of the DOM Level-0 era, but it's really handy. Bear in mind that if you want to use the DOM Level-1 approach, you have to call getElementsByTagName() for every element type (input, select and so on), or, alternatively, use childNodes. Let's take a look at our code:
Events in jQuery are all part of the more global JavaScript Event object. jQuery mitigates the existing differences across browsers to give us full control over events. What we use in jQuery is simply a workaround that fixes browser inconsistencies in their event implementation. For example, when we use $(element).click(handler) or $(element).bind('click', handler), jQuery tries first the W3C DOM addEventListener() method if supported and, for Internet Explorer 8 and lower, uses the proprietary attachEvent() method. We may say that jQuery event handling is an extension added to the normal DOM core methods for events. Let's see some interesting features of jQuery event handling.
The main difference between CSS relative and absolute positioning lies in the context where positioning takes place. Relative positioning takes into account the current position of the element on the page, while absolute positioning uses the viewport as its default context.
In this post I'm going to show you how to add some animations to a jQuery content slider when each slide comes into sight. To accomplish this, we'll create a very simple jQuery plugin that not only handles a content slider but also add some animations to the slides. As always, we start with our underlying HTML structure, which is as follows:
This post will show you how to create an image gallery using the CSS clip property to add a dynamic effect on hover. If you want to know the theory behind this and other similar examples, check out this excellent tutorial on the subject. First of all, we start with the underlying markup, as usual:
A word cloud is always something nice to do with CSS. All we need is a basic knowledge of CSS positioning and a couple of CSS transformations to add a final touch to our layout. Here's the background of this demo: I was searching the web for a PHP patch for Google Prettify and I simply stumbled on the following image:
Let's see how to get a similar result with CSS.
The HTML5 specifications introduce the concept of DOM classList to be used with any HTML element. According to the specifications, this DOM property should contain a list of tokens which represent the various class names used within the class attribute. Simply put, this property returns a space-separated string containing all the class names attached to a given element. Some browsers already implement classList, others don't. For that reason, we need to create a simple jQuery plugin to handle this property in a cross-browser fashion. Let's see how.
In this post I'm going to show you how to create a tabbed content slider with jQuery. Our tabbed content slider is a simple slider with a top tabbed list. When you select a slide using the slider controls, the corresponding tab will be highlighted. As always with these demos, we have to create first our markup, then add our CSS rules and finally jQuery. Let's start with our markup:
Minifying CSS is not the same as compressing. Most developers who want to spare a significant amount of bandwidth and improve the performance of their sites (especially from a client-side perspective) get confused by these two terms. In simple words, minifying a CSS file means removing all unnecessary white-space characters from the file. New lines, spaces, form feeds, carriage return characters and tabs are all part of the more global white-space token. Obviously, since some white-space has a special meaning in CSS selectors and syntax, white-space must be removed by taking into account some special cases when it's actually required.
jQuery UI comes equipped with a blind effect bound to its effect() wrapper. This effect simply makes an element disappear with a particular resizing effect. blind accepts several parameters, which include mode, direction, speed and an optional callback function to be executed when the effect is complete. The first parameter can be either show or hide, meaning that the effect will show or hide an element. The second parameter, instead, can be horizontal or vertical and it simply makes the effect run from left to right or from top to bottom, depending on the mode you choose.
In the project I'm currently developing I've started using the CSS z-index property like never before. This property allows you to create a multi-layer layout using CSS positioning. To see this property in action, elements must overlap. By default, when an overlapping occurs browsers tend to stack the latest element in the source before other positioned elements. But if you specify a numeric index for each element, you can control the layering process.
Today I found some spare time to make a porting of a Coda color scheme for TextMate to Google Prettify. As always with these operations, something is still missing after the process, mainly due to the fact that the color schemes of Coda don't match the CSS classes used by Google Prettify. In fact, Coda features more color combinations than Google Prettify, depending on the language in use.
CSS is not Photoshop. Period. CSS is a style sheet language designed to allow you to build complete page layouts starting from an HTML underlying structure. With CSS, you should rethink your approach to visual design. First, with CSS your design is not a full-box where the end user has no access but rather an interactive field where user's and designer's needs meet each other.
Sorry if you don't see many posts these days, but the fact is that I'm hard-working on an important project and I basically don't have the time to write some new tutorials or examples. Yesterday I ran through 14 straight hours of CSS, jQuery and HTML that must work even in Internet Explorer 6, so you got the whole idea. In the meantime, check out my linked resources on CSS if you want to read something interesting. Oops, I gotta go. See you soon! smile
