textarea {
float: left;
background: #f8f8f8;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
padding: 0.3em;
margin-top: 10px;
overflow: auto;
}
#log {
float: left;
padding: 0.5em 0em 0.2em;
margin-left: 10px;
width: 290px;
height: 50px;
border: 1px solid #d6d6d6;
border-left-color: #e4e4e4;
border-top-color: #e4e4e4;
margin-top: 10px;
visibility: hidden;
font-size: 25px;
font-weight: bold;
text-align: center;
}
window.addEvent('domready', function() {
var textarea = $('myTextarea'), log = $('log');
// We define the highlight morph we're going to
// use when firing an event
var highlight = new Fx.Morph(log, {
duration: 1500,
link: 'cancel',
transition: 'quad:out'
});
// Here we start adding events to textarea.
// Note that 'focus' and 'keyup' are native events, while 'burn'
// is a custom one we've made
textarea.addEvents({
focus: function() {
// When focusing, if the textarea contains value "Type here", we
// simply clear it.
if (textarea.value.contains('Type here')) textarea.value = '';
},
keyup: function() {
// When user keyups we check if there are any of the magic words.
// If yes, we fire our custom event burn with a different text for each one.
if (textarea.value.contains('hello')) textarea.fireEvent('burn', 'hello world!');
else if (textarea.value.contains('moo')) textarea.fireEvent('burn', 'mootools!');
else if (textarea.value.contains('pizza')) textarea.fireEvent('burn', 'Italy!');
else if (textarea.value.contains('burn')) textarea.fireEvent('burn', 'fireEvent');
// note that in case of 'delayed', we are firing the event 1 second late.
else if (textarea.value.contains('delayed')) textarea.fireEvent('burn', "I'm a bit late!", 1000);
},
burn: function(text) {
// When the textarea contains one of the magic words
// we reset textarea value and set the log with text
textarea.value = ''; log.set('html', text);
// then we start the highlight morphing
highlight.start({
backgroundColor: ['#fff36f', '#fff'],
opacity: [1, 0]
});
}
});
});
Elements Event Demo
Events
Introduction
This demo will show you how to: add multiple Events to an Element, create custom Events and fire an Event.
In below textarea you can type whatever. Typing one of listed "Magic Words" will cause Event "burn" to fire and starting an effect (see js code)
Magic Words to type: hello, moo, pizza, burn, delayed (this last one will fire after 1 second).
Type here...