Mapper.js 1.0: Highlighting for imagemaps

December 20th, 2007 Arsen

Christian Effenberger has doubled up to release Mapper.js 1.0, a library that allows you to add automatic area highlighting to image maps
on webpages. It uses unobtrusive javascript to keep the code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+,
Safari and IE6+. On older browsers, it can use “jsgraphics” from
Walter Zorn (if installed), else it’ll degrade and visitors won’t
notice a thing.

You are able to create an image map, and then define the colors through the simple CSS class microformat:

PLAIN TEXT

HTML:
<img class=“mapper iborder00aa00 icolor00ff00″ src=“images/eu.gif” usemap=“#map_of_europe” />

Posted in Ajax Applications | No Comments »

Sorted Table

December 18th, 2007 Arsen

SortedTable allows you to sort rows in a table by clicking the columns.

    To start using SortedTable all you need is:

1. have a valid XHTML document,
2. have a valid table* in this document
3. download the following javascripts to a folder on your server: Event.js and SortedTable.js
4. add a class=”sorted” to the table
5. include the javascripts in the html ( and )
6. add the following code to the html
7. if you’re using XML Data Islands add class regroup (you should have class=”sorted regroup”)

Web Site

Posted in Ajax Applications | No Comments »

jQuery ThickBox

December 18th, 2007 Arsen

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Features:

• ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
• The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
• ThickBox will resize images that are bigger than the browser window.
• ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
• ThickBox will hide form elements in Windows IE 6.
• ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
• Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
• ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

Web Site

Posted in Ajax Applications | No Comments »

MooTools Autocomplete

December 13th, 2007 Arsen

A MooTools Autocompleter widget that creates a unobtrusive and customisable suggestion box for input fields from variable data sources. Try it out, it can load the suggestions from a local object or via XHR from a JSON or an XHTML source.
Example in the Playground which includes an Local, Json and Ajax Autocompleter.

Compatibility

Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)

Features

All classes extend the base class Autocompleter.Base, which provides all basic features to create an Autocompleter from any provided source. Both, Ajax.Json and Ajax.Json extend Autocompleter.Ajax.Base, which handles the query request and response.

Web Site

Posted in Ajax Applications | No Comments »

Css Dock Menu

December 13th, 2007 Arsen

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom.

Web Site

Posted in Ajax Applications | No Comments »

Easy Ajax with jQuery

December 9th, 2007 Arsen

Ajax is changing web applications, giving them a responsiveness that’s unheard of beyond the desktop. But behind all the hype, there’s not much to Ajax — (X)HTML, JavaScript, and XML are nothing new, and in this tutorial, I’ll show you how to simplify the process of adding Ajax to your application even further with the help of jQuery, a popular JavaScript library.

What’s Ajax?

You’ve probably heard about Ajax before, or at least used an Ajax-based application — Gmail, for instance. Quite simply, Ajax is a technique for handling external data through JavaScript asynchronously, without reloading the entire page.

Unfortunately, in-depth tutorials on practical ways to enter the world of Ajax are few and far between. To add to the problem, the XMLHttpRequest class used by Ajax isn’t very easy for beginning web developers to use. Luckily, a number of JavaScript libraries offer an easier way. Today I’ll show you how jQuery — one of these libraries — allows you to easily add Ajax to your application.

Read the rest of this entry »

Posted in Documentation | 4 Comments »

Browser-based instant messaging client

December 9th, 2007 Arsen

Ajax powered IM system that sits right on your web site.

ajax im (”asynchronous javascript and xml instant messenger”) is a browser-based instant messaging client. It uses the XMLHTTPRequest object in JavaScript to send and receive commands to and from the server. No refreshing of the page is ever needed for this “web application” to work, as everything is updated in real-time via JavaScript.

Web Site

Posted in Ajax Applications | No Comments »

Javascript Reflection

December 9th, 2007 Arsen

To add a reflection just add a class=”reflect” to the image.

Reflection.js works well with logos, icons and dynamic image content such as forum avatars.
Reflection.js comes into it’s own with forum avatars; you can apply a reflection effect to every avatar on your forum or blog without any additional server work.

Features

• Fun and easy to implement! Just add class=”reflect” to your images
• Automatically blends into background colours or images
• It’s easy to vary the reflection height and opacity
• Can respond to user actions through Javascript
• Degrades in older browsers; they won’t notice a thing!
• It’s smaller in size than most images; under 5KB!

Download the latest version, Reflection.js v1.7

Web Site

Posted in Ajax Applications | 1 Comment »

Ajax Tabs Content script - Demo

December 6th, 2007 Arsen

Ajax Tabs Content Script (v 2.0)
Description: This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an “IFRAME” mode, a “slideshow” mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more. We got our inspiration for this script from Yahoo’s homepage, which employs such a concept to show news in an organized fashion.

Here’s a quick outline of the script features:

• Fetch and display an external page (from the same domain) inside a container when a tab is clicked on via Ajax.
• (v 2.0) Apart from Ajax, an external page can also be fetched and displayed via the IFRAME element instead. This is useful for external pages that either contain JavaScript/ CSS code that doesn’t run properly when fetched via Ajax, or the page is from an outside domain.
• Add a “default” content inside the container to either be shown while no tabs are selected, or to be associated with a specific tab. The default content is added inline on the page and not fetched via Ajax, to avoid unnecessary fetching of external pages.
• Supports session only persistence, so the last tab user clicked on is remembered if he/she returns to the page within the same browser session.
• (v 2.0) Supports auto mode, in which script automatically cycles through and selects each tab periodically until a tab is explicitly selected.
• (v 2.0) Ability to also expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted.
• (v 2.0) Ability to dynamically select a tab either based on its position within its peers, or its ID attribute.
• (v 2.0) Ability to directly load a different external page into the content container, either via Ajax or IFRAME.
• (v 2.0) Ability to set where the CSS class “selected” get assigned when a tab is clicked on- either on the tab link itself (its “a” element), or its parent instead (ie: “li” element). This makes the script adaptable to both CSS Tabs that are styled at the “A” level itself, or its parent container instead.
• (v 2.0) Supports nested Ajax Tabs! In other words, you can have an external page fetched via Ajax contain in itself Ajax Tabs that show their own contents when clicked on as well. This is made possible using the “onajaxpageload” custom event handler (see documentation).
• Supports multiple Ajax Tabs Contents on the same page.
• Fully unobtrusive, search engine friendly design. For search engines or browsers with JavaScript disabled, the external contents will just load as actual pages (instead of via Ajax).

Web Site

Posted in Ajax Applications | No Comments »

Prototype Window - Demo

December 6th, 2007 Arsen

Overview

This javascript class allows you to add window in a HTML page.

This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory.

It has been tested on Safari, Camino, Firefox and IE6, Opera looks fine.

Features

• Valid HTML/XHTML generated code
• Resizable windows
• Minimize/Maximize
• Modal dialogs
• Visual effects
• Skinnable
• And more…

Visit

Posted in Ajax Applications | No Comments »