Monday, March 22, 2010

Visually Connect HTML Elements: jsPlumb

jsPlumb is a jQuery plugin for visually connecting HTML elements on a web page.

It uses a HTML5 canvas element when supported and Google's ExplorerCanvas script to support older browsers.

The styles, shapes of the wires and "the position of the connection" can be customized easily.

jsPlumb jQuery Plugin

jsPlumb also supports drag'n drops (requires jQuery UI for this functionality).

The plugin is currently in beta status, however, works flawless and can be downloaded from the source of the demos provided.

Special Downloads:

Related posts

Embed Google Maps Directions With jQuery GPS

Embed Google Maps Directions With jQuery GPS:

jQuery GPS is a lightweight jQuery plugin that enables you to easily add clean Google maps directions (without unwanted features) in your website. It provides you control over look and feel of input fields and the output. jQuery GPS uses Google Maps API, and you must get your own API key to use this plugin.

Jquery GPS provides easy to configure features enabling you to control: whether you want to show turn by turn directions in text; specify initial zoom level, enable/disable tooltip and optionally place an image at the default location. It is a cross browser plugin that work in all major browsers including IE6.

Developed by Aron Brown; jQuery GPS is available for download under the GNU General Public License. You can find further information, demo & download on jQuery GPS Website.

Similar Posts:

Wednesday, March 10, 2010

Spritely: Create Sprite Animation Using jQuery

Spritely: Create Sprite Animation Using jQuery:

Spritely is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript. It is a light-weight plugin with a few simple methods that allow you to easily create animated sprites and scrolling backgrounds. It is a cross browser plugin that works on all major browsers including iPhone and Internet Explorer 6.

Spritely provides two key methods, sprite() and pan() both of which simply animate the background-image CSS property of an element. The difference between the two is that a ’sprite’ image contains two or more ‘frames’ of animation, whereas a ‘pan’ image contains a continuous image which pans left or right and then repeats.

Developed by Artlogic Media; Spritely is dual licensed under the MIT or GPL Version 2 Licenses. You can find further information, documentation, demo & download on Spritely Website.

Similar Posts:

GetSimple: XML Based Content Management System

GetSimple: XML Based Content Management System:

GetSimple is an open source Content Management System (CMS) that utilizes XML for data storage, has excellent user interface and is really easy to learn. GetSimple requires PHP 5.1.3+ and has been tested with Apache web server. Installation is a snap, all you need to do is upload files to your server and you are ready.

GetSimple is ideally suited for small to medium site websites. IF you are comfortable with WordPress theme development, you will really like GetSimple. Like WordPress, GetSimple allows developer to create their won themes and extend its functionality using Plugins. Plugins enables you to provide customized solutions without having to make things too complex.

Features

  • XML Based – No Databases
  • You can “Undo” Almost Everything
  • Easy to Learn UI
  • Simple Installation
  • Simple Theme Customization
  • Sitemap Generation & Pinging
  • Website Archives
  • Keyword & Tagging Suggestions
  • Cron Ability
  • Comprehensive Logging
  • Friendly URLs
  • Extend CMS with Plugin System

Developed by Chris Cagle; GetSimple is available for download under GNU General Public License. You can find further information, documentation, demo & download on GetSimple Website.

Similar Posts:

Thursday, March 4, 2010

BubbleUP jQuery Plugin for Your Menus

BubbleUP jQuery Plugin for Your Menus:

BubbleUP jQuery Plugin is a fun and easy plugin to get you started in jQuery. The effect is a nice starting point for learning the basics and many of the steps involved in creating other more intricate plugins you will make in the future.

With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. It has been tested on IE 7, Opera 10, Firefox 3.5, Safari 4, and Chrome 5 Beta.

jquery-bubble

Requirements: jQuery Framework Demo: http://aext.net/jquery-menu-plugin-bubbleup/ License: License Free

Image Power Zoomer

Image Power Zoomer:

Image Power Zoomer is jQuery plugin that adds a magnifier to any image on your page. It lets the user zoom in on any portion of the image by simply moving cursor over it. Furthermore, the magnification power can be adjusted on the fly by turning the mouse wheel back or forth, just like in many graphics programs.

Image Power Zoomer is pretty simple to implement. Based on your understanding of jQuery selectors, you can apply the power zoom effect on an image using variety of ways (e.g., if you need to apply it to multiple images you can select images using class attribute). Image Power Zoomer is a cross browser plugin that works on all major browsers including IE6.

Features

  • Applies the zoom effect to any image on the page without adding any additional markup to it.
  • The default zoom level can be changed for each image.
  • When the user scrolls the mouse wheel while over the image, the zoom level decreases or increases based on the scroll direction.
  • The range of zoom can be changed.
  • The size of the “magnifier” can be changed for each image.

Developed by Dynamic Drive; Image Power Zoomer is available for download for Free. You can find further information, demo & download on Dynamic Drive Website.

Similar Posts:

Wednesday, March 3, 2010

Alloy UI: Feature-Rich JavaScript UI Framework

Alloy UI: Feature-Rich JavaScript UI Framework:

Alloy UI is a JavaScript UI library, a CSS framework, a set of HTML recipes and a taglib library, all combined to empower developers across multi-skilled teams deliver rich and dynamic applications.

It is built by the developers of Liferay, has a lot of ready-to-use components & requires Yahoo! User Interface Library to run.

Alloy UI

The components include:

  • auto-complete
  • charts
  • color picker
  • calendar
  • tooltips
  • forms
  • treeview
  • image gallery
  • & much more..

The framework comes with full set of demos & not documented yet (currently in a preview release).

Special Downloads:

Related posts

RegExr: Free Tool For Editing and Testing Regular Expressions

RegExr: Free Tool For Editing and Testing Regular Expressions:

RegExr is a free tool for learning, editing, testing, and sharing regular expressions. It is available online at RegExr.com, and has a desktop version (Adobe Air application) for Mac OSX, Windows or Linux. RegExr is built with Flex 3 and uses ActionScript’s built in RegExp engine.

RegExr has very simple and easy to use interface. It provides you with built in sample (organized into various categories) for quick reference. You can also search through expressions shared by the community and share your own. It also allows you to save your own expressions locally.

Features

  • Real time results: shows results as you type
  • Code hinting: roll over your expression to see info on specific elements
  • Detailed results: roll over a match to see details & view group info below
  • Built in regex guide: double click entries to insert them into your expression
  • Save your expressions: My Saved expressions are saved locally
  • Share and rate expressions: search Community expressions and share your own

Developed by Grant Skinner; RegExr is a free tool that you can use online or download it desktop version. You can start using the online version by visiting RegExr Website.

Similar Posts: