Ajax Updates

Posted by education training on Sunday, November 8, 2009

Ajax Updates

jQuery Cycle Plugin

Posted: 08 Nov 2009 01:57 PM PST

Overview
The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin.

How it Works
The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a “slide”. Options control how and when the slides are transitioned.


Demo: http://www.malsup.com/jquery/cycle/
Download: http://www.malsup.com/jquery/cycle/
Source: http://www.miniajax.com/

Related Listings:

  1. JQuery Cycle Rotating Images Plugin The jQuery Cycle Plugin is a lightweight slideshow plugin. Its...
  2. 10 Interesting Lightweight jQuery Plugins In this post I want to suggest you ten interesting...
  3. Metadata : jQuery Plugin This plugin is capable of extracting metadata from classes, random...

iPhone Style Checkboxes

Posted: 08 Nov 2009 01:51 PM PST

Progressively enhance your forms by turning boring old checkboxes into stylish iPhone-style toggle switches.


Turn your checkboxes into iPhone-style binary switches



Demo: http://tdreyno.github.com/iphone-style-checkboxes/
Download: http://github.com/tdreyno/iphone-style-checkboxes/zipball/master
Source: http://www.miniajax.com/

Related Listings:

  1. iPhone Toggle Switches for Prototype Framework Way back in June, Thomas Reynolds released iPhone-style-checkboxes for...
  2. iPhone Checkboxes Using MooTools One of the sweet user interface enhancements provided by Apple's...
  3. Blueprint – A css framework Blueprint is a CSS framework, which aims to cut down...

Flickr Like Edit in Place

Posted: 08 Nov 2009 10:48 AM PST

How to edit in place using AJAX?

If you are not familiar with how flickr handles editing data, here's a short summary.

* Show user the data field normally (for instance: the title of a picture)

* When mouse rolls over that title, make the background of the word yellow

* If the user clicks on the word, change that word to a input box with the word in it. Also show a "save" and "cancel" button

* A user can rename the picture and then push "save."

* Run a little script that updates the name into the database

* Remove the input box and the buttons and return to the original title display (updated with new title).
It shows how to write a little code to emulate flickr edit style effect almost perfectly.
The script is not using any third party libraries. There is a lot of html code involved, i don't recommend it
if you intend to use a 'plugin' like edit in place script. On top of that, php and html is mixed together meaning more difficult to customize the script.


Download:http://www.ajaxlady.com/wp-content/uploads/2008/09/flickr-edit-in-place-ajaxphp.txt
Source:http://www.ajaxlady.com/text-processing-ajax-scripts/12-flickr-like-edit-in-place-ajax-script.html

Related Listings:

  1. Flickr-Like Edit Fields Using AJAX & CSS If you are not familiar with how flickr handles editing...
  2. Ajax Instant Inline Text Edit Ajax Instant Edit Text User can edit the inline text...
  3. Dynamic Flickr Script A work colleague who runs Tobago Retreats asked me to...

Ajax Instant Inline Text Edit

Posted: 08 Nov 2009 10:41 AM PST

Ajax Instant Edit Text

User can edit the inline text without using the submit button.

This javascript code works with all SPAN tags, It adds an onclick function if class="editText" and a id=, is true. That onclick function will create a textfield or input which depends on the size of the editable text.
Through this code user has the ability to edit the text field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and 'sends' the content + fieldname + any set vars to an update file. That file will update your database, and reply with the newly set text and the textfield will dissapear again.

This is a very simple script which only works with span tags. Text from the span html tag is sent to update.php which process the request.
Plain html is returned from the server and this result populates the span.
Follow these steps to integrate the file:

# Download javascript source code instantedit
# Add the javascript code in your page:
# Set fixed variables (vars) (like hidden elements in a field post). These will be posted with the editable field so you can identify a user/session.

 script type="text/javascript"> setVarsForm("pageID=profileEdit&userID=11″);

# Finally: in your HTML for any editable field add a SPAN arround it:

 <span id="userName" class="editText">John Doe</span>


Download: http://www.ajaxlady.com/wp-content/uploads/2008/09/instantedit.js
Source: http://www.ajaxlady.com/wp-content/uploads/2008/09/instantedit.js

Related Listings:

  1. Ajax Script – Easy AJAX inline text edit 2.0 Easy Ajax inline Text Edit script, whatever you call it...
  2. Ajax Inline Quick Edit in Place Ajax Inline Edit in Place Script is a fast forward...
  3. Flickr Like Edit in Place How to edit in place using AJAX? If you are...

Dojo Fisheye Widget

Posted: 08 Nov 2009 10:36 AM PST

Dojo Fisheye Widget

Quantcast

A fisheye effect based on Dojo library.

You need to learn few things about djConfig parameters to setup the fisheye.

To setup this demo on your website, you need the 'src' directory from dojotoolkit.org
Also this effect seems to load pretty slow on some computers.



Demo: http://dojotoolkit.org/demos/fisheye-demo
Download: http://dojotoolkit.org/demos/fisheye-demo

Related Listings:

  1. Collapsible-Drag-Drop Javascript Panels This script will give you a good idea of what...
  2. Scrollable Elements usign jQuery Plugin You can study the workings of Scrollable in the following...
  3. Mobile Tooltip Widget I am making an Ajax application using GWT and I...

0 comments:

Post a Comment

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