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 ;)
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
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]);
}
});
i needed one for the website i was working on, so i made small class that works with mootools 1.11.
head:
<script type="text/javascript" src="mootools-1.11.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({
options:{
duration: 3000,
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.Style(fader,'opacity',{ duration:this.options.fade, onComplete: function(el){ fader.remove(); } }).start('1', '0');
this.counter++;
new Asset.image(this.im[this.counter]);
}
});
mooFader.implement(new Options, new Events);
Demo page can be found here.
You all probably know lightbox image popup,.. ok ..this is my simple version of it, using mootools 1.2.
DEMO
Features:
- gallery functions (next, previous image)
- direct link to certain image popup
- image description via title
- no extra css or images needed, except progress bar (optional)
- aware of linux flash non transparency
- fully custom able
- no effects ..not really a feature..but i like it this way
tested & working : firefox, opera, internet explorer, safari, konqueror
Default options
options:{
classname: 'imgbox',
overlay_bg: '#000000',
overlay_opacity: '0.6',
rbox_bg: '#ffffff',
controls_color: 'red',
numberof_color: '#333333',
title_color: '#ffffff',
thumb_url: 'size=thumb',
image_url: 'size=large',
progressbar: '',
margin_top: '20px'
},
Usage
1. Include imgbox.js and mootools.js (DomReady, Selectors, Element.Dimensions, Element.Styles and deps) to header
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imgbox.js"></script>
2. Add class 'imgbox' (or the one you want) to images you want to popup
<img src="small_image.jpg" class="imgbox" title="image description">
3.Add this line some where on your page (within script tags) or add it directly to imgbox.js
window.addEvent('domready', function(){ new imgBox({}); });
Example with options
window.addEvent('domready', function(){
new imgBox({
thumb_url: 'small_',
image_url: 'big_'
});
});
thumb_url and image_url set the differences in thumbnail and popup image path that will be switched/replaced. For example if you have thumbnail image with name small_12.jpg, the popup will show big_12.jpg.
I hope you like the script. Feel free to use it on your site. If you have an idea how to improve it, let me know.
Download: imgbox.js
