javascript

Ci sono 36 articoli con tag javascript (this is page 1 of 4).

Multiple Filter Masonry, un’estensione javascript per filtrare gli elementi

Multiple filter masonry

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 →

Piecon, una progress chart nella favicon

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.

Creare mini grafici in HTML e Javascript, con Peity

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.

Per iniziare

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.

Demo

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: Cattura immagini dalla webcam e le spedisce su internet

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

jpegcam

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.

3 Semplici ed utili tutorial per jQuery


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.

1. Tooltip con jQuery

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale:

  1. Semplice tooltip
  2. Testo con anteprima immagine
  3. Thumbnail con anteprima ingrandita

Step 1

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]

Step 2

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]

Step 3

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]

Step 3

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]

Step 4

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]

Step 5

Siamo giunti al termine del nostri piccolo tutorial. Adesso dobbiamo solo richiamare il tutto nei seguenti modi:

Classico tooltip con testo

[code]
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
[/code]

Testo con anteprima immagine

[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]

Source

2. Horizontal Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

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]

Step 2

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]

Step 3

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]

Step 4

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]

3. Menu Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

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]

Step 2

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]

Step 3

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]

Step 4

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]

Step 5

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]

Nota bene

Modificando la classe, potremo ottenere degli effetti differenti. Di seguito le classi disponibili:

  1. menu
  2. menu expandfirst
  3. menu noaccordion
  4. menu collapsible expandfirst

Source