I am in love with jQuery, are you? If you are not then you may not have seen the productivity in web design that can happen by using jQuery. I have collected some of the most interesting jQuery scenarios around the web that can make you fall in love with it. Enjoy:
A basic introduction to jQuery and the concepts that you need to know to use it.
Examples of writing Unobtrusive JavaScript to add simple behaviour to a web page.
3)Building Your First jQuery Plug-in
This tutorial will take you step by step through creating your very own truncation plug-in.
4)How to display tips by creating a JQuery plug-in
We are going to learn how to create our custom jQuery plug-in to show tips on mouse over event on our desired elements. We will also be able to customize the appearance of the tip division for each kind of elements in the CSS code and much more.
5)Form validation with jQuery from scratch
The tutorial covers building a lightweight, flexible solution from scratch. It won't be nearly as advanced and powerful as the official plug-in. Nevertheless it will help you learn something from jQuery.
6)Creating a Slick and Accessible Slide Show Using jQuery
In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery).
7)Create a Vertical Scrolling Menu with CSS and jQuery
Create a Vertical Scrolling Menu with CSS and jQuery: With out any hassle of dragging or clicking the scrollbar, users can navigate by just moving the mouse over the content to let it scroll automatically.
8)Horizontal Scrolling Menu made with CSS and jQuery
Create a Horizontal Scrolling Menu with CSS and jQuery: With out any hassle of dragging or clicking the scrollbar, users can navigate by just moving the mouse over the content to let it scroll automatically.
Create simple structure made of a div containing our buttons, we will use some image as buttons, and the section we want to hide/unhide.
Write less code and create tabs easily with this jQuery plugin.
11)how to create a stunning and smooth popup using jQuery
Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and we are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial.
12)Create a smooth tabbed menu in jQuery
Learn how to create a smooth tabbed menu with our lovely jQuery library. With simple and clean layout we can have a great tabbed menu for this websites.
13)How validate forms in both sides using php jQuery
Learn how to validate your forms using PHP and jQuery in both sides: client side (using JavaScript with jQuery) and server side (using PHP). It will be interesting to see how to use regular expressions to validate different kind of e-mails, passwords and more.
14)Improving search boxes with jQuery
Learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, and auto replace default text and more by using jQuery.
15)Submit a form without page refresh using jQuery
See how easy it is to do just that -- submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a pup script that processes in the background).
16)jQuery tabbed interface tabbed structure menu tutorial
Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect.
17)Simple jQuery modal window tutorial
How to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to "modal" and grab the DIV #id defined in the and displays it as a modal window.
18)Tutorial : AJAX interface/menu using jQuery
This tutorial teaches you how to present data using AJAX (using jQuery) with some neat effects. We can use PHP/me to store the data and call it.
19)Building modal panels with jQuery
A modal box is a great interface solution when you want to focus the user’s attention to a specific task. It’s ideal for displaying things like alert messages, confirmation dialogues and photos.In this tutorial we’ll build one from scratch using jQuery.
20)jQuery-rollovers-using-this
If you’ve been programming in PHP, or other object oriented languages, you may have come across “this” or “self”. With jQuery, we can write $(this) to select an element in the DOM (Document Object Model). The best way to demonstrate this is with a simple example.
Nice way to load images using jQuery .
22)Disjointed Rollovers with jQuery
Learn to put in a rollover effect for the navigation on your web page.
23)Inline Image Enlargement with jQuery
Make the image large while hovering without displacing the text.
24)Ajaxify you web Pages using jQuery
This simple tutorial will show you how to dynamically load your web content via Ajax instead of default behavior HTTP request (full round trip).
25)PHP Login Form using j
Query
This tutorial shows how to make an Ajax based using jQuery in PHP.
26)Building a Light box with jQuery
Create really cool light box with this jQuery tutorial.
27)Simple jQuery image slide show with semi transparent caption
How to create a simple image slide show with a semi-transparent caption with jQuery. This example is suitable to display news headlines, or an image slide show in your website FrontPage.
28)jQuery image gallery news slider with caption tutorial
A really cool News Slider that uses two strollers to create very slick effect. It uses scroll To to scroll both description and image items and it comes with previous, next, play, stop and mouse over events.
29)Create an attractive jQuery menu with fade-in and fadeout effect
We will be learning how to create an attractive menu with more advanced CSS and simple jQuery script. It uses jQuery built-in fade-in and fadeout effect.
30)create a vertical horizontal and diagonal sliding content website with jQuery
Create a content sliding website that slide vertically, horizontally or diagonally. This is one of the famous techniques used by most of the portfolio websites.
31)Simple lava lamp menu tutorial with jQuery
A little bit of style guide to create a unique lava menu for your own website. It supports styling, different animation transitions and it's so simple.
32)jQuery moving tab and sliding content tutorial
Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.
33)create a stunning sliding door effect with jQuery
Learn how to make a stunning four corners sliding effect easily with jQuery. It's elegant, unique and really cool solution for thumbnail gallery. This tutorial includes detailed explanation that will guide you through the whole process.
34)jQuery thumbnail with zooming image and fading caption tutorial
Learn how to build thumbnail gallery with zooming effect and fade-in and fadeout caption. This tutorial will walk you through the concept behind it and how to code it.
Basic Tetris written in JavaScript and jQuery
Here is compiled a list of 3 menu plugins, and and 5 ‘custom’ solutions that people have setup.
37)Creating Ajax websites based on anchor navigation
Learn how to create an AJAX website without lose the reference to the URL.
38)Easy XML Consumption using jQuery
With the popularity of AJAX Web 2.0 style applications and the increase in web services it has become increasingly important to be able to parse XML from the client browser. This is not the easiest thing to do in a cross browser manner without the aid of a JavaScript library that supports XML. Fortunately jQuery makes XML utilization (almost) effortless. If you possess a basic understanding of how to program JavaScript then this tutorial will have you working with XML in 20 minutes
39)jQuery Thick box and ColdFusion Dynamic Image Resizing
Build a page which will make use of the Thickbox plug-in, but you don't want need hard code the images. Instead, you'll let ColdFusion scan a folder and create the list for you.
40)jQuery/PHP: Simple Random Text Generation Box
Learn how to create a div with a field of text in it, and upon clicking a link, will load a JQuery animation, replace the text inside the box, and then load another jQuery animation.
41)how to use jQuery and Ajax.NET Professional together
An example on how to use jQuery and Ajax.NET Professional together.
42)jQuery and Google Maps Tutorial: #1 Basics
Create a custom Google Maps mash up. In this tutorial, you will learn how to get started using jQuery inside the Google Maps environment.
43)jQuery and Google Maps #2: AJAX Storing and Retrieving Point
Learn how to store and retrieve points with using AJAX and a server-side language. This tutorial will use PHP/me on the server, but it is basic enough that re-writing in another language should not be difficult.
44)How to find the mouse position with jQuery
Quick tutorial of finding the position of the mouse on a page.
45)Really simple live comment preview
Adding a live preview to the comment entry area of WordPress.
46)Creating an os web interface in jQuery
Learn how to create the drag & drop interaction, the double click on icons and a basic taskbar with a start disabled button and a real clock of the system.
47)How to create a stunning and smooth popup using jQuery
Learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial.
48)Create an amazing music player using mouse gestures hotkeys in jQuery
Learn how to create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.
49)Animated menus using jQuery
Learn how to create an animated menu (very similar to Dragon Interactive menu).
50) Set hover class for anything
Hovering links and text with CSS is very easy but you cant hover everything with it. This tutorial makes you able to hover everything!
51)Characters remaining on an input field
Learn how to create a counter on your input text.
Learn how to allow visitors to inc
rease or decrease the text size (font size) on your website using jQuery.
53)Safer Contact Forms Without CAPTCHAs
This tutorial shows how to a build complete, jQuery-based, solution for stopping spammers from miss-using your forms.
54)How to load content via Ajax in jQuery
Useful tutorial for those who need to know how to load dynamically some static content in their websites via AJAX.
55)Creating Ajax websites based on anchor navigation
Learn how to create an AJAX website without lose the reference to the URL.
56)Auto populating select boxes using jQuery Ajax
Allow the user to select a top level category from one select box and to automatically populate the sub-category.
57)Auto complete field with jQuery , JSON and PHP
jQuery makes remote scripting a piece of cake and that led me to spend more time coding additional functionalities for the auto-complete field.Learn how to use my auto-complete field.
58)Create a stunning sliding door effect with jQuery
Learn how to make a stunning four corners sliding effect easily with jQuery. It's elegant, unique and really cool solution for thumbnail gallery.
59)jQuery thumbnail with zooming image and fading caption tutorial
Learn how to build thumbnail gallery with zooming effect and fade-in and fadeout caption. This tutorial will walk you through the concept behind it and how to code it.
60)How to use jQuery Date picker plug-in
The jQuery UI Date picker is a highly configurable plug-in that adds date picker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
61)How to use jQuery Week Calendar plug-in
The jQuery-week-calendar plug-in provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jQuery and jQuery up and is inspired by other online weekly calendars such as Google calendar.
62)jQuery Visualize Plug-in: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas
Learn how to generate bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
63)Unit-Testing-with-jQuery-using-Fire Unit-QUnit.aspx
Unit test Java Scripts easily with jQuery
64)jQuery UI Dialog w/Resizable iFrame
Resizable Dialog box UI for value added coolness.
The post has the list of the top 5 jQuery modal Plugging which can be used to either notify or request information to/from the user.
66)jQuery Flexigrid Using C#3.0 & LINQ
Flexgrid is a jQuery plug-in!Flexgrig uses jQuery to asynchronously populate content of the grid using either XML or JSON input. This tutorial as the example of using Flexgrid Using C# 3.0 and Line.
As jQuery is such a simple language to learn, most people code their own for their own sites. Here is a compiled list of 3 menu plugging, and 5 ‘custom’ solutions that people have setup.
68)Formatting your twitter stream with jQuery
Include your twitter stream into your blog or website, and then format it using jQuery so your tweets have an alternating background colour.
69)Making a slide in menu using jQuery video tutorial
This tutorial shows how to make a basic slide in/drop down menu using jQuery. The menu itself stylishly slides in and has transparencies so you can view data behind it.
70)Building a jQuery-Powered Tag-Cloud
A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud. Aside from the actual links themselves, which give people an idea of the subjects that your site covers, they can also show how popular the different subjects are.Learn how to create Tag-Cloud.
71)Create a Photo Admin Site Using PHP and jQuery
Learn hot to create a photo site using PHP, jQuery, and AJAX.
72)Use jQuery with Google analytics to track clicks on outgoing links from your site
Add outbound link tracking to a new or existing site. Provided that your links to other sites have the REL attribute set, you can track them very easily with some help from jQuery.
73)Adding Form validation to WordPress comments using jQuery
When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial I'll show you how to use jQuery to do some instant checking on an example comment form.
74)Create an apple style menu and improve it via jQuery
Learn how to create extraordinary apple style menu.
75)Build a Basic Newspaper style layout with WordPress and jQuery
Learn to use the power of jQuery to create a grid layout with size-degrading headers.
76)Multiple file upload magic with unobtrusive java script
Magic of jQuery that makes you able to upload multiple files at once. Of course with less code.
77)Easy multi select transfer with jQuery
Learn how to select multiple objects from a listbox.
78)Rounded Corners with jQuery
Love designs with round corners? Instead of using CSS you can also do it by jQuery.
Worried about your networking exam? Then give a try out our latest ccie dumps and ccnp dumps to prepare and pass real exam on first try.