sastgroup.com

Filtrare checkbox con MooTools!

Posted on 05. Feb, 2010 by daniele.

0

Grazie a questo semplicissimo script MooTools, sarà possibile filtrare le checkbox digitatndo la parola interessata all'interno di un input!

 
<ul id="my-list">
<li>
<input type="checkbox" id="chkADDRESS" /> <label for="chkADDRESS">ADDRESS</label></li>
<li>
<input type="checkbox" id="chkAPPLET" /> <label for="chkAPPLET">APPLET</label></li>
<li>
<input type="checkbox" id="chkAREA" /> <label for="chkAREA">AREA</label></li>
<li>
<input type="checkbox" id="chkA" /> <label for="chkA">A</label></li>
<li>
<input type="checkbox" id="chkBASE" /> <label for="chkBASE">BASE</label></li>
<li>
<input type="checkbox" id="chkBASEFONT" /> <label for="chkBASEFONT">BASEFONT</label></li>
<li>
<input type="checkbox" id="chkBIG" /> <label for="chkBIG">BIG</label></li>
 
<!-- ... more ... -->
</ul>

 
 
/* usage */
window.addEvent('domready',function() {
var myFilter = new ElementFilter('search-term', '#my-list label', {
trigger: 'keyup',
cache: true,
onShow: function(element) {
$(element.get('for')).checked = true;
},
onHide: function(element) {
$(element.get('for')).checked = false;
}
});
});

Fonte: http://davidwalsh.name/checkbox-filter

…

Continue Reading

Effetto particelle in jQuery

Posted on 18. Sep, 2009 by daniele.

0

Demo: http://nettutsplus.s3.amazonaws.com/31_fireflyEffect/demo%20and%20source/index.htm

 
<script type="text/javascript">
function Particle() {
	this.path = 'images/';
	this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png'];
 
//	Randomly Pick a Particle Model
	this.image = this.images[randomInt(this.images.length)];
	this.file = this.path + this.image;
 
//	Create a Particle DOM
	this.element = document.createElement('img');
 
	this.speed().newPoint().display().newPoint().fly();
};
 
//	Generate Random Speed
Particle.prototype.speed = function() {
	this.duration = (randomInt(10) + 5) * 1100;
 
	return this;
};
 
//	Generate a Random Position
Particle.prototype.newPoint = function() {
	this.pointX = randomInt(window.innerWidth - 100);
	this.pointY = randomInt(window.innerHeight - 100);
 
	return this;
};
 
//	Display the Particle
Particle.prototype.display = function() {
	$(this.element)
		.attr('src', this.file)
		.css('position', 'absolute')
		.css('top', this.pointY)
		.css('left', this.pointX);
	$(document.body).append(this.element);
 
	return this;
};
 
//	Animate Particle Movements
Particle.prototype.fly = function() {
	var self = this;
	$(this.element).animate({
		"top": this.pointY,
		"left": this.pointX,
	}, this.duration, 'linear', function(){
		self.speed().newPoint().fly();
	});
};
 
function randomInt(max) {
//	Generate a random integer (0 < = randomInt < max)
	return Math.floor(Math.random() * max);
}
 
$(function(){
	var total = 50;
	var particles =…

Continue Reading

Sostituire una stringa in Javascript

Posted on 17. Sep, 2009 by daniele.

0

 
<script>
var replaced = 'Sastgroup, Tutorials guide scripts su flash php javascript dhtml programmazione web tool'.replace('Sastgroup','sastgroup.com');
alert(replaced);
</script>

Continue Reading

[Css-jQuery] Effetto scala grigi all’hover dell’immagine

Posted on 16. Sep, 2009 by daniele.

0

CODICE HTML

 
<ul class="gallery">
<li>
		<a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Image Name</a></h2>
</li>
</ul>

CODICE CSS

 
ul.gallery {
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0; padding: 0;
}
ul.gallery li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
	width: 204px; /*--Width of image--*/
	height: 182px; /*--Height of image--*/
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform:…

Continue Reading

Imparare ad utilizzare i cookie con javascript

Posted on 15. Sep, 2009 by daniele.

0

 
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<link type="text/css" rel="stylesheet" href=""/>
	<script>
 
	$(document).ready(function () {
 
		//for debugging purpose, so that you can see what is in the menu cookie
		$('#debug').html('Cookie Content : ' + readCookie('menu'));
 
		//if cookie menu exists
		if (readCookie('menu')) {
 
			//loop through the menu item
			$('#menu a').each(function () {
				//match the correct link and add selected class to it
				if ($(this).html() == readCookie('menu')) $(this).addClass('selected');
			});	
		}
 
		$('#menu a').click(function () {
 
			//Set the cookie according to the text in the link
			createCookie('menu', $(this).html(),1);
		});
 
	});
 
	/* Cookie Function…

Continue Reading

Incrementare e decrementare i valori di un input con MooTools!

Posted on 15. Sep, 2009 by daniele.

0

CODICE CSS

 
label                               { font: bold 20px Helvetica, sans-serif; display: block; float: left; text-align: right; padding: 5px 10px 0 0; width: 140px; }
input[type=text]                    { float: left; width: 40px; font: bold 20px Helvetica, sans-serif; padding: 3px 0 0 0; text-align: center; }
form div                            { overflow: hidden; margin: 0 0 5px 0; }
.button                             { margin: 0 0 0 5px; text-indent: -9999px; cursor: pointer; width: 29px; height: 29px; float: left; text-align: center; background: url(increment-buttons.png) no-repeat; }
.dec                                { background-position: 0 -29px; }
#submit                             { margin: 15px 0 0 95px; font: 20px Helvetica, sans-serif; padding: 5px 10px 3px 10px; border: 1px solid black; background: #eee; }
#submit:hover                       { background: #ccc; }

CODICE JAVASCRIPT

 
window.addEvent('domready',function() {
	$$('form div').each(function(div) {
		var input = div.getFirst('input');
		var upButton = new Element('div',{
			text: '+',
			'class': 'button',
			events: {
				click: function() {
					input.value = input.value.toInt() + 1;
				}
			}
		}).inject(div);
		var downButton = new Element('div',{
			text: '-',
			'class': 'button dec',
			events: {
				click:function() {
					var val = input.value.toInt();
					if(val != 0) {
						input.value = val - 1;
					}
				}
			}
		}).inject(div);
	});
 
});

…

Continue Reading

Effetto Page Peel con MooTools!

Posted on 09. Sep, 2009 by daniele.

0

CODICE XHTML

 
<div id="page-flip">
	<a href="http://www.sastgroup.com/feed"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" /></a>
<div id="page-flip-message"></div>
</div>

CODICE CSS

 
#page-flip { position:relative; right:0; top:0; float:right;  }
#page-flip-image { width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic; }
#page-flip-message { width:50px; height:50px; overflow:hidden; position:absolute; right:0; top:0; background:url(subscribe.png) no-repeat right top; }

CODICE MOOTOOLS

 
(function($,$$) { window.addEvent('domready',function() {
 
	var flip = $('page-flip');
	var flipImage = $('page-flip-image');
	var flipMessage = $('page-flip-message');
 
	flip.addEvents({
		mouseenter:function() {
			$$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({
				width: 307,
				height: 319
			});
		},
		mouseleave:function() {
			flipImage.set('morph',{ duration: 220 }).morph({
				width: 50,
				height: 52
			});
			flipMessage.set('morph',{ duration:200 }).morph({
				width: 50,
				height:50
			});
		}
	});
}); })(document.id,$$);