Ajax Updates

Posted by education training on Monday, December 7, 2009

Ajax Updates

Autocomplete Widget

Posted: 07 Dec 2009 11:41 AM PST

The tool is designed to bring good feelings for both end users and web developers. Why don’t you check the features below and prepare to get started now, it only takes 10 minutes. The whole thing is designed to be easy, you don’t even have to think.

Version 1.7 is released on October 2009 which works with:

* Internet Explorer 6 7 8
* Safari
* Firefox 2, 3
Features
* Big list view

The scrollable list view can hold up to 100 lines, although usually you just need 25.
* Pagination
You can paginate data within the list to represent all your datas.
* Double buffering
The well-known technology graphics programming is used in JavaScript for smooth render .
* Small file size
This standalone tool only has 10KB with GZip.
* Typing sequence detection
The tool send request if a typing is finished, which saves your precious server-side resources.
* Autosizing
The list view determine its properties by itself.
* URL function
Use your own function that returns URL to pass extra parameters, or change address at runtime.


Demo: http://createwebapp.com/demo.php
Download: http://createwebapp.com/latest.zip
Source: http://createwebapp.com/

Related Listings:

  1. YUI – Dialog Alert Widget This widget is designed to be a dropin replacement for...
  2. jQuery Plugin: Tokenizing Autocomplete Text Entry This is a jQuery plugin to allow users to select...
  3. ThickBox 2.1.1 A Webpage UI Dialog Widget Features: * ThickBox was built using the super lightweight jQuery...

Jquery Bookmarks Script

Posted: 07 Dec 2009 11:27 AM PST

A jQuery plugin that sets a div to allow sharing of your page on various bookmarking sites. If you find this plugin useful please vote for it on the jQuery site: (6 votes).

The current version is 1.2.0 and is available under the GPL and MIT licences. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations.

Default Settings

The bookmark sharing functionality can easily be added to a div or span with appropriate default settings. The resulting links allow the user to easily post your current page to any number of bookmarking sites.
You can also remove the bookmarking widget if it is no longer required.

Usage

1. Include the jQuery library in the head section of your page. 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Download and include the jQuery Bookmark CSS and JavaScript in the head section of your page. 

  <style type="text/css">@import "jquery.bookmark.css";</style> <script type="text/javascript" src="jquery.bookmark.js"></script>

# Alternately, you can use the packed version jquery.bookmark.pack.js (14.5K vs 22.9K), or the minified version jquery.bookmark.min.js (16.1K, 5.2K when zipped).
# Connect the bookmarking functionality to your divs.

$(selector).bookmark();

You can include custom settings as part of this process. 

$(selector).bookmark({sites: ['delicious', 'digg']});



Demo: http://www.ajaxcase.com/demo/Jquery-Bookmark
Download: http://keith-wood.name/zip/jquery.bookmark.package-1.2.0.zip
Source: http://keith-wood.name/bookmark.html

Related Listings:

  1. Jquery Bookmark Script The bookmark sharing functionality can easily be added to a...
  2. jQuery Scalable Vector Graphics SVG (Scalable Vector Graphics) is a “modularized language for describing...
  3. mooSocialize – Bookmarks Widget Based on ajax, this small widget allows to integrate many...

Animated Hover using Jquery

Posted: 07 Dec 2009 11:13 AM PST

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions. See Documentation for usage and examples.

Requirements

Animated Hover depends on jQuery 1.2 or greater, and the Dimensions plugin.

In order to effectively use Animated Hover, the following CSS rules should be applied:

* The parent of the hovered items must have a position (relative or absolute).
* The hovered items should have an explicit z-index. This means they must also have a position (relative or absolute).
* The dynamically created hover element should have a z-index less than the hovered items’ z-index.

Usage

The simplest possible usage is below. This will dynamically create a hover element (which is then styled) whenever the mouse hovers over a list item: 

  $('ul li').ahover();

