Archive for the ‘AJAX’ Category

13 Coolest Javascript Ajax Scrollers for Designers and Developers

jQuery_SerialScroll

Here I came up with 13 cool and elegant way of representing your portfolio when your pages have tons of content to display. You guys can showcase your precious work using variety of Javascript Ajax based scrollers. If you go through the code its simple and basic Javascript Ajax implementation, if you are a web-designer and web developer it’s easy to understand.

jQuery Scrollable Plugin

jQuery Scrollable Plugin

The purpose of this library is to make it extremely easy to add scrolling functionality to a website. Whenever you wish to scroll HTML elements in a visually-appealing manner, this is the only library you need. Main Scrollable Features, 1. Clicking on the elements themselves
2. Clicking on the arrows at the sides, or the small, round buttons at the top
3. Using the left and right arrow keys on your keyboard
4. Scrolling with your mouse scroll wheel.

Demo | Download

jQuery.SerialScroll

jQuery.SerialScroll

This plugin allows you to easily animate any series of elements, by sequentially scrolling them.You can use horizontal or vertical scroll, also combined.

DemoDownload

jQuery ScrollShow Plugin

jQuery.ScrollShow Plugin

jQuery.ScrollShow is a very customizable slideshow, that relies onjQuery.ScrollTo, to slide(scroll) the items.

DemoDownload

jQuery Local Scroll

jQuery.LocalScroll

This plugin will animate a regular anchor navigation. Each time a link is clicked, the element you decide(can be the whole screen), will gradually scroll to the targeted element, instead of “jumping” as it’d normally do. jQuery.ScrollTo is used for the animation.

DemoDownload

CNN Style Scrolling Ticker

CNN Style scrolling ticker

A new AJAX Control Toolkit control called the MarqueeControl that supports all of these features, both left-to-right and right-to-left scrolling directions, applying a CSS class to the item when it is moused over, dynamically repopulating the marquee after it has finished scrolling.

DemoDownload

liScroll jQuery News Ticker

liScroll (a jQuery News Ticker)

liScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker.

DemoDownload

jScroller jQuery Plugin

jScroller : jQuery Plugin

This Autoscroller is Crossbrowser compatible and also w3c compatible, because its don’t used marquee.

DemoDownload

Paging Through Records OnScroll Using Unobtrusive Spry

Unobtrusive Paging OnScroll

Revisiting recordset pagination using unobtrusive methods.

DemoDownload

Control Scroller

Control.Scroller

Control.Scroller is an extension to the Prototype and script.aculo.us JavaScript framework. It’s using the Control.Slider in script.aculo.us, and extends it, with the control of the clipping of a content-container. It can also control up and down-buttons (or left and right). It’s released with a Creative Commons Attributionlicense.

DemoDownload

JS SmoothScroll

JS SmoothScroll

Features : Simplest to implement, One of the smallest Javascript 1024 bytes, Cross-Browser compatible, Includes the source file too…

DemoDownload

FleXcroll- Flexible and Accessible Custom Scroll Bars

FleXcroll- Accessible Custom Scroll Bars

A Cross Browser and Standards Compliant Custom ScrollBar Script by Hesido.

DemoDownload

Javascript Scrolling

Javascript Scrolling

A very cool scroller with custom scroll bars implemented with javascript.

DemoDownload

Auto scrolling Page

Auto scrolling Page

Advertisements

40 Excellent Resources for JavaScript Coders

Are you an advanced JavaScript coder looking for more sites to sharpen your coding prowess? Maybe you’re a web designer wanting to double as a developer (or at least know enough to add a bit of rich content into your designs). Either way, if you’re looking for more information on the topic of JavaScript, the following resources are worth a gander.

Reference, Resources, & Tutorials

DevGuruDevGuru – JavaScript Quick Reference

DevGuru provides an extensive list of JavaScript syntax, alphabetized similar to a glossary for easy scanning and searching.

TechCheatSheets.com - Javascript Cheat SheetsTechCheatSheets.com – Javascript Cheat Sheets

A roundup of 10 JavaScript cheat sheets in one place; includes cheatsheets for frameworks such as jQuery and Prototype.

Google Groups - comp.lang.javascriptGoogle Groups – comp.lang.javascript

If you’re looking for a community of JavaScript’ers comp.lang.javascript is an active and helpful community of developers.

jQuery for DesignersjQuery for Designers

jQuery for Designers is geared towards designers who want to learn about the jQuery library to add more dynamic content in their designs.

Freetechbooks.com - Free Online JavaScript BooksFreetechbooks.com – Free Online JavaScript Books

In this collection, you’ll be able to download 5 excellent e-books on the topic of JavaScript, all for free.

DZoneDZone

