Tag Archives: free

javascript reflections

By enhancing the way a site looks javascript reflections add an easy mode to reflect your images on the site without the need of an image manipulation program to be used on each one. A handy tool for very dynamic pages. Some of these scripts will be presented below.

3d image reflexion

3d image reflexion

Based on prototype and scriptaculous, this script is unobtrusive, makes preload and is crossbrowser. On author site there is a demo on black background too.

reflex.js 1.2

reflex.js 1.2

“reflex.js 1.2 allows you to add a Cover Flow™ effect (including reflection) to images on your webpages. *Cover Flow is a trademark of Apple Inc.
It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it’ll degrade and your visitors won’t notice a thing. ”

Reflection Factory

Reflection Factory

A dual effects , this mootools based script allows you to add shadows and reflections to images, with different parameters like amount,distance,opacity.

Reflection.js for mootools

Reflection.js for mootools

This is an improved version of the reflection.js script rewritten for mootools. It allows to add instantaneous reflection effects to your images in modern browsers, in less than 3kb.

The original script is:

Reflection.js

Reflection.js

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

script.aculo.us Reflector

script.aculo.us Reflector

as the name suggest, is based  on scriptaculous. It allows some params  – like amount and opacity

Javascript image reflection

Javascript image reflection

You won’t find much info on the site so you will have to digg the code to see how it’s working. Anyway, it seems to support distance from main image, opacity and transparent gifs (no safari).

If you know other resources on this subject, please let me know.

ajax autosuggest or autocomplete

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

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.

badges

I am writing today about how to add a web 2.0 touch to your website without actually studying the trends and knowing Photoshop too much. I gathered some sites that are offering a generous number of ready-made badges – a sparkle of web 2.0 glamor to enhance every old and new site.

These links might help you:

White and Clean web 2.0 badge – Free PSD file

White and Clean web 2.0 badge - Free PSD file

Psd of the day – Glossy web 2.0 badge with rounded corners.

http://photoshopcandy.com/?p=53

Web 2.0 Badge : Free PSD Download

Web 2.0 Badge : Free PSD Download

Web 2.0 Badges – Free Download

Web 2.0 Badges - Free Download

Web 2.0 Badges – download glossy free PSD file

Web 2.0 Badges - download glossy free PSD file

7 Web 2.0 badges vector download

7 Web 2.0 badges vector download

Badges

Badges

Free Vector Badges – Glass

Free Vector Badges - Glass

20 Free Sunny Buttons
20 Free Sunny Buttons

I saved the “creme-de-la-creme” for the end…..this is what I liked the most – websites that helps you create customizable badges:

What is Web 2.0 Badges

What is Web 2.0 Badges

Fresh badges

fresh badges

and the result is:

fresh badges