sastgroup.com - Tutorials guide scripts web tool

CODICE HTML

 
<div id="live-preview-form" class="lp-block">
 
 
		<strong>Your Name:</strong>
<input type="text" name="name" id="name" value="" class="input" />
 
		<strong>Your Email:</strong>
<input type="text" name="email" id="email" value="" class="input" />
 
		<strong>Your Website:</strong>
<input type="text" name="website" id="website" value="" class="input" />
 
		<strong>Your Comment:</strong>
		<textarea name="comment" id="comment" class="input" rows="10"></textarea>
 
</div>
<div id="live-preview-display" class="lp-block">
<div id="lp-avatar"></div>
<div id="lp-name"></div>
<div id="lp-comment"></div>
</div>
 

CODICE CSS

 
.lp-block		{ width:400px; float:left; }
.lp-block input, .lp-block textarea { width:90%; }
#live-preview-display 	{ background:#eee; padding:10px; margin-left:50px; margin-top:20px; }
 
#lp-name { font-weight:bold; }
#lp-avatar { float:right; margin:0 0 20px 20px; }
#lp-comment { padding-top:10px; font-style:italic; line-height:19px; }
 

CODICE JAVASCRIPT/MOOTOOLS

 
(function($){
	window.addEvent('domready',function(){
		//the build process
		var build = function() {
			//vars (fields) and blocks
			var lpcomment = $('lp-comment'), lpname = $('lp-name'), lpavatar = $('lp-avatar');
			var name = $('name'), email = $('email'), website = $('website'), comment = $('comment');
 
			//comment
			lpcomment.set('text',comment.value);
			lpcomment.set('html',lpcomment.get('html').replace(/\n/g,''));
 
			//name & websites
			if(website.value && (website.value).test(/http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/)) {
				lpname.set('html','<a href="' + website.value + '">' + name.value + '</a> says:');
			}
			else {
				lpname.set('text',name.value + ' says:');
			}
			//gravatar
			if(email.value && (email.value).test(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/)) {
					var md5Email = MD5(email.value);
					lpavatar.set('html','<img src="http://www.gravatar.com/avatar.php?gravatar_id=' + md5Email + '&size=80&rating=G&default=http%3A%2F%2Fdavidwalsh.name%2Fwp-content%2Fthemes%2Fdavid-walsh%2Fgraphics%2Fcom.jpg" alt="' + lpname + '" />');
			}
		};
		//comment...easy
		$$('#live-preview-form input, #live-preview-form textarea').addEvents({
			keyup: build,
			blur: build
		});
	});
})(document.id);