Ajax Updates

Posted by education training on Friday, November 27, 2009

Ajax Updates

jQuery pageSlide Script

Posted: 27 Nov 2009 06:49 AM PST

As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user’s focus on the task at hand. There are many techniques to use — Lightbox, Carousel and Tabs to name a few — and today I hope to offer up another: jQuery pageSlide.

jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content 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.

  <script type="text/javascript">     $(document).ready(function() {         $('a.pageslide').pageSlide({             width: "300px"         });     }); </script>

1. The primary window is reserved for content; secondary interactions do not require additional space on the page — the area they need is created and removed on demand.
2. Because the user can see the original window, they have a greater likelihood of retaining focus, and can easily return to the previous task.


Demo: http://srobbin.com/demos/jquery-pageslide/secondary_page.htm
Download: git://github.com/srobbin/jquery-pageslide.git
Source: http://srobbin.com/blog/jquery-pageslide/

No related Listing.

LivePipe – High Quality Controls Widgets for Prototype

Posted: 27 Nov 2009 06:11 AM PST

LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. MIT licensed and actively maintained.

Event Oriented Programming

introduces a mechanism to create and observe events on any object, not just DOM Elements. This is used by all controls, and allows for fine grained control of your user interface. Making use of this is as easy as:

    1. var w = new Control.Window();    2. w.observe('afterOpen',function(){    3.     //insert your custom logic here    4. });



Demo: http://livepipe.net/
Download: http://download.github.com/syntacticx-livepipe-ui-1ab37f0.tar.gz
Source: http://livepipe.net/

Related Listings:

  1. Control ProgressBar Script Control.ProgressBar is a percentage based progress bar that can be...
  2. Control.Tabs Script Control.Tabs attaches creates a tabbed interface from an unordered list...
  3. Control.Rating using Prototype Control.Rating attaches to any div, span or table cell on...

Wilq32.RotateImage Script

Posted: 27 Nov 2009 05:59 AM PST

This is an final product of a Wilq32.PhotoEffect Snippet. Actually you can use this simple and tiny script to get effect of rotated images directly from client side (for ex. user generated content), and animate them using own functions.

Notices:

Include script after including main jQuery. Whole plugin uses jQuery namespace and should be compatible with older version (unchecked). To use it in IE you need those two lines to be added after < body > tag:

 <!-- Include the VML behavior --> <style>v\:image { behavior:url(#default#VML); display:inline-block }</style> <!-- Declare the VML namespace --> <xml :namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />

If someone know working workaround for doing this only in javascript please let me know. Right now i tried using createStyleSheets but IE doesnt recognise “v\: *”. Adding namespace with document.namespace.add is also messy. If someone know this problem and a solution just please let me know.

Usage:

jQuery(imgElement).rotate(angleValue)

jQuery(imgElement).rotate(parameters)

jQuery(imgElement).rotateAnimation(parameters)

jQuery(imgElement).rotateAnimation(parameters)

Returns:

jQueryRotateElement – !!! NOTICE !!! function return rotateElement instance to help connect events with actually created ‘rotation’ element.

Parameters:

({angle:angleValue,

[animateAngle:animateAngleValue],

[maxAngle:maxAngleValue],

[minAngle:minAngleValue],

[callback:callbackFunction],

[bind:[{event: function},{event:function} ] })

jQuery(imgElement).rotateAnimation

Where:

- angleValue – clockwise rotation given in degrees,

- [animateAngleValue] – optional parameter, animate rotating into this value,

- [maxAngleValue] – optional parameter, maximum angle possible for animation,

- [minAngleValue] – optional parameter, minimum angle possible for animation,

- [callbackFunction] – optional function to run after animation complete,

- [bind: [ {event: function}...] -optional parameter, list of events binded to newly created rotateable object


Demo: http://wilq32.googlepages.com/wilq32.rollimage222
Download: http://wilq32.googlepages.com/jQueryRotate.js
Source: http://wilq32.googlepages.com/wilq32.rollimage222

Related Listings:

  1. mRotate Pictures Script mRotate.js is a plugin for mootools.js framework. It is an...
  2. Photo Effects using jQuery Plugin This is a class inspired by http://www.netzgesta.de/cvi/ and their great...

JPolite – Ajax Lightweight Portal Framework

Posted: 27 Nov 2009 05:17 AM PST

JPolite is a Lightweight Portal Framework based on jQuery – (Ajax Modules)

JPolite is a pure front-end portal framework based on jQuery & BlueTrip CSS, with a handful of jQuery plugins integrated.
It provides a compact yet powerful foundation for custom AJAX web applications with Netvibes-like user experiences.

Features:

* Content Integration – Lots stuff gets aggregated fast and easy.
* Sound User Experiences – Slick UI, responsive interaction …
* Basic Module Themes – Colors can be assigned to modules.
* Content Integrator – Basic HTML skills and a little knowledge about JSON shall be enough to accomplish basic content integration tasks fast.
* Interface Dresser – Advanced CSS knowledge and skills shall be mandatory to customize and improve the look and feel of this framework, i.e., the modules and the overall layout
* Framework Extender – [jQuery] knowledge and JavaScript skills are required to further extend and customize this framework to address your advanced requirements.
Please share some of my design philosophy:

* Less is more – instead of building a full-blown framework with tons of features, only minimum necessary ones are provided for easier jump start.
* Separation of Content, Appearance and Behavior – No action and styling code is used in HTML. By following simple conventions, a plain HTML section can be automatically turned into a vivid control, e.g., Tabs, Accordion …
* Convention over configuration – By following simple naming conventions, new content can be loaded without complex and error-prone configuration or settings.
* It is easier to make simple things better than making better things simple – Yes, lots “traditional” portal features are omitted – purposely. But enhancements as well as customization can be applied at ease.

The target of this framework is to provide a handy tool for easy content integration. Yet I believe it is powerful enough to serve as cornerstone for more advanced portals.



Demo: http://www.trilancer.com/jpolite
Download: http://jpolite.googlecode.com/files/jpolite-2009-0224.zip
Source: http://www.trilancer.com/jpolite

Related Listings:

  1. Lightweight Portal Framework using jQuery Netvibes enables individuals to assemble their favorite widgets on the...
  2. 10 Interesting Lightweight jQuery Plugins In this post I want to suggest you ten interesting...
  3. iGoogle-like Drag & Drop Portal v2.0 A cool drag & drop class in Prototype in combination...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.