Oggi è un altro post: javascript

Home javascript

Visualizzazione post con etichetta javascript. Mostra tutti i post

giovedì 19 aprile 2018

Creare loader html css al caricamento della pagina

Oggi è un altro post giovedì 19 aprile 2018 - 12:31

Se il tuo sito internet non è molto prestante, o anche se lo è, può essere una buona idea quella di aggiungere il classico loader, ovvero una sorta di animazione che indica all'utente che la pagina web è in caricamento.
Grazie a questo strumento inoltre, potrai impedire che una persona che ha già cliccato sul classico tasto Invia di un form, non clicchi nuovamente perchè stufo dell'attesa, evitando così l'inserimento di record doppi.

Vediamo dunque come creare un loader html css che parta con una azione specifica dell'utente, che sia il submit di un form o anche il click su un link html.

Come creare un loader html css al caricamento della pagina

Tutto quello di cui abbiamo bisogno per generare il classico loader è in teoria solo un po' di codice html e css.
Tuttavia, nell'esempio che sto per spiegare, la chiamata al loader verrà fatta tramite javascript, e non quindi definita a livello generale come classe nei fogli di stile per tutti i link.

Partiamo dall'animazione css da includere in una pagina html, ecco i fogli di stile che si possono utilizzare per avere l'animazione di un cerchio roteante:

<style>
.guscioloader
{
    font-size: 1.6em;
    color: #1E6FA4;
    font-weight: bold;
    display:none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: #CCCCCC;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    text-align:center;
    align-items:center;
    justify-content:center;
}
.loader
{
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 2s linear infinite;
}
@keyframes spin
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

Abbiamo un guscio div chiamato guscioloader, che conterrà il nostro loading, come una sorta di layer sfondo colorato semi trasparente che ricopre tutta la pagina con lo scopo di bloccare l'intera pagina web.
Poi abbiamo il loader, che conterrà di fatto l'elemento grafico animato con i keyframes, che in questo caso è una sorta di sfera con bordo azzurro che ruota.

Venendo invece al javascript da utilizzare, c'è la funzione che serve per chiamare il nostro div di caricamento in corso:

<script language="JavaScript">
function loader()
{
    document.getElementById("guscioloader").style.display="flex";
}
</script>

Che in html va richiamato semplicemente così:

<a href="" onclick="loader();">carica la pagina</a>

Oppure nel caso di un form:

<form method="pos\" action="" onsubmit="return loader();">

Quando un utente cliccherà su quel link dunque, apparirà il nostro div loader, che scomparirà non appena la pagina chiamata verrà caricata.

Ecco il codice completo di quanto appena illustrato:

<html>
<head>
<title>Loader html</title>
<style>
.guscioloader
{
    font-size: 1.6em;
    color: #1E6FA4;
    font-weight: bold;
    display:none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: #CCCCCC;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
    text-align:center;
    align-items:center;
    justify-content:center;
}
.loader
{
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 2s linear infinite;
}
@keyframes spin
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
<script language="JavaScript">
function loader()
{
    document.getElementById("guscioloader").style.display="flex";
}
</script>
</head>
<body>
<div id="guscioloader" class="guscioloader"><div class="loader"></div><br /> Loading...</div>
<a href="" onclick="loader();">carica la pagina</a>
</body>
</html>

Come si può ben vedere da queste righe di codice, è stato possibile creare un'animazione di pagina in caricamento senza l'uso di alcuna immagine, solo grazie al potere dei css... e dell'html... e del javascript :p
Ovviamente questo è solo un esempio, ed è la punta dell'iceberg sull'argomento, dato che con le animazioni html/css è possibile creare qualsiasi tipo di grafica ed effetto speciale da piazzare al caricamento della pagina.

mercoledì 28 marzo 2018

guide javascript

Come creare una select con ricerca (html javascript)

Oggi è un altro post mercoledì 28 marzo 2018 - 08:30

