cooking, programming and everyday life
xrado
Thursday, August 14, 2008
firefox & opera and blinking web pages with embeded flash
Wednesday, August 13, 2008
javascript form validator with combining rule set
VALIDATE FUNCTION:
function validate(form) {
var send = true;
var f,fl,vl,vll,op,opl,pat;
for(f = 0, fl = form.length; f < fl; f++) {
if(form[f].className.match('fail')) form[f].className = form[f].className.replace(/fail+/gi,'');
if(form[f].type=='checkbox') form[f].parentNode.className = form[f].parentNode.className.replace(/fail+/gi,'');
if(form[f].getAttribute('valid')) {
var valid = form[f].getAttribute('valid').split(" ");
for(vl = 0, vll = valid.length; vl < vll; vl++) {
var check = valid[vl].split("-");
switch(check[0]) {
case 'req': if(!form[f].value.length) { form[f].className +=' fail'; send = false; } break;
case 'minlen': if(form[f].value.length < check[1]) { form[f].className +=' fail'; send = false; } break;
case 'maxlen': if(form[f].value.length > check[1]) { form[f].className +=' fail'; send = false; } break;
...rules
}
}
}
}
return send;
}
On submit event triggers validate function which goes trough all form elements and checks valid attribute. If one or more rules are not true, form element gets class .fail which indicates invalid value. Some rules also takes argument via rule-arg syntax. For instance minlen-5 states for minimum string length 5 chars.RULES
| req | required ( length > 0 ) |
| minlen-x | minimum lenght |
| maxlen-x | maximum lenght |
| len-x | fixed lenght |
| max | maximum numeric value |
| min | minimum numeric value |
| num | numeric |
| notnum | not numeric |
| nosp | no spaces |
| alp | alphabetic |
| alpnum | alphanumeric |
| date | date (eu formating) |
| valid email | |
| money | money (numeric including ,.) |
| checked | is checked (for checkbox ) |
| selected | is selected (for selectbox ) |
| ip | ip address |
This are some rules i already defined, but you can easily extended it with your own.
USAGE
<html>
<head>
<script type="text/javascript" src="js/validate.js"></script>
<style> .fail { background: #DF5353; } </style>
</head>
<body>
<form action="" method="post" onsubmit="return validate(this)">
<table>
<tr>
<td width="100">name</td>
<td><input name="name" valid="req min-5 alp" type="text"></td>
</tr>
<tr>
<td width="100">number</td>
<td><input name="name" valid="num" type="text"></td>
</tr>
<tr>
<td>check</td>
<td><input name="true" valid="checked" type="checkbox"></td>
</tr>
<tr>
<td>fruit</td>
<td>
<select name="fruit" valid="selected">
<option></option>
<option>apple</option>
<option>bannan</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input value="submit" type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
If we look first field example valid has "req min-5 alp", this means that field is required to bi filled, with at least 5 characters that are alphabetic. If all those rules are true field value is valid.DEMO
I like this script a lot. Its small and gives you easy client side form validation ( don't forget about server side ). It can sure be improved, with like error messages, but I'll leave that up to you. I like it simple.
Download: source
Friday, July 25, 2008
mooFader2
DEMO PAGE
head:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moofader.js"></script>
<script>
var images = Array('<?=implode("','",glob('images/*.JPG'));?>');
window.addEvent('load', function(){ new mooFader('fader',images); } );
</script>
html:
<div style="position: relative; width: 390px; height: 390px;" id="fader"> <img src="images/rado.JPG"> </div>script:
var mooFader = new Class({
Implements: [Events, Options],
options:{
duration: 2000,
fade: 1000
},
initialize: function(el,im,options) {
this.setOptions(options);
this.holder = $(el);
if(!this.holder) return;
this.starter = this.holder.getElement('img');
this.starter.setStyle('position','absolute');
this.im = im;
this.faders = [];
this.images = im.length;
this.counter = 0;
this.change.periodical(this.options.duration,this);
new Asset.image(this.im[this.counter]);
},
change: function(){
if(this.counter > this.images-1) this.counter = 0;
var img = new Element('img',{
'src' : this.im[this.counter],
'styles': { 'position':'absolute' }
}).injectTop(this.holder);
var fader = img.getNext();
new Fx.Tween(fader,{ duration:this.options.fade, onComplete: function(el){ fader.dispose(); } }).start('opacity', 1, 0);
this.counter++;
new Asset.image(this.im[this.counter]);
}
});
Wednesday, June 18, 2008
dd-wrt rocks
What can i say, if your home router that is supported you can't go wrong with dd-wrt
installation wiki: http://www.dd-wrt.com/wiki/index.php/Installation
