Greepit.com | Open Source Resources for Designers & Developers » Javascript

jQuery Image Slider - slideViewer

james — Mon, 16 Feb 2009 17:49:32 +0000

slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images.

slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

You can fix the gallery size by defining the width / height or let it be dynamic according to the image input.

Requirements: jQuery 1.2.1 and jQuery easing.1.2

Compatibility: IE6, IE7, FF2, Opera 9

Visit Website

JavaScript Based Framework for Ajax - Spry

saif — Mon, 16 Feb 2009 15:53:27 +0000

The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages.

The Spry framework is a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript, without the need for refreshing the entire page.

With Spry, you can:

Build and style widgets
Implement Ajax with small JavaScript
Add transitions to almost any element on your page
Transform complex data sources into a row/column format

The Spry framework can be used by anyone who is authoring for the web in their tool of choice.

Visit Website

Image Gallery Example with Spry

Open Source Web-Based XHTML Editor - WYMeditor

saif — Mon, 16 Feb 2009 11:10:12 +0000

WYMeditor is an open source web-based WYSIWYM XHTML editor. WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate the need of modern applications.

With WYMeditor, the code can’t be contaminated by visual informations like font styles and weights, borders, colors, …The end-user defines content meaning, which will determine its aspect by the use of style sheets. The result is easy and quick maintenance of information.

Features

XHTML strict
CSS compliant
No font or text formatting, sizes or colors - WYMeditor is CSS-based
Easy to integrate into your application
100% Javascript code
Image, link, table support
Skins supportvia CSS
APIs, plugins support
Free and Open Source, fully adaptable to your needs

WYMeditor has been integrated in many open or proprietary applications, such as: Drupal, Symphony, Radiant, TYPO3, WordPress, Rails, CakePHP and etc…

Website: http://www.wymeditor.org

View Examples

Open Source JavaScript Library - Raphaël

saif — Sat, 14 Feb 2009 22:19:42 +0000

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

You will need to created a canvas object on which to draw then all future calls to drawing methods will be bound to this canvas. Objects created with Raphaël are DOM objects and you can use JavaScript to modify them later.

Website & Demo: http://raphaeljs.com

Documentation: http://raphaeljs.com/reference.html

jQuery Tooltip Plugin - Simple Tip

saif — Thu, 12 Feb 2009 21:21:10 +0000

Simpletip is a plugin for the popular jQuery JavaScript library. It allows you to create tooltips with ease on any element on the page using the power of jQuery’s selectors and event management.

The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

Compatibility: All major browsers

Requirements: Query Library

Website: http://craigsworks.com/simpletip

Preview Images with imgPreview - A jQuery Plugin

james — Mon, 09 Feb 2009 09:20:01 +0000

The ‘imgPreview’, a jQuery plugin allows users to preview an image before clicking on it. It will preload the image so when a user clicks through to it there is no waiting time!

The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive; it does not require any hooks to target specific links (no non-semantic classes); it will automatically detect the anchors that are linking to images and will only apply the preview effect to them.

Requirement: jQuery 1.3.1

Visit Website for further Details

QuickSearch - jQuery Plugin to Quickly Filter Large Data

rob — Sun, 08 Feb 2009 11:24:46 +0000

quickSearch is a jQuery plugin for filtering large sets of data. It supports Tables, Paragraphs and Lists. It’s very easy to use.

quickSearch v2.0 was written with speed in mind, it is now a lot quicker than the previous version and it is completely backwards-compatible with any previous code written.

Requirements: jQuery

Demo: http://rikrikrik.com/jquery/quicksearch/

Download: http://rikrikrik.com/jquery/quicksearch/#download

JS Charts - Free Charts Generator

saif — Sun, 08 Feb 2009 10:54:07 +0000

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

Features

No need to write code
Easy to integrate
Easily Customizable
Online Charts Editing
Bar, Pie and Line Chart Types are available
Compatible with all major web browsers
100% JavaScript component

Website: http://www.jscharts.com

Examples: http://www.jscharts.com/examples

Download: http://www.jscharts.com/free-download

Open Source jQuery Dropdown Menus With pop!

saif — Sat, 07 Feb 2009 09:45:47 +0000

Pop is an open source javascript plugin for jQuery to make dropdown menus. Pop controls a main container and show / hide that container using some simple javascript. You can put anything in the container to control it using Pop!

it just requires some lines of code to be operated. You will like less code and effective performance of that Open Source Free Dropdown Menu.

Demo and Download Instructions: http://pop.seaofclouds.com/

The RGB Color Calculator - HTML Color HEX Code Generator

saif — Wed, 04 Feb 2009 09:03:15 +0000

As I was setting up my google and adbrite ads, I noticed that the color presets from googles palletes didnt match the color of my sidebar. And the thing is, I dont know the exact HTML Color code for my sidebar since it only has RGB Codes set on the CSS File. So I asked my good ol’ pal Google to help me find a way to convert it to HTML Color code, and boy did it work like charm. Google handed me The RGB Color Calculator.

At first glance I knew I found what I was looking for. Well just a brief review about The RGB Color Calculator, It basically converts between RGB Values, HTML Color Hex Codes and HSV Values. Simultaneously. And you even get to view the color you are converting after Pressing “Calculate”, it will normally be shown as the background of the page.

I know I’m going to have this handy in the future. Hope ya’ll find it useful!

Don’t forgot to Subscribe for RSS to get first to know about Greepit news.

Website: http://www.drpeterjones.com/colorcalc/

Via: http://johnibanez.net