So just continue to use some of these latest tutorials and build useful designed stuff with jQuery and its plugins.
Yahoo instant search implementing with Yahoo Search Boss API using jquery and ajax. Use this tutorial to make your own search application.
In this tutorial you will learn to create and use a thumbnails preview slider with jQuery.
In this tutorial you 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.
There is this plugin that implements a pretty neat effect with Jquery. To reveal the secret, click on the picture below.
This is a very short post and simple idea to use JQuery animate function in voting system. It can be useful for replacing voting system that using many images. The idea is just expanding the div element (css width property) using animate function, where we just need to add the same value on the width element.
In this tutorial we’re going to use jQuery to make a slideshow
Let’s create the flickr style tooltip drop down menu.
Learn about creating collage image gallery using jquery, and better can be added with rotating feature too.
In this tutorial you are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found here. You will create a menu with little icons that will rotate when hovering. Also, you will make the menu item expand and reveal some menu content, like links or a search box.
It’s the age old (well, in webby terms) issue of how to populate one select box based on another’s selection. It’s actually quite easy compared with the bad old days, and incredibly easy with jQuery and a dash of Ajax.
PHP Captcha Code | View Live Demo
In this tutorial you will be explained how to create a Captcha in PHP. You will be using some of the features available in PHP for creating an image. This is very simple and basic tutorial and we are not using any custom fonts for generating captcha image.
In this tutorial, you will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.
Learn to 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.
This tutorial will tell you how to create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in order to make it look like as if we are covering the content with an overlay. This allows to focus certain elements in a web page while making others appear less prominent.
Learn to implement a super instant search with multiple APIs like twitter, youtube, yahoo and bing. But jquery older versions doesn’t support multiple ajax call-backs, unlike Jquery 1.5.
Learn to create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects that we will add as options to the menu item.
Let’s develop a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events
In this tutorial, we are going to create our own version of Facebook’s wall. We will be using Facebook’s Graph API with jQuery, and the template plugin. The jQuery.tmpl plugin will allow us to define templates within our page, and convert the posts we’ve obtained from the API into a real HTML page.
Let’s take a look at how to implement live table edit with Jquery and real time database update using Ajax. This is an interesting concept playing with DOM objects. You know that majority of readers had requested this tutorial, hope you guys like it!
About detecting character in jquery, now try to do a more sophisticated example, this game inspired by an old shark typing game, which is created by pop cap game, but it seems not to be available anymore.
Let’s create a simple traditional memory game based on JQuery this example using only client side scripting, most people already know how to play this game, usually this game using some card, we must find the same card in two sequential time, if we found it the card would opened until we have all the card empty.
This time the post will show how to expand the stacked images with jquery, for the illustration, there is a stack of images that have very small margin between each image, and the slider have a function to make the margin larger, really easy to imagine right? Now to make it look stacked we’re using jquery plugin, the rotate3Di and of course the JQuery UI slider
Here is a jQuery example for a captcha in a registration form. In order to pass the “Are you human” test, the user has to drag the numbers from 1 to 6 into order.
jQuery offers a plugin called validate which will allow you to create stunningly user friendly sign up forms, login addresses, contact forms and much more. The plugin is written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. In this tutorial you will be taught how to create a signup form with advanced AJAX validation and CAPTCHA.
In this tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.
One of the most requested improvements over the tutorials presented on this site, when it comes to slideshows, is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery.
In this tutorial you’ll be building a cool navigation list complete with a sliding hover effect. Learn how to build the concept in Photoshop, lay out the basic HTML elements, style everything up in CSS then tie it all together with a few lines of jQuery to create a semantic, accessible and degradable menu design.
Sometimes registration form decides your web application success rate, We feel the first step(registration) should be less fields and eye catching it will surely impress the users. This tutorial had designed a new style registration form with gravitational effect. Hope you like it.
In this tutorial, you will take a look at how jQuery’s beta templating system can be put to excellent use in order to completely decouple our HTML from our scripts. You’ll also take a quick look at jQuery 1.5′s completely revamped AJAX module.
In this tutorial you will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. You will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.
Tutorial to make you learn the easy way to connect and read the Facebook home timeline with PHP and Jquery. Explained how to store facebook token and user id hop.
In this tutorial you will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. You will also slide in the colored version of the image, creating a neat effect.
Learn how to use jQuery, and the jQuery UI Draggable and Droppable plugins, to create drag-and-drop interfaces in your web pages. Includes a full drag-and-drop card game example.
This tutorial will explain how to design database tables and implementing grids drag and drop usability with jqueryUI plugin. Using this system, your web project will prove a choice to the end-user, they can manage their own template interface.
Learn to creat a set of element which hold drag and drop capability.
Learn to create a Digg URL Submitter that fetch the submitted url data, some kind that many social bookmarking have, beside facebook, the other famous one is digg.
In this tutorial you will create a simple 5 star rating system using jQuery, MySQL, PHP and AJAX. You will use jQuery to highlight the star the mouse is over and the preceding stars, AJAX to send the vote to the server, PHP to process the vote and MySQL to store the vote.
This tutorial will make you learn to use tagging field when we want to save new link in Delicious.
When it comes to efficiently organizing jQuery code, one of the best options is turning certain parts of it into a plugin. There are many benefits to this – your code becomes easier to modify and follow, and repetitive tasks are handled naturally. This also improves the speed with which you develop, as plugin organization promotes code reuse.
This tutorial will tell you to code Bing instant search with real time search results. Just few lines of code, reading Bing search JSON API file with Jquery.
In this tutorial they 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.
This tutorial will tell you how to creates a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, the background image is going to change according to which menu item was clicked.
If I missed any new Tutorial that you made or might have came across, do leave links in the comments below
Share to show the love