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!

Freelance

Richard — Tue, 25 Nov 2008 21:18:02 +0000

Most evenings during the week I am free for a few hours so feel its time to try get some little bits and pieces of extra work

Just put it out there if any one is in need of any web work – site updates, site creation, funky JavaScript effects, bit of php here and there anything at all really get in touch.

JShop Review

Richard — Thu, 30 Oct 2008 23:16:13 +0000

Ecommerce is something I haven’t really covered in any huge depth before but along came the opportunity at work to get stuck into making a shop online. At my old company we were about to start a site using JShop but the time came to move on. So a few weeks into my new job along came a project – an ecommerce site in JShop.

From my initial introduction into the backend of the system it seemed a little daunting but once you get used to where everything is, it all becomes a lot simpler – it also helps if you get yourself a copy of manual to flick through great little reference throughout the project, also if you have someone who has used the system before (cheers Pete) will help.

Most things you could possibly want to customize are included such as custom fields, extra fields for products/sections etc also you can turn desired functionality on and off with a flick of a switch in the backend – shipping type, tax etc. This makes for minimal need for hacks to both the core code and database which makes the implementation of JShop simple and easy.

Saying that if you do require to add code this is straightforward as long as you know your stuff (php/javascript), the code is clearly laid out so when I did need to make a simple tweak there wasn’t too much pain involved. Although I would advise not hacking too much as one it isn’t supported by Jshop – two it could hinder any future updates – which are free once you have purchased the license. I guess with custom code its knowing when you have added too much… always comment what’s been added you can always remove for an update and add back in.

Once you have mastered the backend functionality the only thing left is the templating system which is one of the best things I have worked with easy enough for a non developer to understand. Making loops/if else simple and adding anything returned from the database as easy as {customer.name} which allows you to create any look and feel you could possibly want. This is fairly laborious task but taking each page one at a time and adding your own styles the site soon comes together it would take a considerable amount of time to knock up each template from scratch.

I’m yet to decide if to start fresh css as wise as it doesn’t make the best use of it, a lot of time was spent adjusting font sizes, colours, sizes but for speed adjusting the two css files works just fine – the css is never going to be 100% but it works just fine…

If you do purchase and need any support the forums are fairly handy but the email support is even better I emailed with a fairly complex problem and the guys on there support team knocked up a template in order for me to allow me to achieve what I needed to… worth every penny!!

To sum up I would highly recommend this for any kind of shop you could want, a lot of thought has gone into what a shop might what to do and this is all made available – out of the box. This then allows you to spend your time adjusting templates to your own look and feel. The checkout process is smooth and clear it gives the customer complete control over there orders… Within the system I don’t think there is anything else you could possibly want to add unless you had really specialist processes involved in your order process if you want a shop online this gives you exactly that I don’t think you could want more – unless you are picky with minor details. The likes of play/amazon aren’t going to offer much more functionality wise (related products/reviews etc) to that what Jshop is going to offer, even if the processes might be slightly different.

To create something similar would take at least 5+ months development time perhaps…. With JShop out of the box to live site 15/20 days dev time the next one would be quicker.

You do the maths….

Check JShop out

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();
});