10 jQuery Tutorials For Web development

Tutorials

1. Facebook like Autosuggestion

I received a lot of request from my readers that asked to me how to implement Autosuggestion search with jquery. I love facebook API it’s neat, so I had developed Facebook like Autosuggestion user search with jQuery, Ajax and PHP. It’s simple and clean just you have to change the database details.


View Demonstration

2. Coda Popup Bubbles

In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect, but there’s a few nuances to be wary of.


View Demonstration

3. Creating a Dynamic Poll with jQuery and PHP

When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.


View Demonstration

4. Create an apple style menu and improve it via jQuery

Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.


View Demonstration

5. Tabbed Content using jQuery and WP_Query

WordPress provides a huge array of information about your blog and it’s content. Showing lots of this information can become space consuming. A great looking solution to this is tabbed content!


View Demonstration

6. Slide out and drawer effect

The Apple web site is a great demonstration of this effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.


View Demonstration

7. WordPress Sidebar Turned Apple-Flashy Using jQuery UI

Apple have always been Gods in terms of the way they present themselves and their products. I just love the sidebar on the Apple Startpage, and wanted to use the Accordion plugin in jQuery UI to achieve this! As if that’s not enough for me, I want to be able to show and hide it at my pleasure as well. I’m gonna show you how!


View Demonstration

8. Image Fade Revisited

This episode is revisiting the image cross fade effect, in particular Dragon Interactive has a beautiful little transition for their navigation that some readers have been requesting. Greg Johnson takes it one step further to implement this method using jQuery and the methods shown here.


View Demonstration

9. Photo Slider Tutorial

First we need to start off with some images. You’ll want these images to be thumbnails that also have a larger view available. In this tutorial I’m using a thumbnail size of 50×50 and a full view of 600×400. You can have any size for the “full view” but the thumbnails must all be the same size. We’ll start with 4 thumbnails.


View Demonstration

10. Create a Slick Tabbed Content Area using CSS & jQuery

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.


View Demonstration

About these ads

4 Responses

  1. Your post is helpful and informative

  2. Hey this is some good info. Keep up a great work.

  3. You are doing an appreciating job. Cheers & keep it up !

  4. Hey! I love your site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 216 other followers

%d bloggers like this: