sastgroup.com

Copia negli appunti cross-browser!

Posted on 15. Jun, 2010 by daniele.

Molti di voi sapranno che la funzione clipboardData di javascript funziona solamente con Internet Explorer. Fino a poco tempo fa si utilizzava Flash per riuscire a copiare il testo, ma con la versione 10 questa funzione è stata bloccata per motivi di sicurezza.

Oggi vi proponiamo Zero Clipboard, un piccolo javascript che crea un embed capace di copiare il testo anche con la versione 10 di Flash. Questo script è un po complicato da configurare, così ho voluto fare questo articolo per spiegarvi come fare.

1. Scaricate Zero Clipboard

2. Prima della chiusura del tab body incollate:

 
<script src="ZeroClipboard.js"></script>
 
<script>
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
var clip = new ZeroClipboard.Client();
 
clip.setText('');
 
clip.addEventListener('mouseDown', function(){
 var pre =…

Continue Reading

Filtrare checkbox con MooTools!

Posted on 05. Feb, 2010 by daniele.

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

Condividi su facebook

Continue Reading

Effetto particelle in jQuery

Posted on 18. Sep, 2009 by daniele.

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.

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

Condividi su facebook

Continue Reading

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

Posted on 16. Sep, 2009 by daniele.

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.

 
< !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.

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

Condividi su facebook

Continue Reading

Effetto Page Peel con MooTools!

Posted on 09. Sep, 2009 by daniele.

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,$$);
 

Condividi su facebook

Continue Reading

[jQuery] Creare uno slide dei prodotti in stile Apple

Posted on 06. Sep, 2009 by daniele.

 
<script src="jquery.js" type="text/javascript"></script>
 
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="ui.mouse.js" type="text/javascript"></script>
<script src="ui.slider.js" type="text/javascript"></script>
 

CODICE HTML

 
<div class="sliderGallery">
<ul class="items">
<li>Item one</li>
<li>Item two</li>
<li>Item three, etc...</li>
</ul>
<div class="slider">
    <!-- the handler to action the slide -->
<div class="handle"></div>
 
    <!-- labels appear against the slider, as pointers to the user -->
    <span class="slider-lb1">slider label 1</span>
    <span class="slider-lb2">slider label 2</span>
    <span class="slider-lb3">slider label 3</span>
  </div>
</div>
 

CODICE CSS

 
.sliderGallery {
    overflow: hidden;
    position: relative;
    padding: 10px;
    height: 160px;
    width: 960px;
}
.sliderGallery UL {
    position: absolute;
    list-style: none;
    overflow: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}
 
.sliderGallery UL LI {
    display: inline;
}
 
.handle {
    position: absolute;
    cursor: move;
    top: 0;
    z-index: 100;
    /* bespoke to your own solution */
    height: 17px;…

Continue Reading

Link Alert con MooTools

Posted on 04. Sep, 2009 by daniele.

 
var LinkAlert = new Class({
 
	//implements
	Implements: [Options,Events],
 
	//options
	options: {
		container: document.body,
		extensions: {},
		offsets: { x:6, y:-15 },
		preloadImages: true,
		protocols: {},
		sticky: false,
		onShow: function(el,image) {
			this.image.setStyle('display','');
		},
		onHide: function(el,image) {
			this.image.setStyle('display','none');
		}
	},
 
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		this.extensions = new Hash(this.options.extensions);
		this.protocols = new Hash(this.options.protocols);
		this.image = new Element('img',{
			src: '',
			styles: {
				position: 'absolute',
				top: -200,
				left: -200,
				visibility: 'hidden'
			}
		}).inject(document.id(document.body));
		//preload images, if necessary
		if(this.options.preloadImages) { this.preloadImages(); }
		//add the listeners
		this.addListeners(this.extensions,'$=','extensions');
		this.addListeners(this.protocols,'^=','protocols');
	},
 
	//give direction to links
	addListeners: function(items,sep,type) {
		//for every item
		items.each(function(image,extension,type) {
			//for every link of that type
			$$('a[href' + sep + '\'' + extension + '\']').each(function(el) {
				//if the same protocol, don't bother showing
				if(type == 'protocol' && window.location.protocol == extension + ':') { return; }
				//add the show/hide events
				el.addEvents({
					mouseenter: function(e) {
						//position the image and give it the proper SRC
						this.reposition(e).set('src',image);
						//fire the event
						this.fireEvent('show',[el,image]);
					}.bind(this),
					mouseleave: function(e) {
						//fire the event
						this.fireEvent('hide',[el,image]);
					}.bind(this)
				});
				//sticky?
				if(this.options.sticky) {
					el.addEvent('mousemove',function(e) {
						this.reposition(e);…

Continue Reading