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

LightGallery- Joomla Image Gallery Component

LightGallery 1.0, this is a simple light weight image gallery with lightbox slide show. From the admin side administrator can create category and add/upload photos.

Admin can create two types of views for client side, category list and image list view. If admin create a category and select image list view, it will display images in the current category. Image list view support lightbox slideshow effect.

Features:
* Administrator can add category and images from admin side.
* 2 type layout for client side,Category list and image list.
* Image resizing
* Lightbox Image slide show
* support SEF urls.

Category List view Demo

LightGallery Image view Demo

Download LightGallery v1.0 from here Download

Advanced Joomla Social Bookmarking Plugin

Advanced Social Bookmarker is a small joomla plugin services to your articles with AddThis.com technology, it records every click from your readers. You can view your site statistics to see what’s being shared & where.

Quickly & easily add social bookmarking buttons in 3 separate places in each article.

*Top right corner of an article:
Digg this badge, Retweet badge, Yahoo! buzz up badge

*Individual buttons after an article (footer):
Display individual buttons for the social networking sites of your choice (Over 170 popular sites to choose from).

*AddThis.com popup window (footer)
To the right of your individual site buttons is a ‘More…’ popup window that lists over 170 social bookmarking options for your readers.

This plugin is easy to install & configure, & makes it easy for your visitors to submit articles & build traffic to your site.

Plugin Options:
Show/Hide top right Digg this badge
Show/Hide top right Retweet this badge
Show/Hide top right Yahoo! Buzz this badge
Include any text/HTML above the footer buttons
Include any text/HTML below the footer buttons
Easily add your AddThis.com username to track your site statistics
Easily rename the ‘More…’ button
Easily add your twitter username
Easily add/arrange individual social site buttons before

Demo: http://www.prova.fm/advertising/index.php?option=com_content&view=article&id=30:can-your-business-improve-from-crowdsourcing&catid=8:category-advertising-help&Itemid=30

Download Link: http://www.prova.fm/tools/prova_advanced_social_bookmarker.zip

iwebkit: create high quality iPhone and iPod touch websites

Iwebkit is the revolutionary kit used to create high quality iPhone and iPod touch websites in a few minutes and is based on an LGPL license. In the first 4 months of it’s existance the pack has greatly evolved from a basic idea to a project that has reached worldwide fame!

Here is a sneak peak of what’s new:

• Your creations load 25% faster by reducing and optimizing the code
• The easy tutorials and code now has become even simpler by reducing the size of the HTML documents by 20%
• Awsome new and advanced features offered by no pack in the world like a custom popup and iphone-style form elements
• A whole new website focusing on ease of use and support with a complete new design and a forum.

What is iWebkit

iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials. In a couple of minutes you will have created a full and profesional looking website.

What makes iWebkit the best

iWebKit is a great tool because it is very easy to use, extremely fast, compatible & extendable. It is simple html that anyone can edit contrary to some other very complicated solutions based on ajax. Simplicity is the key!

How to use iWebKit

Developing with iWebKit is the easiest way to create your own website. It is just copy and paste! You can extend iWebkit by adding themes and plugins customizing it the way you want to. The possibilities are infinite. Try it now!

Read more here>>>

BRIDGE : The web based project management system

The BRIDGE is a web based project management system, based on the CakePHP framework, that allows team assignment to projects and collaboration on projects between team members.

Main Features Include:

1. Client Management
2. Account Management
3. Project Management
4. Employee Management

Access Control List Groups (modifiable)

*Optional Integration with SugarCRM

*Optional Integration with MyBB Forum

Read more>>

Some Helpfull Tools to find broken links in your website

When you are working on many pages lets say 100 to 1000 pages, some times we do mistakes that we forgot to give links for the respective URL’s – it turns to a Broken Link (nothing but a 404 error). It will become a nightmare for the webmaster to get hold of these broken links from those 100 pages. To get rid of these types of head-aches, we have online web tools as well as desktop tools which tells us about where these broken links exists in a page or number of pages. You can easily find out and rectify these types of errors.

Below listed are most widely used tools by most of web masters, and I would like to recommend these tools since this going to help us a lot in finding out these errors very easily:

1. W3C Link Checker (Web Tool)

This is a web tool launched by W3C, this Link Checker looks for issues in links, anchors and referenced objects in a Web page, or recursively on a whole Web site. Link checker is part of the W3C’s validators and Quality Web tools – W3C Link Checker

