
Si chiama Smartcrop ed è una libreria javascript che analizza un’immagine e restituisce le coordinate dell’area di maggior interesse, scartando tutto il resto. Continua a leggere
Ci sono 36 articoli con tag javascript (questa è la pagina 1 di 4).
Si chiama Smartcrop ed è una libreria javascript che analizza un’immagine e restituisce le coordinate dell’area di maggior interesse, scartando tutto il resto. Continua a leggere
In questi giorni ho lavorato su un progetto dove era necessario filtrare elementi di un elenco. E’ stata fatta la scelta di disporre gli elementi in una griglia di tipo Masonry (quella di Pinterest, per capirci) ed è stato scelto di usare il bel plugin di DeSandro, Masonry.
Il filtraggio degli elementi è rimasto però un punto insoluto, per cui mi sono creato una mia personale estensione al plugin per ottenere quanto voluto. Continua a leggere
La nuova sensibilità nel costruire interfacce utente amichevoli fa nascere la necessità di componenti web sempre più evoluti. Continua a leggere
Un modulo web ben fatto quando viene compilato e sottomesso devo mostrare all’utente l’indicazione di attesa dovuta all’invio dei dati al server. Con Ladda, abbiamo già a disposizione bottoni con l’indicatore di caricamento e sono pronti all’uso. Continua a leggere
Toolbar.js è una piccola libreria javascript, per la precisione, un plugin jQuery, per creare toolbar orizzontali e verticali a comparsa in modo semplice e senza impazzire. Continua a leggere
Sulla scia dell’articolo precedente, vi segnalo questo bel progetto su github che permette di personalizzare la favicon rendendola una progress pie.
Piecon è una piccola libreria javascript che permette di trasformare la propria favicon in un grafico a torta, soluzione che risulta ottimale per modellare lunghi download o moduli a step (wizard). Sul sito del progetto trovate una demo.
La libreria, oltre a generare in modo dinamico i grafici a torna, aggiorna anche il title della pagina, in modo da poter visualizzare il valore percentuale. Per cambiare la favicon basta un semplice comando fornito dalla libreria Piecon:
Piecon.setProgress(12);
Piecon è supportata dai più aggiornati Chrome e Firefox, mentre su Internet Explorer degrada alla normale favicon.
Peity è un piccolo plugin jQuery che converte il contenuto di un elemento HTML in un semplice grafico a torta, a linee o a barre.
Peity genera mini grafici da inserire inline direttamente nell’html della pagina. Il piccolo plugin traduce i valori contenuti nell’elemento html in grafici. Quindi, se vogliamo un grafico a torta, all’interno di un elemento DIV o SPAN inseriamo 1/10 per vedere uno spicchio sottile, oppure 20/20 per vedere una torta completa. Per i grafici a linee o a barre, dobbiamo invece specificare una serie numerica, come per esempio: 10, -20, 3, 0, 11.
Inserire Peity nei nostri progetti sarà semplicissimo. Scaricate il plugin jQuery e includetelo nell’header della vostra pagina:
<script src="jquery.peity.min.js"></script>
Create l’elemento o gli elementi html dove dovranno essere visualizzati i mini grafici
<span class="pie">1/5</span> <span class="pie">226/360</span> <span class="pie">0.52/1.561</span>
Infine applicate il plugin agli elementi html lanciando questo semplice comando:
$("span.pie").peity("pie")
Chiaramente Peity è personalizzabile, nei colori, nelle dimensioni dei grafici, nello spessore del tratto, ecc. Il plugin è open source e compatibile con questi browser: Chrome, Firefox, IE9+, Opera, Safari.
Ho provato ad utilizzarlo e questo è il risultato (dovete premere il pulsante play per eseguire il codice che vedere).
Potete giocarci pure voi, modificando l’esempio qui sopra (premendo il tasto +).
JPEGCam è una libreria open source contentente codice Flash e Javascript che consente di creare una pagina web che cattura snapshots dalla webcam installata sul pc del visitatore.
Dopo la cattura degli scatti, può spedirli su qualsiasi server pubblico su internet (un codice di esempio in PHP5 è contenuto nel pacchetto da scaricare).
La webcam è attivata dall’oggetto Flash che mostra ciò che è inquadrato dalla cam; non ci sono controlli avanzati, semplicemente un bottone per salvare l’immagine.
Ogni controllo per configurare la cam e per catturare le immagini sono gestiti da codice Javascript. In questo modo è possibile modificare facilmente l’interfaccia inserendo dei propri bottoni e un proprio layout. Il Flash non è altro che un oggetto inserito nella pagina, senza bordi, con all’interno la ripresa live della webcam.
E’ possibile leggere il Wiki per più complete istruzioni di installazione. E’ disponibile anche una pagina di test dove è possibile provare la libreria con la propria webcam. La pagina di test è inclusa nel pacchetto che scaricherete.
JPEGCam richiede Flash Player 9 e una webcam attiva al proprio PC.
Oggi con questo articolo stileremo una lista di 10 semplici ed utili esempi dell’ormai nota libreria di Javascript, jQuery. Con queste librerie, realizzare effetti complessi, diventa veramente banale.
Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale:
Inserite il seguente codice tra i tag del vostro sito internet.
[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]
Successivamente dovete inserire il seguente codice tra i all’interno dei tag head, tra <script type=”text/javascript”> //il codice qui </script>, oppure realizzate un nuovo file .js incollate il seguente codice ed importatelo con <script src=”funzione.js” type=”text/javascript”></script>
[code]
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’screenshot’><img src=’"+ this.rel +"’ alt=’url preview’ />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’preview’><img src=’"+ this.href +"’ alt=’Image preview’ />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id=’tooltip’>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
[/code]
Come nello Step 2, importate quest’altra funzione:
[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]
Come nello Step 2, importate quest’altra funzione:
[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]
Adesso i tooltip sono funzionanti, occorre solo inserire il seguente file nel nostro foglio di stile CSS.
[code]
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
[/code]
Siamo giunti al termine del nostri piccolo tutorial. Adesso dobbiamo solo richiamare il tutto nei seguenti modi:
[code]
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
[/code]
[code]
<a href="image.jpg" class="preview" 2="2="2="title="Great""" 3="looking" 4="4="4="landscape">Roll""" 5="over" 6="to" 7="preview</a>" 8="[/html" language=">"]
<h5>Immagine con tooltip di anteprima</h5>
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>
[/code]
Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.
Inserite il seguente codice tra i tag del vostro sito internet.
[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]
Successivamente inserite tra i tag il seguente codice:
[code]
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
[/code]
Diamo un tocco di classe con i CSS (in realtà questi sono essenziali al funzionamento dello script):
[code]
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}
ul li img{
position: absolute;
border: 3px solid #881212;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
[/code]
Infine richiamiamo tutte le funzioni con il seguente codice:
[code]
<ul>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>
[/code]
Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.
Inserite il seguente codice tra i tag del vostro sito internet.
[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]
Successivamente inserite tra i tag la segueente funzione:
[code]
function initMenus() {
$(‘ul.menu ul’).hide();
$.each($(‘ul.menu’), function(){
$(‘#’ + this.id + ‘.expandfirst ul:first’).show();
});
$(‘ul.menu li a’).click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($(‘#’ + parent).hasClass(‘noaccordion’)) {
$(this).next().slideToggle(‘normal’);
return false;
}
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
if($(‘#’ + parent).hasClass(‘collapsible’)) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
}
return false;
}
if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
checkElement.slideDown(‘normal’);
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
[/code]
Inoltre per rimuovere un bug del buon vecchio IE, utilizziamo i conditional tag:
[code]
<!–[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]–>
[/code]
Adesso decoriamo il nostro menu, aggiungendo il seguente codice nel nostro foglio di stile.
[code]
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}
ul.menu li a:hover {
background: #000;
}
ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
[/code]
Adesso richiamiamo tutte le funzioni con il seguente codice html:
[code]
<ul id="menu1" class="menu">
<li style="position: static;">
<a href="#">Weblog Tools</a>
<ul style="display: block;">
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Programming Languages</a>
<ul style="display: none;">
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li><a href="http://www.i-marco.nl/weblog/">Marco’s blog (no submenu)</a></li>
<li style="position: static;">
<a href="#">Cool Stuff</a>
<ul style="display: none;">
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>
<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Search Engines</a>
<ul style="display: none;">
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
[/code]
Modificando la classe, potremo ottenere degli effetti differenti. Di seguito le classi disponibili: