Ajax Updates

Posted by education training on Monday, November 30, 2009

Ajax Updates

MooRTE – Rich Text Editor Control using MooTools

Posted: 30 Nov 2009 12:04 PM PST

MooRTE is a rich text editor control using MooTools JavaScript framework. The script is light-weight, customizable and contains a lot of options for its skinning.
Plugin Features
* Tiny – Under 16KB compressed & gzipped, under 500 lines.
* Customisable – Each instance can have its own layout and buttons.
* Multiple Toolbars – One bar for all, or all for one…
* Floating, fixed or inline – Should the editor be in the page flow, or above it?
* Skinnable – comes with a few ugly themes, add your own.
* Flexible – easily extended to include any button or element you can dream of.
* No i-frames – Smaller, cleaner, trendsetting.
* Inline editor – Natively handles true inline editing
* Modular – In true Moo fashion, get your custom build, and shed the extra 2KB

Browser Compatibility
Tested in:
* MS Internet Explorer 6, 7, 8
* Mozilla Firefox 2, 3
* Opera 9, 10
* Google Chrome
* Apple Safari


Demo: http://siteroller.net/projects/moorte/
Download: http://siteroller.net/projects/moorte/download.php
Source: http://siteroller.net/projects/moorte/

Related Listings:

  1. Cross-Browser Rich Text Editor (RTE) The Cross-Browser Rich Text Editor (RTE) is based on the...
  2. InPlace Rich Text Editor Script Using the great libraries Prototype 1.6, Script.Aculo.Us 1.8 and TinyMCE...
  3. Ajax Script – Free Rich Text Editor Free Rich Text Editor is same like a WYSIWYG editor...

jClip jQuery plugin for image and content clipping

Posted: 30 Nov 2009 11:54 AM PST

jClip is a simple jQuery plugin which allows image and content clipping. This is useful for when an image (or content area) is larger than the container where it resides. You are able to specify the dimensions of an absolutely positioned element which you want to be visible. The element is then clipped into the rectangular shape and displayed.

The function of jClip is similar to css "clip:rect" style but jClip provides a fully cross-browser implementation of this method with ability for you to animate the clipped content using standard jQuery animate functions.
Features

1. Light-weight script
2. Easy to integrate
3. Works with all modern browsers

How to Use

1.) Download jClip script. The package already contains jQuery framework.
2.) Add the following code to your < head >…< /head > tag to connect jQuery framework and jClip plugin. (Make sure paths to files are correct.)

   <script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../xbreadcrumbs.js"></script>

3.) Use the following code to apply the clipping function to an element, we recommend you run it in a domReady event. The code below will clip the element with ID #sample-1 from its top left corner with a width of 100 and a height of 100:

 <script type="text/javascript">      $(document).ready(function(){           $('#sample-1').clip(0, 0, 100, 100);           // The code above is equal to:           $('#sample-1').clip(100, 100);      }); </script>

4.) To remove clipping from an element, pass the keyword 'remove' to the jclip function:

  <script type="text/javascript">      $(document).ready(function(){           $('#sample-1').clip('remove');      }); </script>

5.) By default, jClip will start clipping from the top left corner of the element but you may specify Top and Left positions with the first two arguments. As seen in the sample below, jClip will start clipping with 20 pixel offset from top and left:

 <script type="text/javascript">      $(document).ready(function(){           $('#sample-1').clip(20, 20, 100, 100);      }); </script>

That's it ;) Click the Demo button to see it in action.
Parameters
The table below contains a list of parameters accepted by the .jclip() function.
Parameters Description
remove jclip('remove'). Removes clipping from the element.
width, height jclip(width, height). Applies clipping to an element from top left corner with specified width and height.
left, top, width, height jclip(left, top, width, height). Applies clipping to an element from the specified left and top coordinate with a set width and height of the clipping area.
Browser Compatibility
Tested in:
* MS Internet Explorer 6, 7, 8
* Mozilla Firefox 2, 3
* Opera 9+
* Apple Safari
* Google Chrome


Demo: http://www.ajaxblender.com/script-sources/jclip/demo/index.html
Download: http://www.ajaxblender.com/script-sources/jclip/download/jclip.zip
Source: http://www.ajaxblender.com/jclip-plugin.html

