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…
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…
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:
- TextboxList meets Autocompletion
- Ajax IM
- LiveValidation
- Inline Editing
- Ajax Upload
- Fancy Upload
- ClickHeat Clicks Heatmap
- Ajax Mail Form
- Ajax Directory Manager
- Ajax Email Client
- Improve Form Usability with Auto Messages
- qGallery
- Ajax Star Rating
- CakePHP Ajax Form
- Amberjack Site Tours
- Prototype UI
- JCrop
- jQuery Auto-tabbing Plugin
- Sort Table Rows with Ajax
- DrasticMap
Link: 20 Excellent AJAX Effects You Should Know
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
Some major JavaScript libraries that developers use: jQuery, Prototype, Scriptaculous, mootools, Dojo. These frameworks have thriving communities whose members have developed countless plug-ins that can greatly add to the JavaScript framework.
Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience. The key is a) adding the right amount of JavaScript, and b) using the right JavaScript techniques
However, sometimes we need JavaScript solutions that are a little more involved or specific. Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting.
Read more…