javascript reflections

Enhancing in a pleasant way, the way a site looks, javascript reflections add an easy mode to reflect your images on the site, without need of image manipulation program to be used on each one. A handy tool for very dynamic pages.Some of this script will be presented below.

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

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

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 next

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

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

Javascript image reflection

Not much on this, on the site, you will have to digg the coe to see how is 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), 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

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.

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

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

Web 2.0 Badge : Free PSD Download

Web 2.0 Badges - Free Download

Web 2.0 Badges - download glossy free PSD file

7 Web 2.0 badges vector download

Badges

Free Vector Badges - Glass

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

Fresh badges

and the result is:

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

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

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

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

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.

javascript drop shadows

As we promised in earlier post, today we’ll try to present some javascript codes that enhance our design with drop shadows.

DropShadow

This technique seems to be an improvement of next presented javascript :Onion Skinned Drop Shadows, by removing extra markup needed, and “enables you to apply any number of drop shadows to your site all with one script.”

Onion Skinned Drop Shadows

Some features:

• Automatically expand and contract to fit any object, without specifying widths.
• Allow you to modify the shadow depth with no image manipulation.
• Render the same across all browsers without cutting any corners.

ShadedBorder - JavaScript Round Corners with Drop Shadow

Well, one feature is that script apply shadows to rounded boxes, without images, but the list of what this script can do is big :

• JavaScript-only Photoshop(tm)-like rendering without external images
• Round corners
• Drop shadows
• Glow effects
• Gradient backgrounds
• Graceful degradation - will look ok if JavaScript is turned off
• Borders with different widths and semi-transparency
• Full support for liquid designs
• Anti-Aliasing
• On-hover support
• Disable some of the corners, e.g. bottom-left
• Change borders on-the-fly
• Real transparency - looks perfect on any background
• Cross-Browser: Firefox, Internet Explorer (>=6.0), Safari, Opera (>=9.0)
• Non-obstrusive
• Leight-weight (8.8KB uncompressed)
• Fast (0.5s for the example on a 2.2GHz machine)
• No JavaScript library dependencies

The Shadower - Realistic Drop Shadows in Javascript

Prototype based script, add shadows to draggable boxes.Also allows you to set  distance,angle, shadow steps,opacity,colorattributes of shadow applied.

Glossy.js 

Glossy.js  allows you to add corners and shading and shadow to images on your webpages.

css shadows - images and boxes

As we said in a previous post, we’ll try to bring here some resources related to css shadows applied to images or boxes.

CSS shadow kerfuffle

“… in addition to just the plain old img element, an enclosing div plus four additional divs to handle the corners”.

CSS Drop Shadows

This technique uses an outer div for images, or 2 for text. For text basically is building a box around text, then is treated as block element - like image.

Drop shadow CSS

The author of this one, make uses of 3 overlapped boxes, with different backgrounds.It has Two methods, one pure css, one using images.

Also it provides a solution for text-shadow.

yDSF - Robust CSS Drop Shadows

from the site: “yDSF is comprised of some lightweight structural (non-semantic) XHTML markup and a few CSS classes.”

CSS Drop Shadow Tests

Here is presented a way to allow multiple block level elements under same dropshadow box. It separate the border and the shadow in 2 separate wrappers, and use position:relative.

Flexible drop shadowed boxes using CSS

This one uses 2 divs, the holder, with background set to shadow image(gif or png), and a wrapper div, inside the holder, positioned relative, with some negative margins.

Those above are pure css techniques. In a following post, we’ll try to add some resources that use javascript for this.

Update

Cssnewbie - 5 CSSriffic Treatments to Make Your Images Stand Out

added in comment#2 his technique.

The  markup get another wrapping div, and can be used with css border or a png image for browsers that allows alpha channel.

css shadows - text

Shadows are graphical improvements for design or usability. We may want to create a design with shadows under images or boxes, But shadows also can improve usability for text positioned over images.

In this post we’ll try to present some css techniques for text shadows, and in a future posts, we’ll try to gather some css image/box shadows, continued with javascripts that do this for us.

Text shadows:

Creating Cross Browser Compatible CSS Text Shadows

This technique use different browsers behaviour ( for example use filter for ie , or text-shadow for safari).

Shadow

This one makes use of “content” attribute in css. You will have to create an id for every item u want shadowed and set the content attribute the same with the text displayed.

