These days i was working on a project, where i needed dynamically loading select boxes. I first tried mootools native methods like removing and injecting new option elements in to select element. That worked just fine in FF, but as you expect in IE did not. IE's select box stood unchanged. I remember while ago i have to re-inject the whole select box to see the changes in IE.
According to DOM, there is a better way. HTMLSelectElement support add and remove method that work in all major browsers. So i have implemented three basic methods for mootools Element class.
Element.implement({
removeAllOptions: function() {
if(this.get('tag')!='select') return this;
for(var i=this.options.length-1;i>=0;i--) this.remove(i);
return this;
},
addOption: function(text,value) {
if(this.get('tag')!='select') return this;
var optn = new Element('option');
if(text) optn.text = text;
if(value) optn.value = value;
this.options.add(optn);
return this;
},
removeOption: function(prop,value){
if(this.get('tag')!='select') return this;
for(var i=this.options.length-1;i>=0;i--) {
if (prop=='selected' && this.options[i].selected) this.remove(i);
if (prop=='value' && this.options[i].value==value) this.remove(i);
if (prop=='text' && this.options[i].text==value) this.remove(i);
if (prop=='index' && i==value) this.remove(i);
}
return this;
}
});
Methods hopefully already explaining their self.
USAGE
// remove all options or empty select box
$('selectbox').removaAllOptions();
// add options, one after another
$('selectbox').addOption('One',1).addOption('Two',2).addOption('Two',3);
// removing options
$('selectbox').removeOption('text','One');
$('selectbox').removeOption('value',2);
$('selectbox').removeOption('selected');
$('selectbox').removeOption('index',0);
happy selecting ;)
I've already wrote about "
firefox only includes styles form .css files" and I found out that isn't quite true. Actually firefox doesn't care about the css file extension, but only relay on header
Content-Type: text/css. If you as usual have .css file, apache will take care of right content-type, otherwise you will have to take care about it.
header('Content-Type: text/css');I came across this when i was writing this script:
## combine.php
// Define path prefix
$prefix = realpath('.');
if($_GET['js']) {
header('Content-Type: application/x-javascript');
$data = Array('path'=>$prefix.'/template/js/','files'=>$_GET['js'],'ext'=>'.js');
} elseif($_GET['css']) {
header('Content-Type: text/css');
$data = Array('path'=>$prefix.'/template/styles/','files'=>$_GET['css'],'ext'=>'.css');
} else exit();
foreach(explode(',',$data['files']) as $file) {
if($file && file_exists($data['path'].$file.$data['ext'])) readfile($data['path'].$file.$data['ext']);
}Simple few lines of code, but already do the trick. That will minimise
number of server requests and benefit in faster page loading.
Defining the path and file extension is important, otherwise you may expose some other scripts source or even worse, some system files.
Usage in page head<link rel="stylesheet" type="text/css" href="combine.php?css=style,forms" />
<script type="text/javascript" src="combine.php?js=mootools,validate,fx"></script>
Hope you like it, otherwise If you want more advanced solution try
minify.
cheers
FireSpider is a an extension for Firebug that can help you find broken or misleading urls and optimize your web page for search engines. Extension enables you start and the stop the spider. After pressing the
start button it fetch the current url and parses the content for new
urls. Every unique url is fetch only once. It follows only the current
domain urls and detects its content type. Not html content types are
reported. Besides fetching, firebug panel gives you information
about page title, page where url was got from, its link name and
loading time. Reported are also not found urls and ones went in time
out after 10 seconds. Requests are send one after another, so some sites
may find it to aggressive or may detect you as a dangerous script. Be careful.
This is the first version (hope not the last) and first extension i ever made. Some things may not be very well done, but the basic functionalities are working, i think. Try it and tell me what you think. Hope you find it useful.
firespider-0.1.xpi ( download / install )
FireSpider on GitHub
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).
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) |
| 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.
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
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
DEMO PAGE
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]);
}
});
download
source
tags:
javascript
mootools
