Archive for 'Ajax'

Mootools “ajax” request for local files

Ok,ok, I know is a contradiction in terms, but this is a problem encountered by a lot of newbies , and sometimes a feature like this would be useful to be able to copy the whole js into a local folder, and run it form here, without being forced to start a web server on the local machine.
How can this be accomplished without too much hassle or code change?

I created a function that tests the protocol used by the browser, and decides how to load the requested file, with xmlhttprequest or iframe.

Please be warned that this is just an exercise, and not a final solution. It can be improved and it should be :)

The example is here.
Obviously this will use the xmlhttprequest, but if you download this zip, and unzip it in a local folder, you will see working the iframe method.

The code is below:

function get_content(url,update) {
if ( document.location.protocol == “file:” ) {
// console.log(’local’);
var ifr = new IFrame({
src:url,
events:{
load: function() {
$(update).set(’html’, this.contentWindow.document.body.innerHTML );
}
}
}).inject(document.body);
}
else {
// console.log(’server’);
var myHTMLRequest = new Request.HTML({
update:update,
}).get(url);
}
}

Let me know your thoughts.

Kroppr - image cropping widget for your site

Kroppr is an unobtrusive script that enhance any site that wants to offer an image cropping tool for his visitors.

Unlike other scripts, Kroppr is able to ROTATE, zoom and move the image in the real time without using plugins - flash or java. The actual picture crop is done after the user is satisfied with his settings. In this way, the load put on the server is minimised and also the visitor’s experience.

The installation  is also very simple , being enough to add a script tag in the header’s page, and a class to the image that makes the cropping subject. More info on the Kroppr page.

javascript carousels

Javascript carousels are used to display some images or content, in a often narrow space, allowing the webdesigner to show much info in a limited space. They add some functionality to page, and in the same time some visual candy.

Some of scripts that can help us to achieve this are presented below:

 Carousel Component

Carousel Component

The script use YUI and has a nice list of features like vertical/horizontal mode, ajax fetch for content,animation control and works with most of  modern browsers

iCarousel

iCarousel

The iCarouel script has as base mootools framework, and works on  ie,frefox,opera and safari. We tested the script in konqueror and works fine too. It is pretty configurable, but require to tune the declaration of class for this (maybe a little hard for noobs).

 Carousel Slideshow

Carousel Slideshow

The script supports vertical and horizontal scrolling, optional linking, title attributes, configurable visible sides, and more.

Simple 3D Carousel using Mootools

Simple 3D Carousel using Mootools

As the name says, is a simple 3d mimic carousel, based on mootools.The site explain how to implement the script.

jCarousel

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

 Prototype Carousel w/ Scriptaculous (version 2)

Prototype Carousel w/ Scriptaculous (version 2)

This script  is a prototype based carousel that allows for n-item paging. It utilize the scriptaculous effects library for carousel paging/movement. Additionally, the items within the carousel are extracted from the HTML itself so that they can be indexed in search engines.

 ScrollShow

ScrollShow

ScrollShow is a very customizable slideshow, that relies on jQuery.ScrollTo, to slide(scroll) the items.

Let me know for other scripts is same category.

ajax autosuggest or autocomplete

When we need to enter data into an input form element , but need strict data ( like in select), but the amount of possible data is too big, we can make use of an ajax autosuggest, or autocomplete to guide the user. In this post I’ll try to present some solutions for this.

FaceBook Like - jQuery and autosuggest Search Engine

web2ajax

Features :
- Autosuggest and ajax support
- Support search plugins
- Support cache
- Cross Browser support ( IE > 5.5, FireFox, Safari, Opera )

TextboxList meets Autocompletion

TextboxList meets Autocompletion

This one use mootools-beta-1.2b1.js, and can be customized , like minimum number of chars that trigger autocompletion.Also it has a cache feature, so is very responsive.

jQuery Autocomplete Mod

jQuery Autocomplete Mod

As it names sais, requires jquery.

from the site

- Supports local data array (can now use w/out AJAX).
- Limit dropdown to XX number of results (good for limiting the results to users)
- Autofill pre-populates text box as you type
- New findValue() method can be used to programmatically determine if the value in the box is a valid option. (Useful for verifying the text entered is an existing value option.)
- Dropdown options now correctly re-position themselves on each display (which means they adjust for changing to the DOM)
- Dropdown box defaults to the width of the input field its attached to (you can manually specify a larger width as well)
- Better emulates Windows autocomplete boxes (for example: hitting delete and retyping the same box will now bring back the dropdown menu)

AJAX - Powered AutoComplete (for Prototype.js)

AJAX - Powered AutoComplete (for Prototype.js)

Prototype based, seems to support xml, multicolums and more…

Autocompleter

Autocompleter

A mootools solution, unobtrusive and customisable, is able to load data from a json or xhtml source.

I am sure there are more resources of this type, so please if you know any, don’t hesitate to write me about. I will add in this list as soon as possible. Thank you.

CSS and Ajax rating scripts

We need rating scripts for different situations in our webpages. For example we want visitors to rate a wallpaper in a wallpapers site, or a product in a shopping cart. For this we can use one of the rating scripts presented below:

Unobtrusive AJAX Star Rating Bar

Unobtrusive AJAX Star Rating Bar

The guys from masuga design made this script unobtrusive, configurable( you can set number of stars), and provide the backend too - which use PHP and MySQL. The js part is based on prototype/scrptacolous.

Creating an AJAX Rating Widget

Sadly i did not find a demo for this. The article is more a tutorial that covers all clientside part, and also shows how to implement the rating system using 4 major javascript frameworks ( dojo,mootools,prototype and jquery). for jquery it has a download archive too. It is good if you want to make your own rating script, and don’t know where to start from.

CSS Star rating redux

CSS Star rating redux

This is a CSS only solution. The ajax part or backend is not covered here.The technique is crossbrowser, permit multiple sizes (see demo on their site) and is linked to another two posts that teach you how to create this.

CSS: Star Rater Ajax Version

CSS: Star Rater Ajax Version

Author took previous presented solution and added the js and php part.As posted on site “not a beginners tutorial - and just follow the steps“, is presented in 5 short clear steps.

percentage based Star Rating

percentage based Star Rating

A minimal but complete rating system. This script i scapable to rate in percents, so you’ll have a more accuracy.To adapt it to your design you will need to dig into code and make changes needed.The stars are one sprite image as background, with variable background position.

AJAX Rating Stars

AJAX Rating Stars Demo

Based on prototype,the raw demo of the script shows it’s capabilities , like locking the staring, callbacks,external set, bindings to form elements.

Rabid Ratings v1.22

Rabid Ratings v1.22

This script uses png with transparency,is animated, and has a ’snap’ configuration that allows you to set steps for rating. Is mootools based, and will send the rating to an url set when you create the instance of the rating class. It also provides a tutorial of theme skinning.

Starbox 0.3

Starbox 0.3

“Starbox allows you to easily create all kinds of rating boxes using just one PNG image.” It uses prototype and for effects scriptaculous.

 jQuery Ajax Rater Plugin

jQuery Ajax Rater Plugin

This can have variable number or sizes of stars - starting from 1 like gmail starring system. Is based on jquery.

Please let me know if you know other rating scripts/techniques.