Archive for category JavaScript

30 AJAX Tutorials For Web Developers, Anyone!

Here are 30 AJAX Tutorials to hone your skills on… Ajax (shorthand for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.  The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages.  Data is usually retrieved using the XMLHttpRequest object.  Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous.

1. Ajax Username Availability Checker Using MooTools 1.2

There a many examples of egregious usages of Ajax out there but every once in a while you find a great usage of Ajax. One great usage is the username availability checker. Why make the user submit their form if you can just use Ajax to let them know if it’s available right away? Here’s how you can implement a username available checker using MooTools 1.2.

2. Ajax and XML: Ajax for tables

In this article, you will see several techniques—both with Ajax and without—that demonstrate this context change-free approach to user experience design.  Starts with the simplest example of Ajax user experience, the tabbed window.

3. Introducing the ASP.NET Ajax Frameworks

This article takes a brief look at the features of some of the more widely used ASP.NET Ajax frameworks.

4. How To: AJAXify WordPress Comment Posting

Shows you how to make comments on your WordPress blog step by step.

5. Ajax and XML: Ajax for chat

Learn to build a chat system into your Web application with Asynchronous JavaScript™ + XML (Ajax) and PHP. Your customers can talk to you and to each other about the content of the site without having to download or install any special instant-messaging software.

6. How To Create An Amazing jQuery Style Switcher

This tutorial will show you how to create a style switcher using jQuery and PHP.

7. Introduction to the Raphael JS Library

Introduction to some key design features, a look at animation, DOM, and eventually a cool widget tutorial for your site.

8. Creating a Dynamic Poll with jQuery and PHP

In this tutorial, you’ll make a poll using PHP and XHTML, then use some jQuery Ajax effects to eliminate the need to refresh the page.

9. RSS Ajax JavaScript ticker

This tutorial will show you how to combine RSS, Ajax, JavaScript to create a live ticker RSS.

10. Create a Dynamic Scrolling Content Box Using AJAX

Create a dynamic content box just like Google Reader or DZone.

11. Create a shoutbox using PHP and AJAX (with jQuery)

Learn how to build a momentum-based AJAX shoutbox with jQuery from scratch.

12. Building your first Ajax application with PHP

This tutorial throws you in at the level of building your first ever Ajax application in PHP. So for this one, you need a working knowledge of PHP and a good grasp of programming basics.

13. How To Build Quick and Simple AJAX Forms with JSON Responses

In this lesson you’ll go through steps to create an AJAX form, which will return a response JSON which is used to display the success / error messages. You’ll use Jquery Form Plugin to make the process quick and painless.

14. Vista-like Ajax Calendar version 2

Vista-like Ajax Calendar (vlaCalendar) version 2, unobtrusive web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools JavaScript framework, Ajax, XHTML, CSS and PHP.

15. Create an In-Place Editing System

Making users click through multiple pages just to edit a field is so 1999. In this tutorial, you’ll learn how to create an in-place editing system as found on popular sites, such as Flickr.

16. How to Code a Fun To-Do List With PHP and AJAX

Build a to-do list that will allow you, or your user, to create, update, and delete items asynchronously. To accomplish our task, we’ll be using PHP and jQuery’s AJAX capabilities.

17. AJAX Multiple File Upload Form Using jQuery

Create an AJAXified multiple file upload form that uses a lot lesser server side code and also provides a very nice user interface.

18. 8 Ajax Data Controls and Effects to Work with Tables

Neat way to create spreadsheet like tables for your web projects.

19. Ajax Forms with jQuery

Turn a regular form, into an AJAX Form!

20. Making an Ajax PHP Watermarker Script

In this article  you’ll learn how to make Ajax Watermarkers.

21. Use jQuery and ASP.NET AJAX to build a client side Repeater

Build a client-side repeater with .NET and AJAX.

22. Ajax for Java developers: Build dynamic Java applications

The page-reload cycle presents one of the biggest usability obstacles in Web application development and is a serious challenge for Java™ developers. In this series, author Philip McCarthy introduces a groundbreaking approach to creating dynamic Web application experiences. Ajax (Asynchronous JavaScript and XML) is a programming technique that lets you combine Java technologies, XML, and JavaScript for Java-based Web applications that break the page-reload paradigm.

23.Using the Prototype JavaScript library and script.aculo.us

If you’re developing Web applications these days, then you’re doing Ajax development. Ajax is no longer something unusual that you add to your applications in special cases. It has become an integral part of Web development. To some, enhancing applications with Ajax used to be a tricky proposition. Cross-browser limitations to deal with, writing a lot of complicated JavaScript, and learning about magic numeric codes within that JavaScript were just a few of the challenges facing Ajax developers. Thankfully, several open source JavaScript libraries are available now to make things much easier. In this first article in a three-part series, you will create an Ajax application for managing songs using the Prototype JavaScript library and script.aculo.us.

24.Ajax security tools

Certain vulnerabilities within Ajax applications can allow malicious hackers to reek havoc with your applications. Identity theft, unprotected access to sensitive information, browser crashes, defacement of Web applications, and Denial of Service attacks are just a few of the potential disasters Ajax applications can be prone to and which developers need to guard against when building Ajax capabilities into their applications. Regular developerWorks author Judith Myerson suggests some application-strengthening tools, including Firefox tools and add-ons, which you can use to improve or solve security problems within your Ajax applications.

25. PHP components: Autosuggest

Tutorial teaches you how to build a PHP component with auto-suggest feature.

26. Creating An Amazing jQuery Style Switcher with Ajax Techniques

This tutorial shows how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

27. Easy Ajax with jQuery

Build your first AJAX application with jQuery.

28. AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

A more indepth “search auto-completer”.  These are so cool you almost can’t pass them up.

29. Auto-populating Select Boxes using jQuery & AJAX

Allow your users to select a top level category from one select box and to automatically populate the sub-category.

30. Using Ajax to Validate Forms

Another form validation tutorial with AJAX.

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

jQuery Real Person

We search high-and-low for great scripts that really help web developers and website owners alike.  This is one of those scripts that just kicks-ass.  There are tons of methods to prevent contact us form and general form spam from getting into your database or in-box.  Some how,  some way, it always seems to creep it’s way back in.

If you are looking for a sure fire way to reduce inbound web form spam from getting through, check out jQuery Real Person.  This plugin enhances an input field to help reduce automated form submissions.

What does it do?

It forces a “real human” to decipher & identify text, comprised of dots.  The entered value is then compared to the value stored on the server with the generated value to determine whether processing of the form should continue, or be halted.

Example of jQuery Real Person Validation Request

Example of jQuery Real Person Validation Request

Options are abundant – too.

Customize your functionality through additional settings like:

  • Different character lengths
  • Include numbers with alpha-numeric characters
  • And the ever-so-cool, regenerate instructions
  • Server-side Implementations

Download jQuery Real Person (zip)

Tags: , , , , ,

10 Super jQuery and Ajax Scripts

10 Ajax & jQuery tutorials all web developers should have at the ready.  Permalink for quick reference.

In this post I have shared free jQuery and Ajax scripts to help our upcoming web developers. In this list includes – A Drop-Down Menu Plug-in for jQuery, Rotating jQuery Tabs, Sliding Login Panel with jQuery, AJAX Loading Panel, MySql Ajax Table Editor, jQuery YouTube play-list plug-in etc.

Nice & Clean Sliding Login Panel built with jQuery

Please note the Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)! However, most of the CMS such as Joomla, Drupal, WordPress, etc have a login system integrated in their platform. So if you are using one, read their documentation to see how you could implement this script into your CMS.