Da purista vecchia scuola mi costa molto fare questo post, ma non sempre riscoprire l'acqua calda paga.
Il tema del giorno infatti riguarda le selectbox html troppo lunghe, quelle chilometriche per intenderci.
Quando infatti ci troviamo davanti ad una select con troppe voci, oltre a risultare difficoltoso scorrere tutti i nominativi, può risultare anche ostico trovare una voce con il vecchio trucco di digitarne le iniziali.

Vediamo quindi come il web di oggi ci consente di fare una ricercare in una select con il javascript, i fogli di stile e l'html.

Come creare una select box con ricerca in html/javascript

Per fare ciò che vi sto per andare a spiegare, un tempo avrei rimboccato le maniche e me la sarei giocata tranquillamente con il sacro js, il semplice html ed i fogli di stile.
Oggi però tutto ciò non serve più, dato che la pappa pronta arriva da una libreria javascript che si chiama select2.

Per poter usare questa libreria si può sia scaricarla in locale e richiamarla, o anche includere direttamente il codice da uno dei siti di servizio di google.
Ecco un esempio di funzionamento del secondo caso, senza dunque dover installare niente sulla propria macchina/sito web in locale:

<!DOCTYPE HTML>
<html>
<head>
<title>Select2 test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="nomi">
<option value="AN">Antonio</option>
<option value="FR">Franco</option>
<option value="CA">Roberto</option>
</select>
<script type="text/javascript">
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
});
</script>
</body>
</html>

Il risultato sarà una cosa del genere:

Come creare una select con ricerca (html javascript)

Avremo così creato una select html con ricerca, ovvero una selectbox con un apposito box di ricerca con cui filtrare le varie option presenti in elenco.

Andando ad analizzare il codice usato, ecco cosa occorre includere per primo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

La prima inclusione riguarda il potentissimo jquery, senza il quale non si può usare la libreria select2 (cosa non propriamente esplicitata nel tutorial del sito di riferimento, e che mi ha fatto perdere un sacco di tempo per capire come mai la mia select non aveva il box di ricerca come nell'esempio online :p).

Poi bisogna creare la select semplicemente definendo una classe riconosciuta da questa libreria, che nel caso delle select singole è la js-example-basic-single.

Infine si usa la funzione ready, che agisce al caricamento completo della pagina, per inizializzare tutte le select in cui viene rilevata la classe indicata.
Il codice usato in questo caso è il seguente:
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
});

Dove ad esempio si può aggiungere l'attributo placeholder e specificare se si vuole consentire il tasto per svuotare la select (allowClear).
Ovviamente ci sono diversi altri attributi inseribili/inizializzabili, ma non sono argomento di questa guida (cit.).

Se si vuole inizializzare la select2 con valori di default già selezionati, basta usare il classico attributo selected (es: <option value="AN" selected>Antonio</option>).

Riporto qui sotto un altro esempio, con il quale è possibile creare select multiple con ricerca:

<select class="js-example-basic-multiple" name="nominativi[]" multiple="multiple">
<option value="AN">Antonio</option>
<option value="FR">Franco</option>
<option value="CA">Roberto</option>
</select>
<script type="text/javascript">
$(document).ready(function()
{
$('.js-example-basic-multiple').select2(
{
placeholder: "Select a state", allowClear: true
});
});
</script>

Quello che cambia sostanzialmente da una select singola, è il nome della classe (js-example-basic-multiple) e l'attributo multiple.

Tra l'altro la potentissima select2 consente di includere più select con ricerca in una sola pagina web, senza dover inizializzare ogni singolo oggetto nella ready.
Se ad esempio abbiamo 10 select di tipo singolo e 3 multiselect con ricerca, la parte del js potrebbe essere banalmente:
$(document).ready(function()
{
$('.js-example-basic-single').select2(
{
placeholder: "Select a state", allowClear: true
});
$('.js-example-basic-multiple').select2(
{
placeholder: "Select a state", allowClear: true
});
});

