Toluu

Ajaxian

Cleaning up the web with Ajax

jQuery pageSlide: throwing content aroundYesterday

Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

PLAIN TEXT

HTML:

1.  
2. <script type="text/javascript">
3.     $(document).ready(function() {
4.         $('a.pageslide').pageSlide({
5.             width: "300px"
6.         });
7.     });
8. </script>

AddressChooser: address picker in real-timeJanuary 7

Sébastein Gruhier has released a new address component that integrated a map with the address that you are filling. The UX is interesting as when you first get typing it doesn’t really narrow down the address so you are seeing maps of bizarre places.

As well as a basic version, you can also tie in auto complete.

Features include:

• Javascript framework-agnostic. You can use it as is or with any great frameworks like Prototype, JQuery …
• Mapping system independent. The current implementation is based on Google Map using a Google Map proxy object.
• Interactive map display location while you arex typing an address.
• Center map on user location (based on its IP) if mapping system allows it.
• Fully customizable.
• Fully documented with pdoc.
• Works on Safari, Firefox, IE 6/7, Chrome and Opera.
• …

Detecting twitter users with JavaScript - handy or evil?January 7

Earlier this week I blogged about a proof of concept that you can detect if a user is logged in to twitter and display their data with a few lines of JavaScript. This could be used to show for example "tweet this" buttons in a blog application.

The trick is easy: use the user_timeline to get the correct data back and provide it with a callback:

PLAIN TEXT

JAVASCRIPT:

1. function hasTwitter(data){
2.   // gets the user's real name
3.   alert(data[0].user.name);
4.   // other data is .screen_name, .location and
5.   // data[0].text is the latest update
6. }

PLAIN TEXT

HTML:

1. <script type="text/javascript"
2. src="'http://twitter.com/statuses/user_timeline.json&count=1&callback=hasTwitter">

More Ajax Experience Videos: JSON and JavaScriptJanuary 6

Following-up from our previous posting, we've got some more Ajax Experience videos. This post's theme is JavaScript and JSON:

Advanced Animation & Physics in JavaScript with Paul Bakaus

Forget about Web standards and go way beyond the usual capabilities of Web scripting languages. Learn how to create stunning effects using canvas/svg/vml, how to control animated graphics in JavaScript, and how to merge all kinds of standards and technologies to create a whole new world of possibilities. Using Paul's latest project as an example, he shows you how to adapt the things he talks about into new projects, featuring his new JavaScript game engine. Paul demonstrates how to control animated graphics in the browser, how to scale and rotate elements smoothly, and how to combine canvas, svg and filters with CSS to adapt new standards in browsers that don't support them. See how to move physics from the real world to the Web browser. In this session you learn how to: Create a walking animated character; Replicate new standards using existing technologies; Combine new standards to create a new experience.

Adv JavaScript: Closures, Prototypes, Demystified with Stoyan Stefanov

The times when JavaScript was just a toy language for making image rollovers and other, more irritating effects, are fortunately long gone. Today developers build much more sophisticated and complex applications be they for the Web (GMail), the desktop

Who needs Flash? Having fun with Canvas and SVGJanuary 5

Over in SproutCore land, they have been talking about Peter Bergstrom and his amazing work with Canvas and SVG:

Peter Bergstrom has been doing some amazing work with SVG and canvas tags in his SproutCore-based these project called PaperCube.  PaperCube visualizes citations their relationships between authors.  Watching the videos of his project, you’d swear he was using Flash or Silverlight, but its not.  He’s using only native web technologies powered by SproutCore and JavaScript.  It’s a great example of what’s possible using the browser’s capabilities today.

Checkout PaperCube’s Node Graph (SVG),  Per Year View (SVG), and Paper Tree (pure HTML).

Starting to get goose pimples about 2009 :)