Archive for 'javascript'
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
…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>
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); }); });…
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,$$);
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);…