La libreria javascript select2 è molto potente e completa, infatti è anche possibile gestire select di tag, dove è anche possibile aggiungere le option tags mancanti dopo averle scritte nel box di ricerca.
Ecco un codice d'esempio:
<select class="js-example-tags" name="nominativi[]" multiple="multiple">
<option value="AN">Antonio</option>
<option value="FR" selected="selected">Franco</option>
<option value="CA">Roberto</option>
</select>
$(".js-example-tags").select2({
tags: true
});

In questo caso quindi, quando si cerca una opzione che non esiste, cliccandoci sopra questa viene aggiunta alla select come nuova option, generando di fatto una select dinamica html.

Infine occorre precisare che è ovviamente possibile personalizzare la grafica delle select generate, usando i css.
La classe principale di riferimento è la .select2.
Avendo infatti scoperto che questa libreria stranamente di default non è responsive, sono andato a metterci una pezza modificando la classe css principale, con qualcosa del genere:
.select2 {max-width:100%;}

Bene, è tutto.
Le potenzialità della potentissima select2 sono davvero molte, ma la sua vera forza è sicuramente la semplicità e la rapidità d'utilizzo.
Per maggiori info ed eventuali download vi rimando al sito ufficiale.

lunedì 5 febbraio 2018

guide javascript

Come fare un Alert Temporizzato Javascript

Oggi è un altro post lunedì 5 febbraio 2018 - 08:30

Ti è mai capitato di voler far apparire sullo schermo del visitatore del tuo sito internet, un messaggio temporizzato dopo tot secondi dall'apertura della pagina navigata?
Se la tua esigenza è proprio questa, che sia un alert, un'immagine, un box, un testo, o altro, con il javascrit è ovviamente possibile programmare l'apparizione di specifici elementi della pagina html.
Vediamo subito come fare.

Come fare un Alert Temporizzato in Javascript

Per poter programmare l'apertura di un alert javascript, basta utilizzare questa semplice sintassi:

setTimeout(function(){alert("Ciao, sono passati 5 secondi");},5000);

Con questa semplice riga di codice infatti, piazzata nell'head della pagina html, dentro l'apposito tag script, sarà possibile lanciare un messaggio alert di testo, dopo tot secondi dal caricamento della pagina.

Ecco l'intero codice html/javascript da utilizzare, nel caso tu voglia provare direttamente la cosa senza scrivere alcuna riga di codice:

<html>
<head>
<title>Alert</title>
<script type="text/javascript">
setTimeout(function(){alert("Ciao, sono passati 5 secondi");},5000);
</script>
</head>
<body>
Aspetta 5 secondi
</body>
</html>

Ed ecco fatto, dopo appena 5 secondi la pagina web mostrerà al navigatore un bel messaggio alert javascript.

Come specificato ad inizio post, usando questa logica è ovviamente possibile far apparire a video qualsiasi tipo di elemento.
Il mio consiglio è quello di preparare dei div con al loro interno il contenuto da mostrare, e di farli apparire al momento giusto usando la sintassi spiegata in questo post.

lunedì 15 gennaio 2018

guide javascript

Effetto terremoto javascript

Oggi è un altro post lunedì 15 gennaio 2018 - 09:48

Oggi vi propongo un breve script javascript che consente di creare un effetto terremoto sulle vostre pagine web.
Il suddetto codice, da inserire in una pagina html, consente di ottenere l'effetto tremolio su uno specifico elemento, ad esempio un box div.
Vediamo subito come fare.

Come ottenere l'effetto terremoto in Javascript

Per poter far tremare un box html al click del mouse, basta creare una pagina html inserendo il suddetto codice:

<html>
<head>
<title>Effetto terremoto</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
#box
{
width: 200px;
height: 200px;
background: #ff0ccc;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="box">box</div>
<script>
$( document ).click(function() {
$("#box").effect("shake");
});
</script>
</body>
</html>

Senza bisogno quindi di copiare alcuna libreria sul vostro server, ma semplicemente usando la sacra scuola jquery, inglobabile in remoto, potrete ottenere l'effetto terremoto al click del mouse, tramite la proprietà js shake, della suddetta libreria.

Per vedere questo script all'opera, ho girato per voi un mini video, che linko ed inglobo qui sotto:
https://youtu.be/tubwX6sONkc

Fine breve tutorial javascript.
Ovviamente questo effetto potrebbe essere applicato anche ad altri elementi html, ed anche partire in automatico al caricamento della pagina.

martedì 9 gennaio 2018

guide javascript

Controllo radio button form Javascript

Oggi è un altro post martedì 9 gennaio 2018 - 16:22

Se in una pagina html hai un form con all'interno dei radio button, potresti voler controllare che almeno uno dei valori indicati a video, sia stato selezionato.
Per fortuna quindi, con il jascript è possibile controllare i radiobutton presenti nelle form, in modo tale da verificare che sia avvenuto almeno un check.

Come controllare se almeno un elemento di una radio button è stato selezionato tramite javascript

Ecco un semplice esempio da copincollare in una file da chiamare radio.html.

<html>
<head>
<title>Controllo Radio button Javascript</title>
<script type="text/javascript">
function controlla()
{
var almenouno=false;
for(i=0;i<document.theform.colori.length;i++)
{
if(document.theform.colori[i].checked)
{
almenouno=true;
break;
}
}
if(!almenouno)
{
alert("Attenzione, selezionare un colore");
return false;
}
}
</script>
</head>
<body>
<form method="post" action="radio.html" name="theform" onsubmit="return controlla();">
<input type="radio" name="colori" value="rosso" />Rosso<br />
<input type="radio" name="colori" value="verde" />Verde<br />
<input type="radio" name="colori" value="bianco" />Bianco<br />
<input type="submit" value="Invia">
</form>
</body>
</html>

Quello che fa questo script è molto semplice: cicla tutti gli elementi presenti in una lista di tipo radio button, e tramite la funzione checked ne verifica la selezione.
Se trova che un elemento è stato ceccato, allora esce subito dal ciclo for tramite l'istruzione break, altrimenti, se alla fine del giro non ha trovato alcun elemento selezionato, blocca l'invio del form con un bel return false.

Sapere usare il controllo javascript radio button è decisamente una cosa utile nel caso si utilizzino delle form html dove i radio non sono selezionati di default.

mercoledì 15 novembre 2017

guide javascript

Nascondere / mostrare un oggetto in Javascript

Oggi è un altro post mercoledì 15 novembre 2017 - 12:24

Con il sacro javascript si possono fare molte cose, e questo è un fatto.
Una delle cose più interessanti però, è quella di far sparire oggetti in una pagina web, o di farli apparire, semplicemente con il click del mouse.

Vediamo quindi come nascondere un oggetto in javascritp, e come farlo riapparire, con la sola imposizione del mouse (cit.).

Come nascondere / mostrare un oggetto in Javascript

Fino ad ora ho parlato al singolare, ma ovviamente è possibile anche far sparire più elementi tramite js.
Infatti, il mio consiglio è quello di inserire questi elementi all'interno di un div o di uno span, in modo tale da poter nascondere in un colpo solo più righe di codice html (o per meglio dire, il loro risultato a video viene nascosto).

Altra premessa, in questo breve tutorial spiegherò si una tecnica javascript, ma anche la sintassi css da utilizzare per compiere queste operazioni html con i fogli di stile.

Dopo tutte queste premesse, ecco il codice d'esempio che consente di nascondere un div con il javascript:

<html>
<head>
<title>Nascondere / mostrare div con javascript e css</title>
</head>
<body>
<div id="mostrato" style="display:inline;">(<a href="javascript:void(0);" onclick="document.getElementById('nascosto').style.display='inline';document.getElementById('mostrato').style.display='none';">+</a>)</div>
<div id="nascosto" style="display:none;">Contenuto div nascosto (<a href="javascript:void(0);" onclick="document.getElementById('mostrato').style.display='inline';document.getElementById('nascosto').style.display='none';">-</a>)</div>
</body>
</html>

Se copi ed incolli questo codice html in un file di testo e poi lo rinomini come prova.html e lo lanci con il browser, potrai vederne il suo funzionamento.

Praticamente, grazie alla funzione getElementById si ricava l'id dell'elemento da nascondere/mostrare, poi tramite la proprietà style.diplay, gli si dice di nasconderlo (none) o mostrarlo (inline, block, ecc...).

Quindi ricapitolando, per nascondere un div in javascript si può scrivere:

document.getElementById('id-div').style.display='none';

Invece per mostrare un div nascosto in js, si può scrivere:

document.getElementById('id-div').style.display='inline';

Ovviamente occorre dare un id all'elemento contenitore da mostrare/nascondere, e passare il giusto id alla funzione js che cambia lo stile a suddetto oggetto.
Spero di essere stato abbastanza chiaro, in caso contrario... vai di commenti :)

