cssgallery.info » Ajax

Mootools ‘ajax’ request for local files

Dan Tamas — Sun, 11 Jan 2009 18:40:27 +0000

Ok, ok, I know it’s 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.

Add this to DZone

Stumble upon something good? Share it on StumbleUpon

Share this on del.icio.us

Digg this!

Post on Google Buzz

Share this on Reddit

Share this on Technorati

Share this on Facebook

Clip this to Evernote

Add this to Google Reader

Submit this to Meneame

Kroppr – image cropping widget for your site

Dan Tamas — Wed, 12 Nov 2008 16:15:50 +0000

Kroppr is an unobtrusive script that willenhance any site that wants to offer an image cropping tool for its 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

Dan Tamas — Sat, 08 Mar 2008 00:07:19 +0000

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

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

The iCarousel script has as base mootools framework, and works in Ie, Firefox, Opera and Safari. We tested the script in Konqueror and it 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

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

Simple 3D Carousel using Mootools

As the name says it’s a simple 3d mimic carousel based on Mootools.The site explains how to implement the script.

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)

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 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

Dan Tamas — Wed, 27 Feb 2008 19:08:35 +0000

When we need to enter data into an input form element, but need strict data (like in select) and 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

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

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

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)

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

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

Dan Tamas — Sun, 10 Feb 2008 23:46:43 +0000

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

The guys from Masuga Design made this script unobtrusive, configurable( you can set number of stars) and provided 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

This is a CSS only solution. The ajax part or backend is not covered here. The technique is crossbrowser, permits 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

Author took previous presented solutions 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

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

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

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 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

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.