Tag Archive for mootools

MOOTOOLS JS – Clear input field onClick onFocus on click focus active

// 201004291250 - Mootools clear input on focus, return default value if no data entered
// FROM:  Clear text field with mootools on focus. - MooTools Users | Google Groups <a href="http://bit.ly/cHPev3" >http://bit.ly/cHPev3</a>

/* 
	I've got this snippet that will clear the value on focus and if the value of 
	the focus is '' it will put the default value again in the input. You will 
	need the default value to be on an attribute of the input, like alt or 
	anyother (if you don't bother about validation). 
	
	Fábio Miranda Costa 
	Engenheiro de Computação 
	<a href="http://meiocodigo.com" >http://meiocodigo.com</a> 

*/

// FUNCTION: 

Element.implement({ 
    clearFocusResetBlur: function(attr){ 
        var valueString = this.get(attr); 
        this.addEvents({ 
            'focus': function(){ 
                if( this.get('value') == valueString ) this.set('value',''); 
            }, 
            'blur': function(){ 
                if( this.get('value') == "" ) this.set('value',valueString); 
            } 
        }); 
    } 
}); 


// Usage
// HTML: 
// <input id="input_id" value="some value" alt="default value" /> 


// JS: 
$('.jform form .cleardefault').set('alt','value').clearFocusResetBlur('alt');

source

automatically send external links to new window with mootools

window.addEvent('domready', function() {
    // modified from <a href="http://joesong.com/2009/11/external-links-in-new-window-passive-and-with-mootools/" >http://joesong.com/2009/11/external-links-in-new-window-passive-and-with-mootools/</a> 
    // to avoid using the 'target' attribute, which is not part of xhtml 1.0 strict
    var currentDomain = window.location.host;
    $(document.body).addEvent('click', function(evt) {
	var target = $(evt.target);
	if (target.get('tag') !== 'a') {
	    target = target.getParent();
	}

	if (target && target.get('tag') === 'a' && target.get('href').test('http') && !target.get('href').test(currentDomain)) {
	    window.open(target.get('href'), '_blank');
	    return false;
	}
    });
});

source

Connect to Bit.ly API with MooTools

/**
 * author : Stephane P. Pericat
 * date : 2010-03-02
 */

var link = "<a href="http://www.snipplr.com/";" >http://www.snipplr.com/";</a>
var slink = null;

var short = new Request.JSONP({
    url: '<a href="http://api.bit.ly/shorten'," >http://api.bit.ly/shorten',</a>
    callbackKey: 'callback',
                    
    onSuccess: function (result) {
        slink = result['results'][''+link+'']['shortUrl'];
        console.log(slink)
    },
    data: {
        version: '2.0.1',
        longUrl: link,
        login: 'username',
        apiKey: 'R_dd761983d39ab216af226a19756496d3',
        format: 'json'
    }
}).send();

source

Getting Video For Everybody working without encoding an OGG

checkVideo: function() {
	var videoElement = document.getElement('video');
	var supportsVideo = !!(videoElement.canPlayType);

	if(!supportsVideo && (Browser.Plugins.Flash.version < 9 || (Browser.Plugins.Flash.version == 9 && Browser.Plugins.Flash.build < 60))) {
		var warning = new Element('div', {
			'class': 'warning',
			'html': '<p>Please <a href="<a href="http://www.adobe.com/go/getflash">update" >http://www.adobe.com/go/getflash">update</a> Flash</a> or <a href="<a href="http://www.apple.com/quicktime/download/">QuickTime</a>" >http://www.apple.com/quicktime/download/">QuickTime</a></a> if you can&rsquo;t see the video on the right</p>'
		});

		warning.inject(videoElement.getParent().getParent(), 'bottom');
	} else if(supportsVideo && !videoElement.canPlayType('video/mp4')) {
		// Browser can't play MP4 in the video tag
		var fallback = videoElement.get('html'); // Get fallback content (QuickTime and Flash object tags)
		videoElement.getParent().set('html', fallback); // Replace the video tag with the fallback content
	}
}

source

Foucs/Blur für Formlarteste (hier moo)

$('name').addEvent('focus', function(){ if(this.value=='name') this.value=''; }); $('name').addEvent('blur', function(){ if(this.value=='') this.value='name'; }); $('email').addEvent('focus', function(){ if(this.value=='e-mail') this.value=''; }); $('email').addEvent('blur', function(){ if(this.value=='') this.value='e-mail'; }); $('message').addEvent('focus', function(){ if(this.value=='message') this.value=''; }); $('message').addEvent('blur', function(){ if(this.value=='') this.value='message'; }); });

source

Mootools – Assets.Images

var loadImages = function(strSelector)
{
var arrImages = $(strSelector).getElements('img');
var arrSources = [];
arrImages.each(function(eleImage) {
arrSources.push(eleImage.get('src'));
});

new Asset.images(arrSources, {
onComplete: function() {
var objChain = new Chain;
arrImages.each(function(eleImage) {
objChain.chain(function() {
eleImage.set('tween', {
duration: 300
}).tween('opacity', 0, 1);
this.callChain.delay(100, this);
});
});
objChain.callChain();
}
} );
}

window.addEvent(
'domready',
function()
{
loadImages( $('images') );
}
);

source

Easy scroll to bottom

<!-- the scripty script -->

<script type="text/javascript">
window.addEvent("domready", function() {
var scroll = new Fx.Scroll(window);
$('browse').addEvent('click', function() {
scroll.toBottom();
});
});
</script>

<!-- sample html -->

<a href="javascript:void('false');" id="browse">Look at stuff below</a>

source

remove onfocus dotted outline from clicked link images

window.addEvent("domready", function() {
$$('a img').each(function(el) {
el.addEvent('focus', function(e) {
this.blur();
});
});
});

source

Create a Custom “:checked” Pseudo Selector for MooTools 1.2

Selectors.Pseudo.checked = function(){
return (this.get('tag') == 'input' && (this.get('type').toLowerCase() == 'radio' || this.get('type').toLowerCase() == 'checkbox') && this.checked);
};

source

Javascript mootools script add

		<script type="text/javascript" src="mootools.js"></script>

source