RB Music - Uncovered & Rediscovered Hits » MooTools

Mootools form validation with mootools.floor

Richard — Mon, 23 Mar 2009 11:59:25 +0000

Latest javascript mission was to get some nice validation for a holiding page I was creating I wanted something quite simple but ended up coming across a class called mootools.floor which cover all your validation needs e.g. email check, compare two field etc there are a long list of possibilites in the documentation

It includes support for AJAX form submission plus countless other features. The other plus point is the tooltips can be styled completely using CSS so this will fit into any site with a bit of tinkering. It also supports custom validation just write your own javascript function of what you want to validate. It really is a nice tool. It’s fairly easy to get up and running but once you get past the simple parts of this class it can be fairly tricky to get your head around – but once you get your head around it, its really nice to use!

See the demos of this in action

Documentation

Loading graphic generator

Richard — Sat, 17 Jan 2009 20:36:09 +0000

Earlier I was looking around for a loading graphic for my pre-loading image rotator and on my Google travels came across ‘Ajaxload‘. This website will create custom loading graphics on the fly.

Pick from a selection of different types of graphics enough to suit every site. Pick a background colour using the colour pick or supply hex code or go for transparent. The same applies for a foreground colour. Lets go for white background colour and the blue of my site for foreground as an example. Hit generate and it pops up in the box below hit download and there you have it a custom loading graphic…

Ajaxload – Ajax loading gif generator

MooTools preloading image rotator class

Richard — Sat, 17 Jan 2009 20:25:20 +0000

Following on from my previous post about a pre-loading image rotator I have decided to create a mooTools class for it so it can be used easily over and over again.

This class will pre-load an array of images and then begin to fade between them useful if you want to load particularly large images and let your users know that the images are on there way.

An example of the class in action can be found here

To download the example for your own use it can be downloaded here

This has been tested in Firefox 3, Opera 10 and Internet Explorer 7… Feel free to comment on any suggestions for improved functionality! Enjoy!

Mootools Popups

Richard — Tue, 06 Jan 2009 22:52:50 +0000

On most project I tend to use this somewhere or other a “slimbox” type of popup you know the ones. Well here are two takes on this effect allowing for images/iframe content and ajax calls.

Squeezebox

http://digitarald.de/project/squeezebox/

I’d rate this over smoothbox it tends to throw back some JS errors when I used it although it could be down to conflicts I have not got round to checking it out yet… Works with Moo tools 1.2

Smoothbox

http://gueschla.com/labs/smoothbox/

I think this is an older version development wise however it still functions perfectly apart from the JS errors it might just be me!

MooTools preloading image rotator

Richard — Mon, 20 Oct 2008 20:31:22 +0000

I must have written six or seven of these bad boys since about January so I though one last time I’ll post it here and adapt it from time to time when I need it ! So here it is for both me any anyone else intrested

This takes a number of images pre loads them and will then fade between them

html

css

#image_rotator {
position: relative;
width: 100px;
height: 100px;
}
#image_rotator {
position: absolute
}

javascript

window.addEvent(“domready”, function() {

var images = $$(‘#image_rotator img’) //the image
var imgTotal = images.length-1;
var pos = 0;

//set up an array of image src’s we want to preload
var imgSrcs = new Array();

//loop through array and stuff the images src’s into an array to use next
images.each(function (el,l) {
imgSrcs[l] = images[l].src;
});

//check all our images from array have loaded then start calling fadeImages every 5 seconds
var myImages = new Asset.images(imgSrcs,
onComplete: function(){
fadeImages.periodical(5000);
}
});

function fadeImages() {

//if we are at the end of list of images fade out last 1 fade in 1st else we fade current and fade in the next
if (pos == imgTotal) {
fadeImgOut=imgTotal;
fadeImgIn =0;
pos = 0;
}
else {
fadeImgOut=pos;
fadeImgIn =pos+1;
pos ++;
}

//do the fading stuff
var fadeOut = new Fx.Tween(images[fadeImgOut], {duration: 2000});
var fadeIn = new Fx.Tween(images[fadeImgIn], {duration: 2000});
fadeOut.start(‘opacity’,[1,0]);
fadeIn.start(‘opacity’,[0,1]);

}

});

MooTools product scroller

Richard — Fri, 17 Oct 2008 19:44:09 +0000

On a recent project we needed a way of scrolling a product listing nicley I came up with following.

Obviously there are probably a zillion ways of acheiving the same result but this is my take on it. I admit to not being any kind of genius when it comes to javascript/mootools so probably room for improvement but hey it works!

html

css

#wrapper {
width: x;
height: x
position: relative;
}
#carousel {
left: 0;
width: x;
}

javascript

// Let’s define some variables first
var wrapper = $(‘wrap’); // The outer wrapper
var carousel = $(‘carousel’); // The inner wrapper
var items = $$(‘#carousel div’); // The different elements, this is an array
var item_width = 52; // The full width of a single item (incl. borders, padding, etc … if there is any)
var max_margin = item_width*items.length; //The width of the carousel elements with the wrapper
var allowScroll = true; //Allow scroll depending on with of carousel

var min_move = wrapper.getStyle(“width”).toInt() – max_margin + 10; //Work out the maximum margin to move the carousel to

//Check to see if the carousel is less then the wrapper if so don’t allow any scrolling
if (max_margin < wrapper.getStyle("width").toInt()) {
allowScroll = false;
}

// Set up the animation
var animation = new Fx.Tween(carousel, {duration: 1000});

// The function to browse forward(right)
function next_item(pos){
if(pos >= -max_margin){
animation.start(‘left’, 0);
}
}

// The function to browse backward(left)
function previous_item(pos){
if(pos <= 0){
animation.start('left', min_move);
}
}

// Set up the 'next' and 'previous' buttons only allow if allowScroll = true
$('left').addEvent('mouseover', function(){
if (allowScroll == true) {
var position = parseInt(carousel.getStyle('left'));
previous_item(position);
}

});

$('right').addEvent('mouseover', function(){
if (allowScroll == true) {
var position = parseInt(carousel.getStyle('left'));
next_item(position);
}
});

$('left').addEvent('mouseout', function(e){
animation.cancel();
});

$('right').addEvent('mouseout', function(e){
animation.cancel();
});