Related Listings:

  1. Tabbed Content Area : jQuery Plugin One of the biggest challenge to web designers is finding...
  2. Tabify – Tabbed content with ease – jQuery plugin This Jquery plugin lets you easily create tabbed content. All...
  3. GalleryView – A jQuery Content Gallery Plugin Using GalleryView requires a simple function call and four parameters:...

jAni – Jquery Animation for Background Images

Posted: 30 Nov 2009 11:39 AM PST

jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it's always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the "dark side" of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.
Features

1. Light-weight script
2. Easy to integrate
3. Fully customizable via CSS
4. Works with all modern browsers

How to Use

1.) Download jAni script. The package already contains jQuery framework.
2.) Add the following code to your < head >…< /head > tag to connect the jQuery framework and jAni plugin. (Make sure paths to files are correct.)

   <script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../jani.js"></script>

3.) Add a style containing the url to your background with animation (this may be added to a separate CSS document or inside the < head >…< /head > tag):

 <style type="text/css"> .animation-1 { background: url(./images/sample-animation.gif) no-repeat left top; } </style>

4.) Add an empty DIV which will display animation in your document:

 <div id="animation-1"></div>

5.) Add the following code to your < head >…< /head > tag to initialize jAni and start the animation.

  <script type="text/javascript"> $(document).ready(function(){ $('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 }); $('#animation-1').jani.play(); }); </script>

That's it ;) Click the Demo button to see it in action.
jAni Methods

jani.play()
Start playing animation.

jani.pause()
Pause animation.

jani.stop()
Stop animation.
Perameters:
The table below contains a list of parameters accepted by the .jani() function.
Parameters Description
frameWidth Width of a single frame.
frameHeight Height of a single frame.
speed Animation speed.
totalFrames Total frames in the animation.
loop Loop an animation or not. By default, value is true.


Demo: http://www.ajaxblender.com/script-sources/jani/demo/index.html
Download: http://www.ajaxblender.com/script-sources/jani/download/jani.zip
Source: http://www.ajaxblender.com/jani.html

Related Listings:

  1. Background Animation Script How to use: $('#background').animate({backgroundPosition: '(10% 250px)'}); Due to some browser...
  2. jQTouch Cell Phones Animation using Jquery A jQuery plugin for mobile web development on the iPhone,...
  3. Animated Innerfade Images This plugin for jQuery is an extension to the work...

Flexible Context Menus: Jeegocontext

Posted: 30 Nov 2009 11:20 AM PST

Jeegoocontext is a jQuery plugin for creating highly customizable context menus.

It transforms unordered lists into multi-level, smartly positioned navigations.

Multiple context menus can be created on the same page & they can be customized via CSS.

It has customizable time-delays for submenus’ disappear values which makes browsing them easier.

The plugin also has a workaround for Opera not allowing right-click overrides & works with it as well.

Features:

* Easy to implement.
* Both vertical and horizontal intelligent positioning.
* Customizable time delays to provide easy selection of items.
* Multiple context menus on a single page.
* Fully css customizable UI.
* Customizable behavior via callbacks.
* Customizable class names to avoid potential naming conflicts.
* Opera compatible.
* Cross-browser support
* Lightweight.
* Unobtrusive.

Easy to implement

Steps required to implement the plugin:

1. Include references to the jquery library, and to jquery.jeegoocontext.min.js.
2. Select a skin (skins cm_default and cm_blue included in the code-download) and include a reference to the skin’s stylesheet.
3. Append an unordered list to the body and give it a unique id and the following class name: “jeegoocontext” and the class name for the skin: “cm_default” or “cm_blue” for example.
4. Bind any context to the menu with the following call: $(’context’).jeegoocontext(’menu id’); Where ‘context’ can be any jQuery selector and ‘menu id’ contains the unique id of the menu, for example: $(’.context’).jeegoocontext(’menu_1′);


Demo: http://www.planitworks.nl/jeegoocontext/
Download: http://www.planitworks.nl/uploads/plugins/jeegoocontext/jeegoocontext_1_2.zip
Source: http://www.planitworks.nl/jeegoocontext/

Related Listings:

  1. Cascading Popup Menus v5.2 RC4 This is a fully JavaScript-contained menu system, and is quite...
  2. DHTMLXToolbar – Flexible, Powerful, Lightweight Toolbar DHTMLX is a JavaScript library which unites numerous products for...
  3. 10 incredible JQuery navigation menus JQuery is a lightweight, cross-browser compliant, and extremely powerful Javascript...

0 comments:

Post a Comment

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