CSS Drop Shadows

This one use same “content” attribute, but also it uses selectors so you can setup a class for this. Instead for every shadowed item, you’ll have to set “title”attribute. Is not working in IE 6.

Drop Shadow

” Use absolute positioning to make a duplicate block of text. Then offset the first text block and use a dark gray color for the text. ”

Let us know if we missed something.

sortable tables

When it comes to display sets of data , the most common way to do this is in a table. Sometimes we need the ability to sort that tables, by a column, to help the user in his visit on out site. We can achieve this in 2 ways: a server side - method that require a new request to server, bandwith and patience from the user, or a clientside method, using some javascripts that can do this, with data already sent.

some of those scripts will be presented next:

Unobtrusive Table Sort Script (revisited)

As the names says, is an unobtrusive script. It has some nice feature like custom sorts, multiple column sort, keyboard access, callbacks, etc.

Table Sorting with Prototype

Prototype is required for this to work. it can sort different types of data. A notable one is “datasize” e.g. 30MB - detects: B, KB, MB, GB, TB.Optionally you can make the table have a fixed header and a fixed height (and/or width), scrolling body.

table sort

“TS is able to detect most data types based on the contents of the first cell in the column.” .

tablesort.js by webfx

pretty simple sort script.

javascript table sorting script

The script can sort column data containing text, integer numbers and floating-point numbersand has multi-column sort.

Table sorting JavaScript

“This unobtrusive table sorting script was awesome, offering sort mechanisms for text, numbers, dates and currencies, by simply adding an external script to a page and a class to a table!”

Sortable Table ColdFusion Custom Tag with jQuery UI

It uses coldfusion custom tag, and jQuery

Phatfushion  sortableTable

This script provide:  sort on numbers, strings, dates and currency and filtering by columns.

It is based on mootools .

If you have other scripts for this category, let me know.

javascript tooltips

Tooltips are a nice way to display additional info for user, without breaking the flow of current article in your webpage. So a mouse over a highlighted word, or image, can give more information to user.

We’ll try to present some of javascript tha can help us.

JavaScript, DHTML Tooltips

This is a cross browser library. It configure he with of tooltip automatically, and has different settings, transition that can be applied.Also can include images.

BoxOver

“BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript. ” The tooltips can be styled.

Prototip

Prototip uses prototype and scriptaculous.

Texsoft HTML tooltip

This is more like a tutorial to make your own tooltip script.

A Tooltip You Can Hover Over

This tooltip can be hovered, and can include links inside the text.

Mootools tips

Tooltips are in mootools library. It needs to download the modules for this.

The script is adding a tooltip to an a element by setting the class=”addToolTip” and the title=”Text in tooltip”.

AJAX-enabled Help-Balloons

Using the prototype and Scriptaculous,this script is able to populate the tooltip, or baloon, with content fetched by an ajax call.

jQuery Tooltip plugin

This make use of jQuery.

Javascript graphs

Sometimes we need to present our sets of data in a webpage in a manner more friendly for the user. Graphs are suited for this. We can do this serverside, generating an image and send to browser, or make use of different scripts to draw the data straight in the browser. This is a very easy way for very dynamic data, we being able to use some ajax functions to fetch dat from server and draw the graph in real time.

Below we’ll try to give some example of such scripts.

CanvasGraph.js

This script requires Mochikit 1.0+ and sadly, is not working on IE.

Yahoo! UI Library: Charts

As the name sais, requires YUI, and flash plugin.

flot - Attractive Javascript plotting for jQuery

Requires jQuery. Also has some interactivity functions ( zoom to a range, hide/show dataset, return coordinates of point clicked, etc)

Timeplot

” Timeplot is a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them.”

Plotkit

Plotkit needs MochiKit 1.3 or higher and works in all major browsers, switching to svg/canvas/ vml based on browser’s capabilities.

Chronoscope

“Chronoscope supports interactive framerates on datasets with tens of thousands of points by using multiresolution representation and incremental streaming.” It accept mouse and keyboard commands, like zoom, pan, drag-drop, contextual menu, etc..

plOOtr

plootr works with mootools v1.11.

Ajax MGraph

This script is based on Prototype.js. It seems to have some limitations, like only positive numbers, or only integer, and is intended to dispaly monthly based data.Last version allows to create multiple graphs in page.