Davide Caffaratti blog

Here is my Mootools class that I use for make edit in place text.

VIEW THE EXAMPLE FILE

Use this class is very simple:

First need to have mootools 1.2 javascript library
Second download MooEip class

(more…)

New version of moo-skype

• Add var ajaxProxy for set ajax proxy
  
• Add css file for style the skype buttom

Add onLine example :

VIEW THE EXAMPLE FILE

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')});

Here is my Mootools class that I use for swap the source of an image with the

same filename + ‘_over’ before the extension (‘img.jpg’ will be
‘img_over.jpg’) work fine in firefox3, safari for windows, internet explorer 7.
Use this class is very simple:

First need to have mootools 1.2 javascript library
Second download MooSwap class

The class:

var MooSwap = new Class({

//implements
Implements: [Options],

options: {
imgHoverPrefix: '_hover'
},

initialize: function(elements, options) {
//set options
this.setOptions(options);
// Set elements
this.setSwap(elements);
},

setSwap: function(elements) {

var prefix = this.options.imgHoverPrefix;

// preload images array
imgTemp = [];
i = 0;

$$(elements).each(function(el) {
var mouseFx = new Fx.Tween(el, {duration: 240, wait: false});

var holdSrc = el.getProperty('src');
var extension = holdSrc.substring(holdSrc.lastIndexOf('.'),holdSrc.length);
var newSrc = holdSrc.replace(extension, prefix + '' + extension);

// set new image for preloading
imgTemp[i] = new Asset.image(newSrc, {'alt':el.getProperty('alt'),'id':el.getProperty('id')});
//imgTemp[i] = new Element('img', {'alt': el.getProperty('alt')}).set('src', newSrc);

// default link on current img element
var link = el;

// check if there is a link a href parent
var test = el.getParent('a');
if (test) {
var link = test.setProperty('id', '__link_' + i);
}

link.addEvents({
mouseover: function() {
el.setProperty('src', newSrc);
},
mouseout: function() {
el.setProperty('src', holdSrc);
}
});

i++;
});
}
});

The javascript in the page:

<script src="mootools-1.2.2-core.js" type="text/javascript"  charset="utf-8"></script>
<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
var swap = new MooSwap('.fade img', { imgHoverPrefix:'_hover' });
});
//]]>
</script>

The html

<ul class="fade">
<li><img src="my-image.jpg" alt="my title" /></li>
<li><a href="http://mylink/"><img src="my-image-1.jpg" alt="my title 1" /></a></li>
</ul>

Need to have valid
my-image_hover.jpg and my-image-1_hover.jpg

That’s all

Class Cat Prototype Edit Inline

Simple class for “edit in line” with prototype javascript library.

Click HERE for see the code of this class

Here is an example to use this class:

< ?php
// Include the library
include(cat-prototype.inc.php');

$eip = new Cat_Edit_Inline('js/', $_SERVER['PHP_SELF'].'?ajax=on');

// Check if there is an ajax request return false if there isn't data return false
$request = $eip->getAjaxDatas();

if ($request && isset($_GET['ajax'])) {
// set php header
$this->setHeaderPhp(false, true);

// empty id
if (!isset($request['id']) || !isset($request['option_id'])) {
print("Incorrected datas - No id sent !");
}
// continue
else {
// Update the database
/* update_function(); */

// Print text
print ($request['content']);
}
}
// No ajax data sent
else {
// Set default size of textarea
$this->setInitEditOptions('size', 80);
// Setto default cols of textarea
$this->setInitEditOptions('cols', 60);
// Set saving_text
$this->setInitEditOptions('saving_text', 'Saving...');
// Set text field
$this->setElement(array('id'=>'field_name','ajax_data'=>array('option_id'=>1)));
// Set body text
$bodyOptions = array('html_start'=>"<em>description of the field</em>");
// Set body element
$this->setElementBody('option_name', 'option_value', $bodyOptions);
// Set textarea field
$this->setElement(array('id'=>'field_name', 'type'=>'textarea', 'ajax_data'=>array('option_id'=>2)));
// Set body textarea
$bodyOptions = array('html_start'=>"<em>description of the field</em>");
// Set body element
$this->setElementBody('option_name', 'option_value', $bodyOptions);
// Select / Option yes / no
$optionsSelect = array('yes'=>'yes', 'no'=>'no');
$this->setElement(array('id'=>'field_name', 'type'=>'select', 'options'=>$optionsSelect, 'ajax_data'=>array('option_id'=>2)));
// Set body select
$bodyOptions = array('html_start'=>"<em>description of the field</em>");
// Set body element
$this->setElementBody('option_name', 'option_value', $bodyOptions);
// Inizialize class
$eip->initEditInline();
// Get header havascript e css
$header = $eip->getJavascript().$eip->getCss();

echo
"< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Eip demo".
$header."
</head>
<body>

<h1>Eip Demo</h1>
<div>
".$eip->getBody()."
</div>

</body>
</html>";
}
?>