Beginner or an actual developer, you sometimes need some jQuery tutorials to customize your site or the client’s and make it a dynamic platform for its visitors. From the numerous jQuery tutorials that are on the net, I’ve selected 65 that I believe are the best you can find. A few of these are video tutorials, but most of them are presented in the oldschool form of text + images and a serious description and examples. jQuery never seemed easier.
Continuing on our quest for building customizable alternatives for browser’s controls, this week we are building a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.
Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.
This menu looks very similar to the Apple-style navigation but it reveals some icons when hovering over it. The icons slide out from the top and when the mouse leaves the link, the icon slides back under the link element. This creates a neat “card-shuffle” effect.
It’s just so intuitive and simple. So, I have decided to build something similar but with a few of enhancements. I’m going to show you how to build it and how to convert it to plugins. Tested on IE6, 7, 8, Firefox, Chrome and Safari.
Have you ever had to manually code something that is sequential? Didn’t you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.
But still, it’s nice to offer users an alternate way to get at your feeds, so typically you will see a feed icon lurking around a site somewhere. At times, you will see a list of two, three or more links to different feeds offered on a site. Why not have an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site? Why I ask? Why?
It’d be awesome to allow users to click your feed icon and be presented with a list of feeds to choose from. Hmmm, I want your twitter feed in Atom format or I’d like to subscribe to your blog feed in RSS format. Done.
In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.
The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking. Moreover, we want to have a couple of images for each item, hence we will create a slider.
When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin. In this tutorial we will bump into some of these conflicts and we will adapt some lines of code in order to bypass them.
In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how to make the preview slider work separately from the full image view, we decided to make a tutorial on how to use the little thumbnails preview part only.
It’s always fun to play with jQuery especially when you are trying to recreate something that you enjoy using. One such thing is window chooser in Opera Mobile browser where opened windows are positioned below each other and only a portion of each window is visible. The one on the top is current window that is fully visible. Clicking on those windows is followed by some nice effect.
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.
In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover over the slider dots and make the regarding thumbnail slide into the previewer. When clicking a slider dot, the full image will slide in from the right or left side, depending on the currently viewed image.
Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.
In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form.
In conjunction with the jQuery conference in Boston, John Resig announced and released the highly anticipated jQuery Mobile. Though currently in an alpha state, the framework is fantastic.
Today, we’ll dive in, and build a simple RSS reader, using PHP and jQuery Mobile. When we’re finished, you’ll have the ability to add this simple project to your iPhone or Android phone with the click of a button, as well as the skills to build your web apps!
We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective. This will give a great depth to the whole slider when it’s in motion.
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.
When creating your web designs, you are always striving for a consistent look across the different browsers. Unfortunately, one of the most fundamental elements of your website – the browser controls – also prove the most difficult to style. Some of them, like the select element, are impossible to change beyond a certain extent.
This is why, today we are building a script that is going to take an ordinary select element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.
Today we will show you how to use and customize the brilliant jQuery Booklet Plugin by talented Will Grauvogel. We will create a virtual Moleskine notebook with latest posts from the blog.
Digg.com is one of the most popular social networking sites, allowing you to discover and share the content all over the web. In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.
The Beatles are on iTunes! Or, if you are like me and don’t care that much about it, you’ve probably noticed the awesome splash screen that Apple used to promote the event. Risking to start a trend, in this tutorial we are going to create a simple jQuery plugin that will display fancy Apple-style splash screens for us.
In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse. Clicking on a thumbnail will zoom in a big circle and the full image which will be automatically resized to fit into the screen. Navigating through the images will slide the current image to the side and make the new one appear in a zoom like fashion.
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.
In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with a dark overlay. The menu will stay white and a submenu area will expand. We will create this effect using jQuery.
Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.
We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build
Some time ago I was doing some proof of concept: how Visual Studio docking functionality can be done with jQuery and unordered lists. Basically, the main goal was to implement multiple docking and undocking functionality. This tutorial will show you the results of PoC.
Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out.
users. Unfortunately, many websites make it unnecessarily difficult to send your feedback or lack this functionality altogether
Today we are making a simple solution to this problem. Powered by jQuery, PHP and the PHPMailer class, this form sends the users’ suggestions directly to your mailbox.
Some videos on YouTube have a cool feature called “Turn the lights down”. Basically, when you turn lights down, the entire page darkens and let you watch video as if you are in the cinema. This tutorial will show you how to implement this simple effect.
Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item. The image can be enlarged by clicking on it, making it appear as an overlay.
The idea is to animate the content elements whenever a thumbnail is clicked. We will animate the heading from the top, fade out the previous image and slide the descriptions from the sides.
The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically.
In today’s tutorial we will be creating a custom animation banner with jQuery. The idea is to have different elements in a banner that will animate step-wise in a custom way.
We will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations.
By far one of the most requested features by Tutorialzine’s readers, is building a site-wide search. One way to do it, is to build it yourself from the ground up. That is, to use a server-side language like PHP and run search queries on your database, displaying the results to the user.
Another way is to use the services of the one search engine that already knows everything about everyone. Yep, you guessed it. In this tutorial we are using Google’s AJAX Search API, to create a custom search engine, with which you can search for web results, images, video and news items on your site.
Today we will create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio. We got the idea from the wonderful portfolio of www.rareview.com where Flash is used to create the effect. We will use jQuery.
jQuery is a great library for this type of task but out of the box, it can’t animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer)
This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area which opens once an album is chosen. The thumbnails will scroll to the end and move back to the first image. The user can scroll through the thumbnails by using the slider controls. When a thumbnail is clicked, it moves to the center and the full image preview opens. Navigating though the images will make them slide in and out from the sides, moving the underlying thumbnails container. When the preview is closed, the full image will fade back to the thumbnail.
If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you click on it the icon on the left “jumps” for a few times. I love that animation. And that’s why I’m going to show you how to create the same button using jQuery and some simple CSS.
Listening to what your visitors have to say, is always beneficial when planning new features or changes in your website. For a long time we’ve been limited to just setting up a contact form and hoping that quality feedback will follow, which unfortunately is not always the case.
Today we are taking things up a notch – we are applying the same social principles that have brought success to sharing sites such as Digg and delicious, and encourage visitors to suggest and vote on features that they want implemented on your website.
How often do you find that images in a website load gracefully; the kind where a loading icon first appears, and the image then fades in, once loaded? This technique can greatly boost the performance of your website. If you’re not already familiar with this method, you’re in luck! Today, we’ll create a preloader plugin for your projects. Intrigued?
Today we will create a news previewer that let’s you show your latest articles or news in a compact way. The news previewer will show some list of articles on the left side and the preview of the article with a longer description on the right. Once a news on the left is clicked, the preview will slide in.
Here’s a clever little script that’s certainly useful if you want to give users the functionality to refine search results or filter product results. If you had a list of films with long titles this would be a quick and easy way to filter through the results.
In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed.
Many of you have probably already seen some of those CSS3 generators that have been poppin’ up? Have you perhaps been wondering how they’re made? Wonder no more, that’s what we’ll be creating today, using CSS3, HTML5 and jQuery.
The CSS3 generator we will be creating is Webkit only, so make sure you open up the demo in a Webkit browser like Safari or Chrome.
In this tutorial, we are using jQuery UI’s autocomplete widget, to build a simple AJAX movie search form. The script is going to use TheMovieDatabase.org‘s free API, to provide auto suggestions against a vast database of movie titles.
For those of you who might not be familiar with TMDb.org, this is an open, community driven movie database. It is similar to IMDb, which you’ve probably heard about, but also provides a number of useful API’s for developers.
In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.
When a thumbnail is clicked it will be loaded as a full image preview in the background of the page. We will also have a text container for one of the menu items.
In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.
With the amount of content available online these days, we sometimes have to resort to using different techniques in order to show/hide/group some content or information on a web page.
Content sliders are very popular because they work and usually don’t hinder usability and in many cases can even improve the user experience. Today we’ll learn how to create a stylish content slider using CSS3 and some jQuery magic.
The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.
As we increasingly depend on more and more social services, there rises the need to provide a simple way to let our website visitors take part of our diverse social presence.
In this tutorial we are going to create a simple widget, which combines the number of your RSS readers, twitter followers, and fans of your facebook fan page, to give a rough estimate of your social popularity.
We are using jQuery and the tipTip plugin, object-oriented PHP, and Yahoo’s YQL, while demonstrating a number of interesting web development techniques.
Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare you some space on your website. The items will be semi-transparent which means that content under them will not be completely hidden.
For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.
Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.
The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.
Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.
In this tutorial, we’re going to take a look at how to serve HTML5 forms to modern browsers, while compensating for older browsers by using a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.
In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.
In this tutorial, I’ll show you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications!
By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips.
Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.
In this video quick tip, I’ll teach you how to add a bit of flair to your page, by displaying a set of elements sequentially. While there are numerous ways to accomplish this task, today, we’ll review one technique that uses recursive functions.