cooking, programming and everyday life xrado

Friday, October 17, 2008

firefox only includes styles form .css files

Tested with firefox 3.0.3, i don't know about previous versions. For instance, try to rename style.css to style.txt and include it into html header. Firefox show no style applied, while Internet Explorer 7 had no problems including .txt styles. I don't know why is that so, is this a bug or intended behaviour. I think that styles should be included regardless file extension, otherwise header link tag type=text/css have no meaning.

Thursday, August 14, 2008

firefox & opera and blinking web pages with embeded flash

I don't know if this only happens in FF3 and Opera 9.5 or even in earlier versions, but when you are clicking on web site with embedded flash the whole site blinks, like it is redrawn again. If i describe you in a slow motion, it first shows the white background and then the page. For instance, open youtube and try clicking on videos thumbnails on a side. Do you see the blinking? This must be some kind of browser or maybe even flash bug, because IE and Safari are rendering pages just fine. Its also interesting that this only happens on windows, meanwhile same browser in linux rendering just fine. Tested with firefox 3.0.1 and opera 9.5 and flash player 9.0 r124.

Wednesday, August 13, 2008

javascript form validator with combining rule set

This is actually an old script i made about two years ago. I got the idea form the style classes combining. I thought it would bi nice to have ability to combine some common rules like classes. Instead of class that is used for styles i added new attribute "valid" to each form element that have to be validated. Background colour has shown to be the best choice for error indicator (.fail class), because border style can't be applied to all form element at least in old browsers (like IE).

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

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)
email 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.

	<script type="text/javascript" src="js/validate.js"></script>
	<style> .fail { background: #DF5353; } </style>

<form action="" method="post" onsubmit="return validate(this)">
		<td width="100">name</td>
		<td><input name="name" valid="req min-5 alp" type="text"></td>
		<td width="100">number</td>
		<td><input name="name" valid="num" type="text"></td>
		<td><input name="true" valid="checked" type="checkbox"></td>
			<select name="fruit" valid="selected">
		<td><input value="submit" type="submit"></td>
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.


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


mootools 1.2 is out for quite a while now, so i decided to update mooFader to work with the latest moo framework. hope you like it

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moofader.js"></script>
var images = Array('<?=implode("','",glob('images/*.JPG'));?>');
window.addEvent('load', function(){ new mooFader('fader',images); } );
<div style="position: relative; width: 390px; height: 390px;" id="fader">
	<img src="images/rado.JPG">
var mooFader = new Class({

	Implements: [Events, Options],

		duration: 2000,
		fade: 1000

	initialize: function(el,im,options) {
		this.holder = $(el);
		if(!this.holder) return;
		this.starter = this.holder.getElement('img');
		this.starter.setStyle('position','absolute'); = im;
		this.faders = [];
		this.images = im.length;
		this.counter = 0;
		new Asset.image([this.counter]);

	change: function(){
		if(this.counter > this.images-1) this.counter = 0;
		var img = new Element('img',{
			'src'	:[this.counter],
			'styles': { 'position':'absolute' }
		var fader = img.getNext();
		new Fx.Tween(fader,{ duration:this.options.fade, onComplete: function(el){ fader.dispose(); } }).start('opacity', 1, 0);
		new Asset.image([this.counter]);

Wednesday, June 18, 2008

dd-wrt rocks

Today i have flashed my asus wl-500gx with dd-wrt software and i must say I'm amazed how good it works. Actually i wasn't intending to, but asus offical firmware update failed so i tried dd-wrt. Flashing was easily done from linux console with tftp, but before you do it leave instructions page open, otherwise you might end up with dead router and no instructions to recover. Current software version v24 have every thing you need and a lot more, with very clean and simple web interface. The nicest are graphs (load, memory usage, bandwidth,.. ) which are auto refreshing so you see live picture of router status.

What can i say, if your home router that is supported you can't go wrong with dd-wrt
installation wiki:

pages:  1   2   3   4   5   6   7   8   9   10