2. Web Link Validator (Desktop Tool)

This Web Link Validator checks for Site Integrity, Syntax Validation, Automatic Reporting and it runs on any system that is with Windows 98/Me/NT/2000/XP/2003/Vista – Web Link Validator

3. Xenu’s Link Sleuth (Desktop Tool)

It check websites for broken links and links verification is also done on “normal” links, images, frames, plug-ins, backgrounds, local image maps, style sheets, scripts and java applets. It has got many more additional features, if you want to know more about the features, please to click here for the same.

4. Dead-Links.com – Free Broken Link Checker (Web Tool)

Put in your website or weblog home page URL in the input box and a little spider will read the html code and check for the broken links – Dead-Links.com – Free Broken Link Checker

5. LinkChecker 0.6.3 by Kevin Freitas (Browser Add-on)

LinkChecker 0.6.3 is a very good firefox add-on, it check the validity of links of any webpage – LinkChecker 0.6.3

6. LinkTiger (Web Tool)

LinkTiger has got very good features like there is no software installation, just register and find out whether your site has got any broken links, it even scans CSS, PDF, Flash, & MS Office files – LinkTiger

7. Link Checker Pro (Desktop Tool)

Link Checker Pro is the leading solution for website analysis and the detection of broken and other problem links. Link Checker Pro combines powerful features and an easy to use interface and is robust enough to deal with corporate websites containing 100,000 links or more.

Link Checker Pro

Hope the above listed tools may help you in finding out broken link in your site.

15 New jQuery Plugins for Web development

1. Tagbox

Tagbox is a simple tagging plugin for jQuery. It automatically collects and split user input into tags. See project page for more information.

Tryout a demo

…………………………………………………………………………………………………………………………………………………

2. ImgAreaSelect

Lets the user select a rectangular area within an image. Can be used to implement image cropping and Flickr-like photo notes.

Try out a demo

…………………………………………………………………………………………………………………………………………………

3. jQuery Form Wizard Plugin

The form wizard plugin is based on jQuery and can be used to simulate wizard like page flows for forms without having to navigate between different pages.

Try out a demo

…………………………………………………………………………………………………………………………………………………

4. Nyromodal

nyroModal is a highly customizable modal window plugin.

You’ll be able to customize either the look by CSS and the animation by creating your own, using the jQuery animation function.

Try out a demo

…………………………………………………………………………………………………………………………………………………

5. Agile Carousel

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Try out a demo

…………………………………………………………………………………………………………………………………………………

6. Round Corners

A jquery plugin to round the corners and/or create gradients for any HTML element with any browser

Try out a demo

…………………………………………………………………………………………………………………………………………………

7. Loading

Provides trivially easy way to notify users that a request is being loaded and processed in the background, so that they know their action was received and the page has not frozen.

Try out a demo

…………………………………………………………………………………………………………………………………………………

8. jQuery Datepicker

A highly customisable datepicker. This plugin forms the basis for the jQuery UI Datepicker. It is made available as a separate plugin since the UI team desired simplified functionality for their version.

Try out a demo

…………………………………………………………………………………………………………………………………………………

9. Curtains

A great idea for a jQuery plugin.  It animates the opening of some curtains with a good looking call to action.

Try out a demo

…………………………………………………………………………………………………………………………………………………

10. Simple Text Box Label Over

From time-to-time our sites have used labels that ‘float’ over their text input box.  To make things easier for ourselves, we’ve come up with a little jQuery plugin to do just that.

You can see a working example on this website;  the ‘Search our blog’ text box at the top right of the blog and the ‘Keep up to Date.’ sign-up box on the homepage both use this plugin.

…………………………………………………………………………………………………………………………………………………

11. QuickFlip 2

QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.

Try out a demo

…………………………………………………………………………………………………………………………………………………

12. Juitter

Juitter is a Twitter widget that shows you what’s happening on any given Twitter feed live!

Try out a demo

…………………………………………………………………………………………………………………………………………………

13. Create a Fancy Box

This tutorial will show you how to turn unordered list (UL) into an fancy social bookmarking sharing box. You will see how to style such box, how to add interactivity, and how to create jQuery plugin that will turn any UL into sharing box.

Try out a demo

…………………………………………………………………………………………………………………………………………………

14. Slick and Accessible Slideshow

You’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery).

Try out a demo

…………………………………………………………………………………………………………………………………………………

15. Zoom Tabs

Roll over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

Try out a demo