jQuery doesn't provide natively a method to slide an element from left to right, so here's a lightweight and simple plugin to accomplish this task. slideLeft() is intelligent enough to calculate the width of an element by referencing it to the width of its parent element and animate such property accordingly. I hope you find it useful.
An interesting effect that we can achieve with jQuery on a slideshow is the scanner effect. Basically, it's simply a vertical bar that moves from left to right on each slide. The effect is even more interesting if we use an expanding movement on each slide. Let's see how.
My friend Francesca has recently started
her web site which features a nice content slider on the home page. I decided to create a similar slider using jQuery, but I soon realized that the main effect could be actually achieved using only CSS3 transitions. Let's see how.
I always take inspiration from desktop applications to create new jQuery demos. In this post I'd like to show you how to create an image slideshow which features a vertical thumbnail-based menu on its left side. This menu is initially hidden and it will be shown by clicking on a tab. Let's see the details.
I'm currently testing some of the recent and new possibilities offered by CSS grids and I have to say that I still haven't found what I'm looking for. Most of these grids are based on fixed sizes, meaning that the current base grid is made up of lengths measured in pixels. Pixels are a bad approach to CSS design because this approach actually doesn't take into account the problem of screen resolution. In fact, a 960 pixels grid system fails spectacularly on the most recent versions of PC and Mac monitors: simply put, it doesn't fill well the screen. A better approach is to use percentages. Let's see how.
I recently had to modify the Ventura WordPress theme which features an interesting content slider based on expanding tabs. I decided to recreate the basic expanding effect of the tabs with a simple combination of jQuery and CSS. Let's see the results.
Today I had to write my weekly post on the Html.it blog and I suddenly start mumbling on the recent possibilities offered by jQuery's deferred objects. When we deal with content sliders we usually have to perform two main tasks: sliding and animating. If you take a look at one of my past works, namely BTMagazine, you'll surely notice that each slide has a lot of effects and animations. You'd probably be worried by knowing that each animation set has been created by using a long chain of nested callback functions that span on several lines. In short, the code works but it's a mess. Deferred objects, instead, allow us to create all the effects we need without having to use callback functions. Let's see how.
The theory behind a jQuery slideshow is one of the most neglected topics in a million. Many web sites provide excellent tutorials on how to create specific slideshows for specific scenarios, but there are no tutorials covering the theory and the basics of a jQuery slideshow. In short, you're a developer who wants to create a slideshow for his/her client. You've tried to use an existing plugin but the client's needs are very specific and the chosen plugin doesn't fit the bill. So you need to understand how a jQuery slideshow works in order to create a custom one. Let's get to work.
The recommended way of customizing your default WordPress theme is to create a child theme. However, sometimes we only need to add just a few style rules to override some default styles of our theme, so what we really need is to create a custom style sheet for our theme. Let's see how.
Internet Explorer 8 doesn't support the HTML5 placeholder attribute that we can use to label our text fields. Fortunately, we can emulate this attribute with jQuery. Let's see how.
JavaScript social buttons are evil. They may cause major hiccups in the overall performance of your sites, not to mention that they may actually block the rendering of your pages. Iframes are better, because they load simple HTML snippets. In this post I'll show you how to add the Twitter, Facebook and Google Plus buttons to your WordPress theme.
The most stimulating part of my job with jQuery is to turn ideas into code. Today I needed to create a notification system for a web site. A user can fill out a form by specifying if he's writing a project or a task. jQuery collects all the data and populate the corresponding item on a top menu. The most important part is that you can further extend the basic code to work with AJAX. Let's see now our implementation.