martedì 22 agosto 2017

guide javascript

Trascinare un oggetto in Javascript (Drag & Drop)

Oggi è un altro post martedì 22 agosto 2017 - 08:30

Con javascript e l'html5 è possibile anche trascinare oggetti in modo da creare pagine interattive.
E' infatti possibile creare degli elementi catturabili con il mouse e trascinabili in specifici punti dello schermo, raggiunti i quali è possibile generare poi diverse azioni.

Ad esempio, imparando ad usare bene queste funzionalità, unite al potentissimo ajax, è anche possibile creare dei software per l'assegnazione dei posti (es per la gestione degli eventi).
Se ad esempio hai una sala con diverse file e posti, potresti crearti una sorta di video piantina con i div html, ed utilizzare una lista di nomi trascinabili sui vari posti a sedere.
Lasciando poi un nominativo con il mouse nel rispettivo posto, potrai far scatenare una chiamata ad uno script php o asp, in modo tale che il posto assegnato a video venga anche salvato nel database.

Non so se sono riuscito a spiegare bene le potenzialità del drag & drop javascript, comunque vediamo subito un po' di codice.

Come trascinare un oggetto in Javascript con il Drag & Drop

Ecco un esempio di codice script utilizzabile per poter compiere questa di trascinamento oggetti su schermo in una pagina web:

<html>
<head>
    <title>Drag & Drop Javascript</title>
    <script>
    function dropattivo(evento)
    {
        evento.preventDefault();
    }
    function drag(evento)
    {
        evento.dataTransfer.setData("text", evento.target.id);
    }
    function drop(evento)
    {
        evento.preventDefault();
        var data = evento.dataTransfer.getData("text");
        evento.target.appendChild(document.getElementById(data));
    }
    </script>
</head>
<body>
<div id="destinazione" ondrop="drop(event)" ondragover="dropattivo(event)" style="width:400px;background:#FF0000;"> </div>
<span id="datrascinare" draggable="true" ondragstart="drag(event)">Trascinami</span>
</body>
</html>

Copia ed incolla tutto il codice in una pagina html vuota e prova ad eseguire la pagina con un browser.
Potrai trascinare la scritta nel box rosso e lasciarla posizionata lì.

Le nozioni base da imparare sono:
draggable="true"
Attributo da mettere a tutti gli oggetti da trascinare.

E poi le rispettive funzioni javascript che gestiscono l'evento, da mettere sia sull'oggetto da trascinare, che sull'elemento di destinazione.
Penso che lo script si spieghi da solo e non necessiti di ulteriori spiegazioni, ma nel caso chiedete pure nei commenti.

Come dicevo poco sopra, con questo metodo del javascript trascina oggetti si apre un mondo, ed è possibile sviluppare applicazioni interattive che vanno da software web elaborati, ad anche videogiochi in html.