Although not purely a JavaScript resource, DZone regularly features articles, tutorials, resources, and news about JavaScript.

W3Schools - JavaScript TutorialW3Schools – JavaScript Tutorial

W3School’s section on JavaScript offers beginning to advanced JavaScript topics.

15 Days Of jQuery15 Days Of jQuery

Straight off the home page, 15 Days of jQuery has “Fantastic tutorials and example code that takes you from zero to hero in no time flat“.

The "Mootorial"The “Mootorial”

//clientside’s tutorial on the mootools framework has a built-in console for you to try out JS code.

Premade Scripts/Code

AjaxDaddyAjaxDaddy

A collection of downloadable DHTML scripts. AjaxDaddy provides a demo for the featured scripts.

MiniAjax.comMiniAjax.com

Another site with a collection of DHTML and Ajax code, similar to AjaxDaddy.

JavaScript KitJavaScript Kit

Here, you’ll find downloadable scripts, as well as tutorials and guides on JavaScript.

Dynamic Drive JavaScript code libraryDynamic Drive JavaScript code library

DHTML scripts organized into 16 categories including CalendarsImage EffectsLinks & Tooltips, and more.

DHTMLgoodies.comDHTMLgoodies.com

Yet another place to get your fix of DHTML/Ajax scripts. They also have a fairly nice and straight-forward Ajax basics tutorial.

4umi useful Javascript4umi useful Javascript

A “database” of useful scripts and code snipplets that are updated fairly often.

Articles & Blog Posts

The Most Complete AJAX Framework and JavaScript Libraries List(124+)The Most Complete AJAX Framework and JavaScript Libraries List(124+)

The title pretty much says it all — it’s a huge list of JS frameworks/libraries.

The seven rules of unobtrusive JavaScriptThe seven rules of unobtrusive JavaScript

This excellent article outlines seven things to keep in mind when trying to develop unobtrusive JavaScript solutions.

How simple is making your javascript unobtrusive? Easy as PieHow simple is making your javascript unobtrusive? Easy as Pie.

A basic introductory article on “unobtrusive JavaScript.

The Top 40 Free Ajax & Javascript Code for Web DesignersThe Top 40 Free Ajax & Javascript Code for Web Designers

A list of scripts geared towards web designers (i.e. not a lot of manual coding involved).

How to choose a JavaScript frameworkHow to choose a JavaScript framework

Outlines a few considerations when deciding which JS framework is right for you.

Efficient JavaScriptEfficient JavaScript

An article on quick tips for optimizing your JavaScript code.

Ten Javascript Tools Everyone Should HaveTen Javascript Tools Everyone Should Have

A list of JS code snipplets recommended to have in your coding arsenal; among them are numeric sorting and working with cookies.

Serving JavaScript FastServing JavaScript Fast

Optimal tips for serving/loading your JavaScript libraries quickly.

The Great Browser JavaScript ShowdownThe Great Browser JavaScript Showdown

A comparison of the top 4 web browsers (IE7, Firefox 2, Safari 3.0.4, and Opera 9.5) when it comes to handling JS.

Quick guide to somewhat advanced JavaScriptQuick guide to somewhat advanced JavaScript

A guide on Object-Oriented JavaScript coding.

Blogs & News

John Resig - BlogJohn Resig – Blog

John Resig is the creator/lead developer of jQuery and author of “Pro Javascript Techniques“.

Ajaxian - JavaScriptAjaxian – JavaScript

Ajaxian is a news site about Ajax and Rich Internet Applications. Over 850 stories have been tagged under the JavaScript topic.

Snook.CA - JavaScript CategorySnook.CA – JavaScript Category

Snook.CA is Johnathan Snook’s site on the topic of web development. He writes about JavaScript, as well as other web dev topics.

AjaxlinesAjaxlines

Ajaxlines provides news and resources on the topic of Ajax. It currently has140+ posts tagged under JavaScript.

QuirksBlogQuirksBlog

QuirksBlog is part of JavaScript guru/web developer Peter-Paul Koch’sQuirksMode.org. His book ppk on JavaScript is an excellent book to own.

Ajaxonomy - BlogsAjaxonomy – Blogs

Ajaxonomy is a wonderful resource for JavaScript’ers interested in Ajax and other web technologies. It has many posts tagged with JavaScript.

Ajax Bestiary - A JavaScript Field GuideAjax Bestiary – A JavaScript Field Guide

Ajax Bestiary is a regularly updated blog on JavaScript.

Awesome Frameworks/Libraries

Prototype JavaScript frameworkPrototype JavaScript framework

Prototype was one of the first popular frameworks. Several libraries and frameworks are based on Prototype (or still require it).

jQueryjQuery