Nice & Clean Sliding Login Panel built with jQuery

Download | Demo

UPLOADIFY

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any back-end development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Uploadify is available under the GPL and MIT licenses. This allows Uploadify to be used in a number of applications and commercial products.

UPLOADIFY

Download | Demo

Mysql Ajax Table Editor

Mysql Ajax Table Editor is a php script that will allow you to create web pages to edit mysql tables in a matter of minutes. Similar to phpMyEdit but way better. Some of MATE’s features are advanced search, order by columns, edit multiple rows, language support and join other tables.

Mysql Ajax Table Editor

Download | Demo

jQuery YouTube play-list plugin

This nice plugin allows you to turn a list of YouTube links into a playlist. This would allow the you to manage your videos on YouTube and simply insert links to the videos on your site. With JavaScript enabled a nice playlist is created, whilst without JavaScript the user gets a regular list of links to YouTube pages.

jQuery youtube playlist plugin

Download | Demo

nmcDropDown: A Drop-Down Menu Plugin for jQuery

A quick jQuery plugin for creating drop-down menus. Very nice and easy to use.

nmcDropDown: A Drop-Down Menu Plugin for jQuery

Download | Demo

Datepicker and Calendar Eightysix

Calendar Eightysix is an unobtrusive developer friendly calendar and datepicker, offering a better user experience for date related functionalities. The successor of the popular Vista-like Ajax Calendar! Key features:

:: Quick navigation by jumping back and forth between months, years and decades without drop-down boxes
:: Highly and easily customizable
:: Packed with three themes
:: Lightweight (9.5 kB compressed)
:: Purely JavaScript; AJAX-less and no PHP needed

Datepicker and Calendar Eightysix

Download | Demo

Rotating jQuery Tabs

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.

By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.

Rotating jQuery Tabs

Download | Demo

jQuery Highlighter – Easy to use jQuery Plugin

Highlighter easy for customization. Keyboard enabled.

* Keyboard Navigation (arrowkeys + ESC)
* Highly Customizable
* Autoplay
* Todo Accessible
* Todo Cross Browser Compatibility

jQuery Highlighter - Easy to use jQuery Plugin

Download | Demo

Fancy Sliding Tab Menu

The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time an idle state listener is included to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.

The menu is developed in script.aculo.us and as mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu.

Fancy Sliding Tab Menu

Download | Demo

AJAX Loading Panel

Enhance your site’s look and feel during AJAX requests with the fully customizable state-of-the art Web 2.0 AJAX Loading Panel without writing a single line of code!

All you have to do is to follow a few easy steps, modify a couple of properties and add the show and hide methods to your XMLHttpRequest function.

AJAX Loading Panel

Download | Demo

Tags: , , ,