ineedtutorials.com

This tutorial will show you how to make a very simple feature which will help your users make more secure passwords, in registration forms. After the user types their password, this script will make a request to a PHP page, which will check the password for lowercase letters, uppercase letters, numbers and symbols. Without reloading the page, a bar displaying the strength of the password will be shown to the user.
Read more…

To make a map as engaging as possible, there needs to be smooth animations and crisp graphics.  Traditionally such a map would require the use of Flash. Joel Sutherland tried to avoid Flash whenever possible, so he began to consider how the map could be accomplished in jQuery.

There were a number of advantages of using jQuery over Flash:

1. Updates were Easy: Since the map was going to be a visual representation of html, it would be easy to update the data with a CMS.
2. Content was Search Engine Friendly: Since all of the data was represented in html, it would be easy for search engines to index and spider the content.
3. Architecture would be naturally layered: All of the data would be stored in a database by the CMS.   jQuery and CSS would then take the html content and display it appropriately. 

His biggest concern using jQuery was performance.  An important requirement of the map was that the map should zoom when switching between areas.  In Flash this would not be a problem, since transformations like these would be executed at a very low level on computer hardware.  This is not the case with jQuery, instead the DOM would need to be manipulated and then displayed. Fortunately this turned out not to be a problem in the end.

Link: Building an interactive map with jQuery instead of Flash

This tutorial covers the essentials of separating your design from your content and adding an editor to allow the site owner to make edits from any location. This tutorial is geared towards PHP sites, but the techniques involved can be translated to ASP, Perl-CGI and other languages.

Read more…

One of the innovations of the web is online shopping. It allows us to buy things without ever leaving the comfort of our homes. However, the most basic element of online shopping, the shopping cart, has not evolved much. In this tutorial, we’re going to make an AJAX powered shopping cart using PHP, jQuery, and a few nifty plugins.

build-an-ajax-powered-shopping-cart

The goal of this tutorial is to show you how to build an AJAX powered shopping cart. Nettuts focuses on the AJAX parts.

Read more…

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML or JavaScript Array and your chart is ready!

js chart

JS Charts lets you create charts in different templates like bar charts, pie charts or simple line graphs.

Read more…

Take a look at the following 20 Excellent AJAX Effects You Should Know, you might learn something from it.

There are a few special techniques or effects that can spice up just about any web page. These are the top 20 Ajax effects that every web developer should know. They’re essential parts of any web developer’s toolbox. If you haven’t seen them yet, you no doubt will in your future web development endeavors.

The 20 effects are:

1. TextboxList meets Autocompletion
2. Ajax IM
3. LiveValidation
4. Inline Editing
5. Ajax Upload
6. Fancy Upload
7. ClickHeat Clicks Heatmap
8. Ajax Mail Form
9. Ajax Directory Manager
10. Ajax Email Client
11. Improve Form Usability with Auto Messages
12. qGallery
13. Ajax Star Rating
14. CakePHP Ajax Form
15. Amberjack Site Tours
16. Prototype UI
17. JCrop
18. jQuery Auto-tabbing Plugin
19. Sort Table Rows with Ajax
20. DrasticMap

Link: 20 Excellent AJAX Effects You Should Know

Coda is a new web development tool for the Mac – and it’s popular amongst designers and developers. Now, we can have a fancy popup bubble tooltips with jQuery. Remy Sharp from jQueryforDesigners has showed us how to re-create their popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect.

Code style bubble

To create the puff popup bubble effect, we need the following:

1. Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS.
2. The hidden popup, correctly styled for when we make it appear.
3. jQuery to animate the puff effect on mouseover and mouseout.

This effect could be perfected by changing the initial reset (popup.css()) code to read from the trigger element and approximate it’s position. In my example, I’ve hardcoded it because I only have one on the page – but you may want to use this effect several times across your page.

Link: http://jqueryfordesigners.com/coda-popup-bubbles/

jQuery is awesome. Jon Hobbs-Smith has been using it for about a year now The longer he uses it, the more he finds out about it’s inner workings.

He thought some others out there could benefit from all the little tips, tricks and techniques he has learned over the past year. Take a look at the following 25 excellent tips of jQuery, you might learn something from it.

The 25 topics are:

• Load the framework from Google Code
• Use a cheat sheet
• Combine all your scripts and minify them
• Use Firebug’s excellent console logging facilities
• Keep selection operations to a minimum by caching
• Keep DOM manipulation to a minimum
• Wrap everything in a single element when doing any kind of DOM insertion
• Use IDs instead of classes wherever possible
• Give your selectors a context
• Use chaining properly
• Learn to use animate properly
• Learn about event delegation
• Use classes to store state
• Even better, use jQuery’s internal data() method to store state
• Write your own selectors
• Streamline your HTML and modify it once the page has loaded
• Lazy load content for speed and SEO benefits
• Use jQuery’s utility functions
• Use noconflict to rename the jquery object when using other frameworks
• How to tell when images have loaded
• Always use the latest version
• How to check if an element exists
• Add a JS class to your HTML attribute
• Return ‘false’ to prevent default behaviour
• Shorthand for the ready event

Link: Improve your jQuery – 25 excellent tips

Accessible News Slider is a JavaScript plugin built for the jQuery library. The plugin does not use color as a primary indicator of a change in state for the slider. Instead, the “back” and “next” navigation is either visible or hidden. There is also an indicator that communicates the total number of news items.

Accessible News Slider

The JavaScript is only 2 KB packed. The CSS, XHTML and JavaScript were developed specifically to meet the WCAG 1.0, and this will always be the number one priority of the plugin. The ZIP download contains all of the necessary files, including a packed version of jQuery v.1.2.6.

If the user chooses to resize the text via the browser file menu, the slider will flex vertically to accommodate the larger text, and still function. Although the core functionality of the news slider is partially accessible with a keyboard, the “View All” link was added as a catch-all mechanism. Hitting the “Enter” key while focused on the hidden “Skip to News” anchor will mimic the same behavior, since it is assumed the user is tabbing through content.

Link: Accessible News Slider