Flash is a really valuable source of inspiration for jQuery developers. In this article we'll see how to create a Flash menu which plays a sound when you select an item with a rollover. Let's see the details.
jQuery: Flash menu with sound
0
Showing posts with label jquery. Show all posts
jQuery: serialize elements outside forms
A good question today from Stack Overflow: how can we serialize an element which is not a form? jQuery provides the serialize() and serializeArray() methods that operate on forms by turning attributes and values into properties and values of a returned JSON object (the latter) or by building a standard query string (the former). However, creating a JSON object from an element is quite simple. Let's see why.
jQuery: password strength checker
We can use JavaScript regular expressions together with jQuery to create a simple plugin that checks the strength of a user-defined password. The concept behind is quite simple: every time a user types a character in the input field, the value inserted is compared against the corresponding regular expression. Passwords can be medium, weak or strong in terms of strength. Strength doesn't depend on the number of characters inserted, but on the combination of letters, digits and special characters. Let's see the details.
jQuery: smart Lavalamp menu plugin
Yesterday a friend of mine was in trouble because he desperately needed to create a jQuery Lavalamp menu for a client featuring some peculiar characteristics, such as the ability to start from the current page item and an intelligent movement sensor which allows the cursor to stay on the last selected item. I created for him a simple jQuery plugin that performs all these tasks. Let's see the details.
Integrating jQuery plugins in WordPress
One of the most frequently asked questions on forums, blogs and mailing lists concerns the integration of jQuery plugins with WordPress. Integrating jQuery plugins with WordPress is not a matter of queuing scripts only, but it also means understanding the correct hierarchy and order by which scripts are executed within WordPress. Let's see the details of this topic.
jQuery: curtain effect on slideshows
jQuery Easing is a fantastic plugin, surely one of my favorites. Today I've created a nice curtain effect on a jQuery slideshow that I'd like to share with you. Let's see the details.
jQuery: Observer Pattern on slideshows
I've just finished to work on an interesting jQuery/WordPress project (you can find it here) where I had to build an interactive slideshow very similar to a classic jQuery slot machine in its inner functioning. The only problem was to keep track of the visibility of the slides, that is, being sure that the current slide was visible. This is a fantastic use case for the Observer Pattern.
Image slideshow with jQuery UI effects
jQuery UI come bundled with an outstanding set of visual effects. In this article I'll show you how to apply such effects to a jQuery image slideshow. As you will see, results won't disappoint you.
jQuery: slot machine slideshow
I'm currently working on a complex WordPress slideshow and in the meantime I'm also doing some preparatory testing. As a result, I've created a really simple jQuery slideshow that emulates the basic behavior of a slot machine thanks to the jQuery's Easing plugin. Let's see the details.
jQuery: serialize a form as a JSON object
If you're using AJAX with a form and you want to pass a JSON object to one of the jQuery's AJAX methods used to process the request, you will probably wonder how this could be done. Basically, you should convert your form values to a plain array, loop through all the items in the array and finally return a plain object literal. Let's see the details.
jQuery: AJAX contact form for WordPress
jQuery can actually interact very well with WordPress. A typical example of this is surely a contact form enhanced with AJAX. Let's see how things work from the client-side point of view.
jQuery: Mati, professional image gallery
Mati is a professional jQuery image gallery that I've created as an homage to my little niece Matilde. It's a grid-based image gallery that allows you to navigate through the image sets and view the full-size image preview. It's free. The only thing you should do is to add an image preloading routine to improve performance. I hope you find it useful.
jQuery: the moreLink plugin for WordPress
moreLink is a jQuery plugin written by me that handles the 'More' links of a WordPress site by fetching the linked post via AJAX without refreshing the page.
jQuery: how to split images on slideshows
Splitting and dividing images on a jQuery slideshow is not so difficult as it could seem at a first glance. In fact, if you know the technique that works behind the scenes, you'll probably end up with realizing how this feature is simple in its implementation. In a nutshell: it's only a matter of layers and background images. Let's see the details.
jQuery: closing gate effect on a slideshow
A closing gate-like effect on a jQuery slideshow takes only two opposite, positioned elements to be executed on each slide in order to show the current image. These two panels slide in opposite directions, thus creating the effect of a closing and opening gate. Let's see the details.
jQuery: a usability lesson
Why jQuery is one of the most used JavaScript libraries available on the web? Perhaps it has more features than other libraries or more flexibility. Perhaps its design is better conceived. Nothing like that: jQuery is a successful project simply because it has usability in mind. Usability is a too often neglected aspect of library development. jQuery fills this gap by providing a simple way to perform tasks that other libraries tend to make too complicated for the average user. That's the jQuery's secret.
jQuery: using timers with animations
JavaScript timers constitute the inner engine of any good automated jQuery slideshow. Although timers can be really handy in most situations and case-scenarios, their rules are somewhat obscure to many developers. The point is that timers can be used in a wide range of use cases, not only in animations. For that reason, you should understand how timers work when applied to jQuery animations before developing any practical implementation that makes use of them.
jQuery slideLeft plugin
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.
jQuery: scanner effect on a slideshow
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.
Pure CSS3 content slider
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.