Davide Caffaratti blog

I need for my cms a class that can print invoice payment in pdf format.

Wel I find a nice script for oscommerce ( http://www.oscommerce.com/community/contributions,5321/category,12/search,pdf_customer_invoice ) that have a nice view of  the pdf invoice; Than I port this script and make a class for use in all indipendent cms …

Here can download the example output of the invoice class:

Ininvoice pdf

(more…)

I made some modifications on the great scrip fValidator (http://pilon.nl) for charge with Assets only used languages files.

Add too a compressed version of the class.

This is my new little class fot print Skype button status with mootools library.

It have a nice effect for the button taken from http://davidwalsh.name/skype-mootools.

Thanks David Your site is a good reference for me

VIEW THE EXAMPLE FILE

(more…)

Little optimization for the class code and add optional transation for the images.

Add example in the zip file

VIEW THE EXAMPLE FILE

This is my simple class for make content slider more simple.

With this class can made multiple text slider and configure text, styles and more.

VIEW THE EXAMPLE FILE

var MooSlider = new Class({

Implements: [Options],

options: {
createToggle: true,
tagToggle: 'a',
cssHide: '.hide',
cssToggle: '.toggle',
slideDuration: 340,
slideMode: 'vertical',
slideTransitions: Fx.Transitions.Bounce.easeOut,
textOpen: '+ Open',
textClose: '- Close',
elementsOpen: []
},

initialize: function(elements, options) {
this.setOptions(options);

// Set elements
this.setSlide(elements);
},

setSlide: function(elements) {
var status = {
'true': this.options.textOpen,
'false': this.options.textClose
};

$$(elements).each(function(div){

var isClose = (this.options.elementsOpen.indexOf(div.getProperty('id')) == -1);

if (this.options.createToggle) {
var link = new Element(this.options.tagToggle, { 'html': isClose?this.options.textOpen:this.options.textClose, 'class': this.options.cssToggle.replace('.',''), 'style': 'cursor:pointer;' } ).inject(div, 'top');
}
else {
var link = div.getElement(this.options.cssToggle).setStyle('cursor', 'pointer').set('class', this.options.cssToggle.replace('.',''));
}

this.hide = div.getElement(this.options.cssHide);

var fx = new Fx.Slide(this.hide, {
duration: this.options.slideDuration,
mode: this.options.slideMode,
transition: this.options.slideTransitions
})

fx.addEvent('complete', function() {
link.set('html', fx.open?status[false]:status[true]);
});

if (isClose) {
fx.hide();
}
else {
fx.show();
}

link.addEvent('click', function(e){
e.stop();
fx.toggle();
});

}, this);
}
})

For init the class use this:

<script src="mootools-1.2.2-core.js" type="text/javascript"  charset="utf-8"></script>
<script src="mootools-1.2.2.2-more.js" type="text/javascript"  charset="utf-8"></script>
<script src="moo-slider-min.js" type="text/javascript"  charset="utf-8"></script>
<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
<pre id="line1">    var slider = new MooSlider('.slide', {
    createToggle: true,
    tagToggle: 'a',
    cssHide: '.hide',
    cssToggle: '.toggle',
    slideDuration:340,
    slideMode: 'vertical',
    slideTransitions: Fx.Transitions.Pow.easeOut,
    textOpen: '+ View more',
    textClose: '- Close more',
    elementsOpen: []
    });
});
//]]></pre>
</script>

And this is the html for the sliders contents:

<div class="slide">
<div class="hide">
<h1>Slide 1</h1>
This is my html code for this slide
</div>
</div>
<div class="slide">
<div class="hide">
<h1>Slide 2</h1>
This is my html code for this slide
</div>
</div>

I’ve see a very nice slideshow used for Jomla and want to use in my sites, but, the nice class was for mootools 1.1 … Here is the ported version for this nice slideshow

Correction for the swap images class:
Change the preload images at line 33

imgTemp[i] = new Element('img', {'alt': el.getProperty('alt')}).set('src', newSrc);

with

imgTemp[i] = new Asset.image(newSrc, {'alt':el.getProperty('alt'),'id':el.getProperty('id')});