jQuery is lightweight, elegant, and touted as one of the easiest JS frameworks to use.

mootoolsmootools

My personal favorite.

The Yahoo! User Interface Library (YUI)The Yahoo! User Interface Library (YUI)

A big and extremely robust JavaScript toolkit by Yahoo!.

JavaScriptMVCJavaScriptMVC

JavaScriptMVC is a relatively new but very promising framework that offers a lot of unique components and features not found in other frameworks.

script.aculo.usscript.aculo.us

A robust effects library that’s been used by top websites such as Digg, Feedburner, and Apple; requires the inclusion of Prototype.

Ext JSExt JS

Another solid framework; it does have a restrictive license for commercial purposes. Check out the Web Desktop demo.

MochiKitMochiKit

MochiKit is a robust library that offers a lot of utility functions and effects classes.

DojoDojo

Dojo is another framework to consider. visit the Spotlight section on the website to see real companies using Dojo.

25 Excellent Ajax Techniques and Examples

Ajax allows for rich-internet applications that mimic the responsiveness and complex user interfaces typically associated with desktop applications. Moving applications to the web browser opens many possibilities, including the ability to save user data, connecting with other users for collaboration and sharing, and making deployment and using the application easier since web browsers are standard-issue with most computers regardless of operating system.

If you’re interested in expanding your understanding of Ajax techniques and practices, check out these 25 hand-picked Ajax articles and tutorials that outline various methods and concepts involved in the development of Ajax-based applications. Though most are geared for budding and intermediate developers, veterans might find a trick or two they haven’t encountered before.

1. Ajax RSS reader

Ajax RSS reader - Screenshot

Build a simple RSS reader that takes remote XML data from RSS feeds using Ajax, PHP, and MySQL. This example allows users to view feed content from multiple sources in one page. At the bottom of the article, you’ll find an animated demonstration of the RSS reader.

2. Ajax Desktop Tutorial

Ajax Desktop Tutorial - Screenshot

This tutorial is a step-by-step guide on how to create a desktop/homepage similar toPageflake and Netvibes. The goal of this tutorial is to showcase some common techiques involved in developing web-based applications like manipulating the Document Object Model (DOM), listening to events (i.e. certain mouse movements), and working with remote data.

3. Ajax for Chat

Learn to build a simple web-based chat client using asynchronous JavaScript, XML, and PHP. The tutorial’s example utilizes the Prototype JS framework, MySQL, and PHP.

4. Create your own information space with Ajax and del.icio.us

This article outlines the basic foundations of using Ajax alongside an API service. It uses the del.icio.us API, but the methods and concepts can be adapted to other popular services such as Digg’s or Flickr’s. It’s an essential resource for those contemplating on creating web applications that use remote XML data – a couple of live examples are popurls and SocialBlade, which obtains information from social media sites using available API services. This tutorial requires you to register (for free).

5. Ultra-lightweight Charts For AJAX

Ultra-lightweight Charts For AJAX - Screenshot

See how to create a super-lightweight (1.78 KB) charting component using Flash with Ajax. The example allows you to generate visual graphs using dynamically-loaded data. The solution involves ActionScript-JavaScript communication, and covers the use of the setData and setStyle ActionScript methods for generating and styling the charts.

6. Quick Calendar Using AJAX and PHP

Quick Calendar Using AJAX and PHP - Screenshot

Learn how to create a calendar component using Ajax and PHP. Ajax is used for navigating through the calendar months without refreshing the page.

7. How to integrate Google Calendar in your website using AJAX

How to integrate Google Calendar in your website using AJAX - Screenshot

This tutorial shows you how to create a web page component that calls a publicly available Google calendar. Google Calendar allows you to easily create, share, and manage events and is an excellent feature for community websites.

8. Edit In Place with AJAX Using jQuery

Edit In Place with AJAX Using jQuery - Screenshot

In this example, users are given the ability to edit the XHTML of the web page they’re currently viewing. The example is a proof-of-concept – presenting how this functionality can be achieved using jQuery. Normally, you’d want to send the user’s edits to server-side code to perform processes such as validation or saving the changes in a database.

9. Creating an AJAX Rating Widget

Creating an AJAX Rating Widget - Screenshot

Learn the concepts of creating a rating system without prompting the user to click a submit button or refreshing the page. The tutorial showcases how you can do this in a variety of ways by including examples for the following four JavaScript frameworks/libraries: Dojo, jQuery, mootools, and Prototype JS.

10. AJAX file upload tutorial

AJAX File Uploader - Screenshot

In this tutorial, you’re shown how to create a file uploader. The tutorial uses JavaScript and PHP.

11. Use AJAX and PHP to Build your Mailing List

