Archive for 'Javascript'

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 [...]

How to create a product viewer using mooZoom

There are cases when we need to show a zoomed image of a product ( or something else ), that require to be as much as user friendly as possible. One of the cases are e-commerce sites that use high quality images for high impact over the client’s mind (jewelery for example).
In this case [...]

Create window-like element with mootools

We continue our serie related to mootools with a tutorial that shows us how to build a window-like element on our page, that can be resized and moved. Based on previous tutorials, we will will create first the html and apply some js code to it, to obtain what we want. This tutorial is a [...]

Mootools 1.2 stable is out!

It seems that MooTools team just released the stable 1.2 version of popular framework mootools. Great job, and a big step forward.My only concern is what is going to happen with 1.11, as the website for the moment is working in a reduced form, docs, download being available only, but as they said “At least you can download, right?”  Again, congratulations! [...]

A beginner’s mootools – create draggable and resizable elements

The today tutorial will try to explain how to make an element draggable or resizable – or even both in the same time, using the MooTools framework. To accomplish this we’ll make use of two functions existent in mootools: makeDraggable() and makeResizable().
This is very simple.We simply select the element we want to be resizable [...]

A beginner’s mootools – select and create elements

In previous tutorial we learned how to add events to elements in webpage. In this one we will learn how to select elements – or better said how to access an element from page, and how to create new elements in page.
In mootools we have two functions that select an element:
function $ – [...]

A beginner’s mootools – add events

We will try to make a little set of tutorials how to use mootools framework for almost absolute beginners. You will need to know basic javascript. The documentation for mootools framework is a little hard to understand and requires more advanced javascript knowledges.
But…… every webdesigner (and of course beginners first) wants a hassle free [...]

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

The script use [...]

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 [...]

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 [...]