The CSS might look something like this: 

 /* The hovered items' parent */ ul { position: relative; }  /* The hovered items */ ul li {     position: relative;     z-index: 100; }  /* The hover element, dynamically created */ div.ahover {     position: absolute;     z-index: 99;     background: #cef; }

ahover supports the following options:

* className: The class to give the dynamically created hover element (default: ahover)
* toggleSpeed: The number of milliseconds it takes to perform the “enter” and “leave” animations (default: 75)
* toggleEffect: Either an object of CSS properties to apply for the “enter” and “leave” animations, or an ahover effect name. The following effects are supported:
o width: The hover element’s width will slide to fill the space
o height: The hover element’s height will slide to fill the space (like slideDown)
o both (the default): The hover element’s width and height will both slide to fill the space
* moveSpeed: The number of milliseconds it takes to smoothly slide between hovered elements (defaut: 250)
* hoverEffect: A callable to enqueue when the hover element appears. Used, for example, to add a pulsating animation (default: null)
* easing: The easing to use for all animations (default: swing)

For example, the following will make a looping pulsate effect that slides quickly between items: 

 $('ul li').ahover({moveSpeed: 100, hoverEffect: function() {         $(this)             .animate({opacity: 0.5}, 750)             .animate({opacity: 1.0}, 750)             .dequeue();         $(this).queue(arguments.callee);     }});



Demo: http://media.brianbeck.com/shared/javascript/jquery-ahover/demo/demo.html
Download: http://jquery-ahover.googlecode.com/files/jquery.ahover.js
Source: http://code.google.com/p/jquery-ahover/wiki/Documentation

Related Listings:

  1. Jquery Animated Hover Animated Hover is a plugin for jQuery to create animated...
  2. Kwicks for jQuery – Horizontal Animated Menu Menu of a web page is the most important and...
  3. Animated Innerfade Images This plugin for jQuery is an extension to the work...

C3DL Canvas 3D Javascript Library

Posted: 07 Dec 2009 10:42 AM PST

The Canvas 3D JS Library (C3DL) is a javascript library that will make it easier to write 3D applications using canvas 3d. It will provide a set of math, scene, and 3d object classes to make the canvas more accessible for developers that want to develop 3D content in browser but do not want to have to deal in depth with the 3D math needed to make it work. If you are viewing this page with a canvas 3d (ver. 0.4.3 or higher) enabled browser (Firefox 3.5 or higher), the scene below will be moving. Clicking on any of the logo plates will open a new window to that site. The plate that was clicked will also be rendered with a sepia effect. The scene below as uses canvas 3d version 1.1.

Installing Canvas 3D Addon
The first step for building applications using our library is to get the appropriate browser and download the canvas 3d add-on for it. Currently there may still be issues with different hardware/software platforms combinations. The tutorial was tested on both a Macbook Pro with an nvidea 8600 video card and a PC with an ati xtx1900 video card.
Downloading and Installing
The current canvas 3d add-on (Version 0.4.3, released May 29th 2009) will work with Firefox 3.5 and is available from addons.mozilla.org. The add-on is considered experimental so you will need to log in, or click the check box labeled 'Let me install this experimental add-on' to get it. The add-on may also work with older versions of Firefox 3.5 beta 4 pre-release. Once you have an appropriate browser, the add-on can be installed in the same manner as any other add-on. In the current version of the add-on, the user can enable canvas 3d for each site as they deem fit much like allowing pop-up windows from different sites, or (as with older versions of canvas 3d) the add-on may be enabled for all sites via a checkbox in the canvas 3d options. Below is a screenshot of the banner that appears when you visit a site containing a canvas 3d element for the first time. Click the "Allow" button and it will add the site to the list of allowed sites for the addon. allowBannerNote that if you are using Firefox in a private browsing session, clicking allow will still not enable the site to show 3D content, you will have to temporarily exit the private browsing session, then click the 'Allow' button (after which the site will remain in the allowed list and you can re-enter private browsing) or enable Canvas 3D for all sites (in the preferences for Canvas 3D).
Testing
To test to see if it is working visit: http://people.mozilla.org/~vladimir/canvas3d/examples/modelview/ModelView.html (will show a teapot in a canvas that you can spin around)
Problems and solutions
The current add-on download does seem to install properly with the Firefox 3.5 . In the past there were problems with installing the add-on due to versioning issues. If there is a complaint about compatibility, you can modify the version compatibility in the install.rtf file. It is also possible that the video card is unable to support the gl function calls needed. The open gl extension viewer can help you determine if your video card can support the function calls needed for the extension to work. Install and run this viewer to test the open gl support for your video card. To support moz-gles20 context, your video card will have to pass the tests of core features up to and including those for 2.1. If your video card does not pass all the tests, try updating the video card drivers.


Demo: http://www.c3dl.org/index.php/demos/3d-google-maps/
Download: http://www.c3dl.org/wp-content/1.1Release/J3DXplorer.zip
Source: http://www.c3dl.org/

Related Listings:

  1. Projective Texturing with Canvas The Canvas tag’s popularity is slowly increasing around the web....
  2. AJS – Javascript Library AJS is a ultra lightweight JavaScript library that is around...
  3. Ext Core – Cross-Browser Javascript Library Ext Core is a lightweight and feature rich core JavaScript...

jsTree – Jquery Tree Browser

Posted: 07 Dec 2009 10:29 AM PST

jsTree is a javascript based, cross browser tree component. It is packaged as a jQuery plugin.
jsTree is absolutely free (licensed same as jQuery – under both GPL and MIT – whichever suits your needs).

Features at a glance:

* Various data sources – HTML, JSON, XML
* Supports AJAX loading
* Drag & drop support
* Highly configurable
* Theme support + included themes
* Numerous callbacks to attach to
* Optional keyboard navigation
* Maintain the same tree in many languages
* Inline editing
* Open/close optional animation
* Define node types and fine tune them
* Configurable multitree drag & drop
* Optional multiple select
* Search function
* Supports plugins & datastores
* Optional state saving using cookies

Currently supported browsers are:

* Internet Explorer 6+
* Mozilla Firefox 2+
* Safari 3+
* Opera 9+
* Google Chrome

As of version 0.9.9 there will be some minor visual defects in IE 6, but jsTree will still be functional. I am aware of the glitches but will not fix them – the world (and jsTree) will be prettier with IE6 out of the picture.

Documentation:
First of all, as jsTree is a jQuery component, you need to include jQuery itself. Currently jsTree uses version 1.3.2 (the latest as of 14.Sept.2009)

 <script type="text/javascript" src="source/lib/jquery.js"></script>  Then you need to include jsTree:  <script type="text/javascript" src="source/jquery.tree.js"></script>  Or you could use the minified version:  <script type="text/javascript" src="source/jquery.tree.min.js"></script>

You may change the path to whatever you like, but it is recommended not to rename jquery.tree.js or jquery.tree.min.js as the filenames are used in path autodetection. If you decide to rename them make sure you set the theme_path config option, so that jsTree succesfully includes your chosen theme (you also MUST set this option if you decide to move the folder of your chosen theme out of jstree-location/themes/).

Additionally you may decide to include some of the plugins from the plugins/ folder. If you do that the first time you open a page the plugin you loaded will alert you about missing dependancies – they can all be found lib/ folder.


Demo: http://www.jstree.com/demo
Download: http://jstree.googlecode.com/files/jsTree.v.0.9.9a.zip
Source: http://www.jstree.com/

Related Listings:

  1. Flexible MooTools Tree Control: Mif.Tree Mif.Tree is a quality solution for creating tree menus with...
  2. Drag Drop Tree – EXTJs This script shows basic drag and drop node moving in...
  3. jQuery File Tree Overview jQuery File Tree is a configurable, AJAX file browser...

0 comments:

Post a Comment

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