This tutorial from SitePoint walks you through the development of a mailing list form that accepts submissions asynchronously. It uses MySQL for storing the data inputted by the user and Prototype JS for simplifying Ajax requests and binding event handlers.

12. Safer Contact Forms Without CAPTCHAs

Safer Contact Forms Without CAPTCHAs - Screenshot

One way to reduce spam from public web forms is to implement a system to verify if the submitter is human by using image CAPTCHAs. Problems arise with accessibility when individuals using visual assistive technologies are presented with the test (and thus cannot continue on). This simple technique uses an Ajax call to a server-side script to drop a cookie on the user’s computer.

13. Using AJAX with CAPTCHA

Using AJAX with CAPTCHA - Screenshot

Avoiding the use of image-based CAPTCHAs is a good idea. With that said, many sites still prefer using this technique to distinguish between humans and computers. If forgoing web accessibility is appropriate for your situation, this article outlines a unique method for administering CAPTCHA tests. The user is presented with a sequence of descriptions (i.e. Animal, Costume, Boy), and asked to click on a set of images in sequential order. The clicks are recorded and validated, returning the appropriate status message. Though probably not an ideal solution to CAPTCHAs, it does outline a fundamental technique for developing responsive user interfaces – use it for inspiration.

14. Ajax-based login form

Ajax-based login form demo - Screenshot

Create a basic login form that asynchronously validates the inputted data. The example uses the jQuery form plugin and PHP to process the request.

15. Nice Ajax effect for message box using Mootools

Nice Ajax Effects for messages - Screenshot

In this example, a message box that fades after a specified duration is displayed when the user clicks on the “save” button. This is a model for supplying users with the status of their request, and an real Ajax request should typically happen when the user clicks on the “save” button.

16. AutoCompleter Tutorial

AutoCompleter Tutorial - Screenshot

The AutoCompleter tutorial teaches you how auto completion of input fields can be accomplished. The example uses jQuery, PHP, and MySQL.

17. Auto-populating Select Boxes using jQuery & AJAX

Auto-populating Select Boxes using jQuery & AJAX - Screenshot

A key technique in Ajax applications is to populate content without a page refresh. In this tutorial, you’ll witness how this is done with a PHP and JavaScript (jQuery to make it easier).

18. Build an Ajax Dropdown Menu

Here’s a basic example of working with external data to load content into a drop-down menu – from our beloved Webmonkey. Though the example uses a text file, you can use your own data source when applying the technique to your own purposes.

19. Ajax/PHP Shoutbox Tutorial

Ajax Shoutbox - Screenshot

Make an Ajax-powered shoutbox using PHP and JavaScript. This tutorial walks you through the server-side and client-side requirements of creating a shoutbox, which can be adapted to other functions such as a commenting system.

20. Building Tabbed Content

Building Tabbed Content - Screenshot

Learn how to build a tabbed content component with the data populated via Ajax. The tutorial uses PHP and Prototype JS.

21. How to Load In and Animate Content with jQuery

Load In and Animate Content - Screenshot

This step-by-step tutorial shows you how to load data into a web page using jQuery to handle the Ajax request and manipulation of the DOM.

Best practices and workaround techniques to common issues

22. The Hows and Whys of Degradable Ajax

The Hows and Whys of Degradable Ajax - Screenshot

This article discusses the concept of creating Ajax-based applications that degrades effectively when JavaScript is not detected, providing increased accessibility and bulletproof-ness. Completely successful degradation means that an application is still usable and information is still accessible without reliance to JavaScript or CSS.

23. Avoid unnecessary Ajax traffic with session state

This article presents a method for minimizing unneeded database/computational processes and avoiding large status updates if no changes have occurred. By using client cookies to keep track of the session’s state, you can cut down on processes that may be redundant. Though the article presents an example using Python for server code – the model remains the same in virtually any language you use.

24. A Better Ajax Back Button Solution

Here’s a workaround to issues pertaining to Ajax-loaded content breaking web browser controls and bookmarking capabilities. The solution involves firing off a function at a set interval that checks the #value of the URL, and then presenting the correct content. It restores the ability to bookmark the content. In Part 2 of the article, you’ll see a working example and additional discussion of this method.

25. Making Ajax Work with Screen Readers

Making Ajax Work with Screen Readers - demonstration Screenshot

One of the biggest drawbacks of loading content via Ajax is that it fails to indicate an update of the content to users who are reliant on screen readers. For people who are not visually-impaired – messages and status indicators can be visual queues that the content is changing; this isn’t effective for users with visual impairments. This article draws out the underlying issues and proposes techniques to make Ajax-based applications work with screen readers.

There we have it… some brilliant Ajax techniques and examples. I hope you’ve found some links of interest that will help you in a future project or in advancing your command of Ajax.