La funzione di documentgetElementById DGEBI nel framework MAGIC PATCHES.
In questo programma manca uno pseudo-main o ( main Ricordarsi il padding px-5 per tenere due margini a sinistra e destra per tool e responsive. ) dato che contiene le informazioni da visualizzare rappresenta un file personalizzato per la pagina la quale è stata impostata come una struttura standard [*]. Lo pseudo-main è scritto in html indi "compilato" in DGEBI e inserito come script. (Comunque rappresenta già una fase avanzata di un progetto, vale a dire un prodotto finito.)
Quale sarebbe il vantaggio?
Un codice adeguatamente uniformato ad un metodo, risulta il primo vantaggio. Naturalmente si parte dal principio che utilizzando il DGEBI si riutilizzano elementi standard senza doverli riscrivere questo comporta una diminuizione del peso di html nella economia del codice. Un programma si avvale di componenti come ad esempio i menu definenti la navigazione standard e le informazioni su aggiornamenti pagina che interessanto il dominio globalmente.
Utilizzare un framework come Bootstrap attraverso i CDN richiede una connessione ad Internet. Questo attraverso il DGEBI diventa evitabile facendo un copia e incolla del contenuto del CDN in locale. Agevolmente si possono effettuare aggiustamenti al codice di boostrap aggiungendo linee nuove nel file locale. In particolare BS permette di uniformare la immagine delle pagine web cross-browser ma il contenuto del framework talvolta contiene molte features che al momento non servovo. Mi riferisco alla fase alfa e beta del framework. In fase di costruzione sono aggiunte funzionalità e magari se ne perdono altre. Dopo diversi passaggi in locale ci si trova un framework che mixa alfa e beta in modo perfettamente adeguato alle esigenze del client.
Con l'ultima versione di BS è stato rimosso jQuery come dipendenza può succedere che in alfa un javascript funzioni mentre non in beta, mentre i css funzionano ancora bene e occorre solamente fare un minimo aggiustamento in aggiunta delle nuove funzionalità.
Utilizzando il DGEBI si presuppone che client abbia già attivato l'interprete javascript potrebbe essere un drawback ma oramai nei browser javascript è attivato per default e la commistione html+css+javascript è talmente uno standard che difficilmente ci si troverà ad incontrare problemi a questo riguardo.
Nella fase di compilazione del DGEBI ci possono essere dei problemi riguardanti il fatto che nello script ci sia un conflitto con caratteri speciali non approvati dallo script ma perfettamenti accettati da html. Risulta essere il caso del carattere ' (apice) il quale fa da delimitatore delle stringhe concatenate. Compilando il testo occorre istruire una conversione utilizzando i caratteri di escape \' (apice singolo) oppure \" (doppio apice) oppure \\ (barra inversa).
document.getElementById("test").innerHTML='';
Prima di compilare usare un editor per sostituire gli apici singoli usati in alcuni link per chiarezza della scrittura. Ad esempio 'http://nomedominio.com' sostituire con apici doppi in realtà il link funziona regolarmente e si evita grandi problemi con gli apici di apertura e chiusra del DGEBI.
document.getElementById("test").style.visibility='visible';
Nel caso di uso per lo stile controllare la grammatica dei metodi javascript poiché possono differire dallo standard html-css.
Un esempio di uso del DGEBI : lo spinner blues...
Quando il tempo di caricamento loading è piuttosto lungo risulta utile uno spinner per avvertire l'utente che il browser sta funzionando, in realtà anche il browser ha un suo spinner, quindi lo spinner personalizzato è ridondante. Senonchè rafforza il messaggio in più se aggiungiamo anche un progress bar allora la funzione diventa veramente una aggiunta. Il progress bar è prevista per tempi lunghissimi, in tal caso il programmatore è a conoscenza del tempo medio di caricamento del codice per cui si può posizionare un avvertimento.
function attesa(){
if (document.all){}
else if
(document.getElementById)
{ document.getElementById("spinner").style.visibility="hidden"; }
}
Questa funzione è molto interessante poichè utilizza document.all il quale fa un check se il documento è in corso di caricamento. In questo caso non fa nulla {} in realtà si realizza un errore intercettato da id="spinner" visualizza lo spinner . Allorquando il documento è completamente caricato si attiva lo stile il quale cancella lo spinner.
<div id="spinner" class="spinner-border"></div>
Il frammento di codice html con id intercetta il document.all , lo spinner utilizzato può essere una icona animata oppure preso da boostrap spinner standard di bootstrap
Una funzione javascript non si attiva da sola, ha bisogno di un evento che faccia da avvio. In questo caso viene attivato al momento dell'avvio della pagina
<body onload="attesa()">
Ora è possibile assemblare le componenti
<body onload="attesa()">
<div id="spinner" class="spinner-border"></div>
<script>
function attesa(){
if (document.all){}
else if
(document.getElementById)
{ document.getElementById("spinner").style.visibility="hidden"; }
}
</script>
</body>
Un ulteriore perfezionamento con interazioni html body e percentuale di caricamento (qui fissata in 15minuti)
<html id="html">
Viene dato un id all'elemento html
<style>
:root {background-color:rgba(255,170,0,0.5);}
body{ background-color:default; }
</style>
Viene settato un root e un body come sfondo
<body id="body" onload="pausa()" style="visibility:hidden;">
Aggiungo un id a body e uno style visibility hidden. onload effettua il caricamento alla partenza della funzione javascript pausa
<div id="divpausa" style="position:fixed;
top:2.5rem;left:0;
top:50%;left:50%;
background-color:var(--bs-white) !important;
margin-left:-8.5rem !important; margin-top:-2rem !important;
border-radius:0.2rem !important; visibility:visible !important;">
<span id="pausa" class="spinner-border text-warning"></span>
<span style="background-color:transparent !important;">
<span id="Loading"
style="color:var(--bs-indigo) !important; font-size:2rem !important;">
Loading...</span>
<span id="percento"
style="color:var(--bs-indigo) !important;
font-size:2rem !important;font-variant:small-caps !important;">
</span>
</span>
</div>
<script>
function pausa(){
if (document.all){}
else if
(document.getElementById)
{
document.getElementById("pausa").style.visibility="hidden";
document.getElementById("percento").style.visibility="hidden";
document.getElementById("Loading").style.visibility="hidden";
document.getElementById("divpausa").style.visibility="hidden";
document.getElementById("body").style.visibility="visible";
document.getElementById("body").style.backgroundColor = 'default';
document.getElementById("html").style.backgroundColor = 'transparent';
}
}
var percento=document.getElementById("percento");
var contatore=1;
var intervallo=setInterval( function() { percento.innerHTML=contatore+"%";
contatore++; if (contatore===101) {clearInterval(intervallo);}
} , 9000)
</script>
Qui il codice completo da inserire nel body. Vi si vede il settaggio di interval a 9000 = 9sec , ogni 9secondi vi è un avanzamento del conteggio del 1percento 9x100=900sec = 15minuti , naturalmente viene visualizzato dal programma il 100% , lo spinner in questione è indicativo del tempo di caricamento ed è gestito in modo statico dal programmatore. Se il tempo fosse maggiore di 15minuti si rifà il calcolo e si aggiorna lo script.
Qualche aggiunta per posizionare adeguatamente lo spinner tramite position fixed o qualcosa di simile. L'uso di bootstrap permette di velocizzare le operazioni dal punto di vista di come appare lo spinner. In aggiunta la immagine dello spinner richiede una più che sufficiente esperienza con i css.
Caricamenti a/sincroni
Quando si scrivono file esterni contenenti istruzioni per lo stile e script nei browser l'aggiornamento ai nuovi valori non avviene automaticamente creando soprattutto in fase di debugging una difficoltà di comprensione dei fattori anomali e quindi a perdita di tempo. L'idea base è quella di effettuare un aggiustamento al volo ricorrendo al indirizzo?qualcosa questa soluzione richiede un continuo estenuante passaggio tra file html e file css o js . La soluzione è creare uno script per il caricamento degli script esterni e dei fogli di stile esterni.
Per ottenere questa funzionalità occorre usare il metodo document.createElement("script"); nel caso di uno script
oppure document.createElement("link"); nel caso di link a file esterno css.
Questi script depositano in head il loro contenuto.
Le due sequenze di codice si riferiscono a due tipologie di elementi ma per entrambe occorre creare un postfisso.
Il postfisso è un indice con il quale si individualizza un refresh nella ricerca del file comunicando al browser che è una nuova istanza di caricamento. Come postfisso si può usare anche un generatore di numeri random. Invece con new Date() si indicizza utilizzando il datario javascript il quale si aggiorna quando si fa il check della pagina html. Il postfisso è comune ad entrambe le tipologie.
1 Metodo new Date() JavaScript Date Reference
Aggiungiamo ora il nome del file da includere
oppure se il file contiene elementi o classi
Quando il file esterno è un DGEBI occorre tenere conto che per mnemonico il nome richiama l'ID , ad esempio extras.js richiama mnemonicamente id="extras" ovviamente questa è una raccomandazione non una necessità, ma se si usa DGEBI risulta di estrema utilità.
Ora dobbiamo combinare il nome dello script con un elemento di nome
Corrisponde al comando src="file.js"
Un caso interessante è la decodifica di
che diventa
Schema completo a/sincrono per javascript DGEBI
var carica_script = document.createElement("script");
var postfisso = new Date();
var nome = "file.js";
nome = nome + "?" + postfisso;
carica_script.src=nome;
document.getElementsByTagName("head")[0].appendChild(carica_script);
Schema completo a/sincrono per file css
var carica_link = document.createElement("link");
var postfisso = new Date();
var nome = "file.css";
nome = nome + "?" + postfisso;
carica_link.href=nome;
carica_link.rel="stylesheet";
document.getElementsByTagName("head")[0].appendChild(carica_link);
Consideriamo ora un aggiustamento usufruendo della flessibilità di javascript con un esempio
Questa variabile permette di riferirsi tramite il nome radice ad una porzione dell'indirizzo web server depositato nel file radice.js risparmiando così la digitazione dell'indirizzo completo.
Un'applicazione molto interessante è il compattamento di tutti i link standard o di default. 6
var postfisso = new Date();
var carica_script_JQUERY = document.createElement("script");
var nome_JQUERY = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
nome_JQUERY = nome_JQUERY + "?" + postfisso;
carica_script_JQUERY.src=nome_JQUERY;
document.getElementsByTagName("head")[0].appendChild(carica_script_JQUERY);
var carica_script_BSNR_KICKSTART_TEST = document.createElement("script");
var nome_BSNR_KICKSTART_TEST = "http://beatsupernovarasa.altervista.org/zap/bs/kickstart/bsnr_kickstart_test/default.js";
nome_BSNR_KICKSTART_TEST = nome_BSNR_KICKSTART_TEST + "?" + postfisso;
carica_script_BSNR_KICKSTART_TEST.src=nome_BSNR_KICKSTART_TEST;
document.getElementsByTagName("head")[0].appendChild(carica_script_BSNR_KICKSTART_TEST);
var carica_script_PIEDIPAGINA_MENU_TEST = document.createElement("script");
var nome_PIEDIPAGINA_MENU_TEST = "http://beatsupernovarasa.altervista.org/zap/bs/kickstart/piedipagina_menu_test/default.js";
nome_PIEDIPAGINA_MENU_TEST = nome_PIEDIPAGINA_MENU_TEST + "?" + postfisso;
carica_script_PIEDIPAGINA_MENU_TEST.src=nome_PIEDIPAGINA_MENU_TEST;
document.getElementsByTagName("head")[0].appendChild(carica_script_PIEDIPAGINA_MENU_TEST);
var carica_script_SHOW_HIDE = document.createElement("script");
var nome_SHOW_HIDE = "http://beatsupernovarasa.altervista.org/zap/bs/kickstart/show_hide/default.js";
nome_SHOW_HIDE = nome_SHOW_HIDE + "?" + postfisso;
carica_script_SHOW_HIDE.src=nome_SHOW_HIDE;
document.getElementsByTagName("head")[0].appendChild(carica_script_SHOW_HIDE);
var carica_link_TABLONE = document.createElement("link");
var nome_TABLONE = "http://beatsupernovarasa.altervista.org/zap/bs/tablone/default.css";
nome_TABLONE = nome_TABLONE + "?" + postfisso;
carica_link_TABLONE.href=nome_TABLONE;
carica_link_TABLONE.rel="stylesheet";
document.getElementsByTagName("head")[0].appendChild(carica_link_TABLONE);
Con un unico script si caricano tutti i file necessari per user lasciando libero spazio al main e alle sezioni.
Le font 7
Privilegio delle monospace. Google fonts PT Mono
La ricerca della font monospace adeguata interessa per il problema dei bastoni soprattutto nelle elle che si possono confondere con le i maiuscole e nelle o che si possono confonedere con lo zero e viceversa se non si usa il monospace. Alcune porzioni di programmazione richiedono un adeguato modo differenziato per non incorrere in bug insidiosi.
Il collapse
Questo effetto di apparizione/sparizione del menu gestito da bootstrap è molto importante per la pagina in quanto riduce l'affollamento di sticker.
<section style="position:fixed; bottom:0; left:0; width:100%; text-align:left; border:solid 0rem green;"> <button type="button" class="btn shadow-none bg-warning rounded" aria-expanded="false" data-toggle="collapse" data-target="#collapseMenu" style="position:fixed; top:2.5rem; right:0; /* border-radius:0rem !important; border:solid 0rem black; */ "> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-back" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/> </svg> </button> <div id="collapseMenu" class="collapse border-0"> <ul style="border:solid 0.25rem indigo !important; height:11.5rem !important; overflow:auto !important; border-radius:0.2rem !important; "> <a href="#">link_del_menu</a> </ul> </div> </section>
Sign in
Il sign in rappresenta una richiesta di utenza e password per accedere al contenuto della pagina. Per ottenere questo effetto occorre usare il linguaggio php il quale usa essere dal lato server quindi funziona direttamente dal sito e il codice php non può essere visto quando si esegue il codice php che lo lancia; tuttavia con un programma apposito si può eseguire il codice php in locale tramite xampp . Una volta installato eseguire il comando per attivare il control panel drive:\xampp\xampp-control.exe trovare la icona e cliccare. Quando appare il pannello di controllo xampp cliccare start e l'ambiente è in funzione come localhost dal quale con il comando localhost/file.php digitandolo dal browser si emula il comportamento da server.
Fare attenzione a depositare il file php nella cartella htdocs.
La combinazione user password permette di gestire una sessione di file php, una volta loggato i successivi file controllano se user password sono corretti prima di evidenziare il loro contenuto .
<?php session_start();
if(!isset($_SESSION['UserData']['Username'])){
header("location:/index.php");
exit;
}
?>
Il codice controlla se username password combinano altrimenti si viene reindirizzati al file index.php
Nel file index.php è contenuto il form per inserire username password.
<?php session_start();
if(isset($_POST['Submit'])){
$logins = array('rinaldo' => '1234','username1' => 'password1','username2' => 'password2');
$Username = isset($_POST['Username']) ? $_POST['Username'] : '';
$Password = isset($_POST['Password']) ? $_POST['Password'] : '';
if (isset($logins[$Username]) && $logins[$Username] == $Password){
$_SESSION['UserData']['Username']=$logins[$Username];
header("location:file.php");
exit;
} else {
$msg="<span style='color:red'>Invalid Login Details</span>";
}
}
?>
Il form accetta username password indi invia i dati al file file.php che controlla la validità del sign in ed esegue il codice se corrisponde altrimenti reinvia ad index.php. Ogni altro file della catena è vincolato dal login (sign in) anche se un client cerca di accedere senza usare la home page.
<form method="post" name="Login_Form"> <table> <tr> <td><h3><span>Login</span></h3></td> <td></td> </tr> <tr> <td>Username</td> <td><input name="Username" type="text" class="Input"> <span style="background-color:oldlace; color:maroon;">username1</span></td></tr> <tr><td>Password </td><td><input name="Password" type="password" class="Input"> <span style="background-color:oldlace; color:maroon;">password1</span></td> </tr> <tr> <td><input name="Submit" type="submit" value="Login" style=" cursor:pointer !important;"> </td><td> </td></tr> </table> </form>
Porzione di codice html per inserire i dati username password necessari per php al fine di aprire una sessione di lavoro.
<div>
<?php session_start(); /* Starts the session */
session_destroy(); /* Destroy started session */
header("location:test.php"); /* Redirect to login page */
exit;
?>
</div>
L'uscita dalla sessione di lavoro viene eseguita dal codice di log out. La fase di logout può diventare molto importante dato che se una sessione viene lasciata aperta chiunque può accedere ai dati del file.php senza conoscere username e password. Per ovviare a questo inconveniente si può mettere un contatore a rovescio (ad esempio ogni secondo) a scandire la fine della sessione 2
Da tenere presente che un vero fine sessione comporterebbe una interruzione quando l'user non esegue alcuna operazione per un determinato periodo di tempo. Qui invece la sessione viene staccata comunque vadano le cose. Per questo è utile inserire un visualizzatore del tempo rimanente affinché user non sia sorpreso dalla fine della sessione.
Struttura [*] [**] [***] [****]
Arriviamo ora alla struttura html da cui normalmente si inizia ma qui appare dopo seguendo una linea di pensiero bottom-up.
Quando si crea il DGEBI si digita la combinazione ID script la quale è molto lieve però nasconde il meccanismo di funzionamento. Alcune porzioni di codice devono però assolutamente essere scritti in html. Per non parlare dei magic numbers vale a dire "trucchi" per risolvere alcuni problemi di aggiustamento strutturale (hacking) . Se non vengono sottolineati e commentati riesce poi difficile rintracciarne sia la funzione che la corretta scrittura.
Definisce il tipo di html
Il contenitore del codice. Qui inizia la sequenza di elementi html aventi la caratteristica di separatori o linee di serialità nella esecuzione del codice html considerare ogni elemento come una linea alla quale sono appesi come fogli dei comandi. Definire un width height di un div non significa altro che fornire una grandezza alla linea di appoggio dei comandi seguenti.
Rappresenta il posto nel quale si dovrebbero inserire i fogli di stile e altre dipendenze del programma html ad esempio i CDN come visto nella sezione asincrono tramite script si possono aggiungere a head i link necessari.
Molto importante per la decodifica dei caratteri europei.
Necessario per il responsive e cross browser.
Titolo della pagina visualizzata
Allorquando siano stabilizzati i codici css js di bootstrap si possono inserire in head senza sincronizzarli.
Fornisce i codici css js base di bootstrap localizzati.
Fornisce il menu in fondo alla pagina in modo da poter spostarsi tra i link interni ed esterni. Come detto è possibile con javascript creare in head una var radice che permette di personalizzare il dominio nel quale sono archiviati i files. un_esempio_di_radice
Fogli di stile personalizzati
Veniamo ora ai magic numbers. Sostanzialment sono dei border posizionati in valori rem dedicati soprattutto alla gestione della visualizzazione su dispositivi come smarphone o tablet.
Aggiusta il body.
Composizione di una struttura base pagina in html
<!DOCTYPE html>
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link href="http://beatsupernovarasa.altervista.org/zap/bs/tablone/default.css" rel="stylesheet" />
<style>
html * {font-family: 'PT Mono', monospace !important;}
</style>
</head>
<body style="border-right:solid 0.2rem indigo !important;">
<div id="bsnr_kickstart_test">bug bsnr_kickstart_test</div>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/kickstart/bsnr_kickstart_test/default.js"></script>
<div id="piedipagina_menu_test">bug piedipagina_menu_test</div>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/kickstart/piedipagina_menu_test/default.js"></script>
<div id="spinner" class="spinner-border text-warning" style="position:fixed; top:2.5rem; left:0; background-color:oldlace;"></div>
</body>
</html>
I due DGEBI vanno inseriti esattamente in questa posizione altrimenti non funzionano. Rispettare la precedenza prima gli id poi gli script. Lo id dello spinner agisce su una funzione script presente in bsnr_kickstart_test. In head è posizionato uno style che istruisce la pagina ad usare monospace PT. Assieme al magic patch in body questo è un fuorisacco, e un candidato ad essere inserito in un aggiornamento di bsnr_kickstart_test. 4
La struttura base qui presentata è mancante di main il quale è un contenitore delle informazioni da veicolare con la pagina. Il main è una struttura di secondo livello appartenente al user.
Linee guida per main.
Il main ha come ossatura table.
tablette
Come si può vedere dallo schema c'è una main table suddivisa in due colonne di cui quella a sinistra di larghezza molto minore della seconda. All'interno della colonna di destra è contenuta un'altra tavola tablette la quale ha una sola colonna. Nella colonna tablette ci stanno le section con le informazioni.
L'elemento table è molto utile come involucro per le informazioni ma occorre lasciarlo a livello di strutturazione.
<main> <header class="titolo"> <blockquote class="text-center clearfix"> <div class="overflow-auto"> titolo main <span style="font-size:2rem !important; ">[table_tablette_sections]</span> </div> </blockquote> </header> <table class="table"> <tbody> <tr> <td id="colonna-sinistra" class="p-0 colonna-sinistra"> </td> <td> <table class="table"> <tr> <td class="clearfix"> [qui le sezioni] </td> </tr> </table> </td> </tr> </tbody> </table> </main>
Il main sarà poi "compilato" in DGEBI e richiede tablone.css
La table usa la class table di bootstrap che da sola risolve abbastanza. In tablone.css si ha una aggiunta
Come sempre occorre tener presente overflow:auto !important; oppure con classe bootstrap class="overflow-auto"
Vista la composizione di table in due colonne e dato sinistra minore di destra si usa la classe colonna-sinistra
.colonna-sinistra{
background-color:rgba(255,170,0,0.25) !important;
width:5rem !important; width:2.3rem !important;
}
Il dato importante è width che definisce la larghezza della colonnina.
titolo main [table_tablette_sections]
|
L'inserimento delle sections presuppone esse non forino la barriera del td è necessario avere attenzione per overflow.
Fare molta attenzione ad un drawback in Chrome che riconosce (in modo errato) il segno meno come spazio e quindi non applica overflow (3)
Assemblaggio di un template generico
<!DOCTYPE html>
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<script src="http://beatsupernovarasa.altervista.org/radice/radice.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="http://beatsupernovarasa.altervista.org/zap/bs/tablone/default.css" rel="stylesheet" />
<style>
html * {font-family: 'PT Mono', monospace !important;}
</style>
</head>
<body style="border-right:solid 0.2rem indigo !important;">
<main>
<header class="titolo">
<blockquote class="text-center clearfix">
<div class="overflow-auto">
titolo main <span style="font-size:2rem !important; ">[table_tablette_sections]</span>
</div>
</blockquote>
</header>
<table class="table">
<tbody>
<tr>
<td id="colonna-sinistra" class="p-0 colonna-sinistra"> </td>
<td>
<table class="table">
<tr>
<td class="clearfix">
[qui le sezioni]
<section>
01234567890-1234567890-1234567890-1234567890-1234567890-1234567890-1234567890-123456789
</section>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</main>
<div id="bsnr_kickstart_test">
bug bsnr_kickstart_test
</div>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/kickstart/bsnr_kickstart_test/default.js"></script>
<div id="piedipagina_menu_test" class="versionedelprogramma">
bug piedipagina_menu_test
</div>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/kickstart/piedipagina_menu_test/default.js"></script>
<aside>
<span class="position-fixed bottom-0 right-0 m-1 versionedelprogramma">
<span onclick="showElement()" class="vedi"> </span>
<span onclick="hideElement()" class="nascondi"> </span>
</span>
</aside>
<div id="spinner" class="spinner-border text-warning"
style="position:fixed; top:2.5rem; left:0;
background-color:oldlace;"></div>
</body>
</html>
Come si può notare la colonnina è lasciata vuota, vale a dire a disposizione di codice. Qui si può inserire un DGEBI che utilizza un array di immagini come per fornire una serie di immagini come sfondo.
5 Un'altra versione dello stesso framework in toggle dove il menu a piedi pagina può essere rimosso per esigenze di migliore visualizzazione appunto con tasto toggle . copy
<!DOCTYPE html>
<html id="html" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
1700 bmu_togglato --- MAGIC PATCHES 20201228
20191119f_1-CREEK 20200704-0810_by_odlanir - Altervista
</title>
<!-- root link -->
<!-- http://beatsupernovarasa.altervista.org/zap/ -->
<script src="http://beatsupernovarasa.altervista.org/radice/radice.js"></script>
<style>
/* queste variazioni o aggiunte vanno archiviate in BS/DEFAULT.JS */
.promemoria{border:solid 0rem red !important;
border-left:solid 0.5rem indigo !important;
}
.promemoria:hover .text-promemoria{
width:50%;height:auto;
animation: fadeIn ease 4.1s;
-webkit-animation: fadeIn ease 4.1s;
-moz-animation: fadeIn ease 4.1s;
-o-animation: fadeIn ease 4.1s;
-ms-animation: fadeIn ease 4.1s;
overflow:auto !important;
font-style:normal !important;
border-left:solid 1rem indigo !important;
display:block;
}
.text-promemoria{display:none; background-color:var(--bs-indigo); color:oldlace;border-radius:0.2rem;}
.dissolvenza {
animation: fadeIn ease 2.5s;
-webkit-animation: fadeIn ease 2.5s;
-moz-animation: fadeIn ease 2.5s;
-o-animation: fadeIn ease 2.5s;
-ms-animation: fadeIn ease 2.5s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
</style>
<style>
:root {background-color:rgba(255,170,0,0.5); }
html * {font-family:'PT Mono' !important;}
body{ background-color:default; }
</style>
</head>
<!-- body with magic patch style -->
<body id="body" onload="pausa()" style="visibility:hidden;">
<main>
</main>
<div id="bsnr_kickstart_test">bug bsnr_kickstart_test</div>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/kickstart/bsnr_kickstart_test/default.js"></script>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/tablone/default.js"></script>
<div id="piedipagina_menu_togglato" class="vedoXoY" >bug piedipagina_menu_togglato</div>
<script>
document.getElementById("piedipagina_menu_togglato").innerHTML=
' <section style="position:fixed; bottom:0; left:0;'+
' border-bottom:solid 1rem transparent !important; '+
' border-left:solid 0.5rem transparent !important;'+
' border-right:solid 0.5rem transparent !important;'+
' width:100%; text-align:left; "> '+
' <span style="margin-right:2.3rem !important;'+
' padding:0.2rem;'+
' background-color:oldlace; '+
' border-radius:0.4rem !important;'+
' border:solid 0.05rem navy !important;"> '+
' '+
' <button type="button" class="btn shadow-none bg-warning rounded" '+
' data-toggle="collapse" data-target="#collapsemenuapdp" '+
' aria-expanded="false" '+
' style="position:fixed; top:2.5rem; right:0; /* border-radius:0rem !important; border:solid 0rem black; */ "> '+
' '+
' <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-back" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/> '+
' </svg> '+ ' '+
' </button> '+
' <span style="visibility:hidden !important;">menu</span> '+
' <a href="#fine"> '+
' <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none" /> <path fill="maroon" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/> '+
' </svg></a> '+
' <span style="visibility:hidden !important;">menu</span> '+
' '+
' <a href="#"> '+
' <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"> <path d="M0 0h24v24H0V0z" fill="none"/> <path fill="maroon" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/> '+
' </svg></a> '+
' '+
' </span> '+
' '+ ' '+ ' '+ ' '+
' '+ ' '+
' '+ ' '+
' <div id="collapsemenuapdp" '+
' class="collapse dropdown-menuY border-0" '+
' style=" padding:0rem !important; '+
' '+
' background-color:rgba(0,85,85,0); '+
' border-left:solid 0.1rem rgba(255,170,0,1) !important; '+
' border-radius:0rem !important; '+
' background-color:rgba(255,170,0,0.85); "> '+
' <ul style="border:solid 0.25rem indigo !important; '+
' height:11.5rem !important; '+
' overflow:auto !important; border-radius:0.2rem !important; ">'+
' <a class="btn-warning rounded" '+
' href="#argomento_spinner"> '+
' <span class="rounded p-1 fw-bold" style="background-color:indigo;color:oldlace;border:solid 0.1rem indigo;">'+
' spinner</span></a> '+
' <a class="btn-warning rounded" '+
' href="#argomento_asincrono"> '+
' <span class="rounded p-1 fw-bold" style="background-color:indigo;color:oldlace;border:solid 0.1rem indigo;">'+
' asincrono</span></a> '+
' <a class="btn-warning rounded" '+
' href="#argomento_font"> '+
' <span class="rounded p-1 fw-bold" style="background-color:indigo;color:oldlace;border:solid 0.1rem indigo;">'+
' font</span></a> '+
' <a class="btn-warning rounded" '+
' href="#argomento_collapse"> '+
' <span class="rounded p-1 fw-bold" style="background-color:indigo;color:oldlace;border:solid 0.1rem indigo;">'+
' collapse</span></a> '+
' <a class="btn-warning rounded" '+
' href="#argomento_sign_in"> '+
' <span class="rounded p-1 fw-bold" style="background-color:indigo;color:oldlace;border:solid 0.1rem indigo;">'+
' sign_in</span></a> '+
' <a class="btn-warning rounded" '+
' href="#argomento_struttura_base"> '+
' <span class="rounded p-1 fw-bold" style="background-color:indigo;color:oldlace;border:solid 0.1rem indigo;">'+
' struttura</span></a> '+
' <p class="my-1"><hr/></p> '+
' <span style="font-size:small !important;font-weight:bold !important;">'+
' note: </span> '+
' '+
' <a href="#nota_001" class="note-cerchietto mr-1"> '+
' 1 </a> '+
' <a href="#nota_002" class="note-cerchietto mr-1"> '+
' 2 </a> '+
' <a href="#nota_003" class="note-cerchietto mr-1"> '+
' 3 </a> '+
' <a href="#nota_004" class="note-cerchietto mr-1"> '+
' 4 </a> '+
' <a href="#nota_005" class="note-cerchietto mr-1"> '+
' 5 </a> '+
' <a href="#nota_006" class="note-cerchietto mr-1"> '+
' 6 </a> '+
' '+
' '+
' '+
' '+ ' '+
' </ul> '+
' <span class="p-0" style="font-size:small !important; background-color:indigo;color:oldlace;"> '+
' alfabeta 20201228_1530 '+
' </span> '+
' <a class="ml-2 btn-warning rounded" '+
' href="http://venexiatre.altervista.org/WORKOU/OGGI/20191119/20191119f_1-CREEK.html"> '+
' <span class="rounded p-1 fw-bold" style="background-color:oldlace;color:indigo;border:solid 0.1rem indigo;box-shadow:0.2rem 0.2rem 0.4rem black !important;">'+
' home_page</span></a> '+
' </div> '+
' '+
' </section> '+
'';
/* vedi nascondi bottoni separati
function showElement() {
element = document.querySelector('.versionedelprogramma');
element.style.visibility = 'visible';
}
function hideElement() {
element = document.querySelector('.versionedelprogramma');
element.style.visibility = 'hidden';
}
*/
/*
How to copy TEXT to Clipboard on Button-Click
A Pen By Shaik Maqsood
https://codepen.io/shaikmaqsood/pen/XmydxJ
*/
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
<span id="vedoXoY">bug vedoXoY</span>
<script>
document.getElementById("vedoXoY").innerHTML=
' '+
' '+
' <style> '+
' '+
' .posvedoXoY{'+
' position:fixed !important;'+
' right:0 !important;'+
' bottom:0 !important;'+
' color:transparent !important;'+
' margin-right: 0.5rem !important;'+
' margin-bottom: 1.0rem !important;'+
' '+
' }'+
' '+
' .vediY{ '+
' cursor:pointer !important;'+
' background-color:indigo !important;'+
' background-color:rgba(75,0,130,1) !important;'+
' border:solid 0.12rem rgba(75,0,130,1) !important;'+
' '+
' }'+
' '+
' .vediX{ '+
' cursor:pointer !important;'+
' background-color:orange !important;'+
' background-color:rgba(255,165,0,1) !important;'+
' border:solid 0.12rem rgba(75,0,130,1) !important;'+
' '+
' }'+
' '+
' '+
' '+
' </style> '+
' '+
' '+
'<span onclick="showElement()" class="vedi nascondiY vediY posvedoXoY">Y</span> '+
'<span onclick="hideElement()" class="nascondi nascondiX vediX posvedoXoY">X</span> '+
' '
;
function hideElement() {
element = document.querySelector('.vedoXoY');
element.style.visibility = 'hidden';
element = document.querySelector('.nascondiX');
element.style.visibility = 'hidden';
element = document.querySelector('.vediY');
element.style.visibility = 'visible';
}
function showElement() {
element = document.querySelector('.vedoXoY');
element.style.visibility = 'visible';
element = document.querySelector('.vediX');
element.style.visibility = 'visible';
element = document.querySelector('.nascondiY');
element.style.visibility = 'hidden';
}
</script>
<div id="divpausa" style="position:fixed;
top:2.5rem;left:0;
top:50%;left:50%;
background-color:var(--bs-white) !important;
margin-left:-8.5rem !important; margin-top:-2rem !important;
border-radius:0.2rem !important; visibility:visible !important;">
<span id="pausa" class="spinner-border text-warning"></span>
<span style="background-color:transparent !important;">
<span id="Loading"
style="color:var(--bs-indigo) !important; font-size:2rem !important;">
Loading...</span>
<span id="percento"
style="color:var(--bs-indigo) !important;
font-size:2rem !important;font-variant:small-caps !important;">
</span>
</span>
</div>
<script>
function pausa(){
if (document.all){}
else if
(document.getElementById)
{
document.getElementById("pausa").style.visibility="hidden";
document.getElementById("percento").style.visibility="hidden";
document.getElementById("Loading").style.visibility="hidden";
document.getElementById("divpausa").style.visibility="hidden";
document.getElementById("body").style.visibility="visible";
document.getElementById("body").style.backgroundColor = 'default';
document.getElementById("html").style.backgroundColor = 'transparent';
}
}
var percento=document.getElementById("percento");
var contatore=1;
var intervallo=setInterval( function() { percento.innerHTML=contatore+"%";
contatore++; if (contatore===101) {clearInterval(intervallo);}
} , 9000)
</script>
<div id="fine"></div>
</body>
</html>
Alcune osservazioni vanno fatte per inserimento immagini. Se la definizione è alta in genere width 100percento va bene. Non altrettanto si può dire quando abbiamo dei francobolli a bassissima risoluzione che portati a 100 risulterebbero sgranati e pixellati. Ovviare a questo effetto con width auto.
template
<!DOCTYPE html>
<html id="html" lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> 2200 struttura base 20201227</title>
<script src="http://beatsupernovarasa.altervista.org/radice/radice.js"></script>
<style>
:root {background-color:rgba(255,170,0,0.5);}
body{ background-color:default; }
</style>
</head>
<body id="body" onload="pausa()" style="visibility:hidden;">
<main class="px-5">
<header class="titolo">
<blockquote class="text-center">
<div class="overflow-auto">
titolo <span style="font-size:1.25rem !important; ">[...]</span>
</div>
</blockquote>
</header>
<table class="table">
<tbody>
<tr>
<td id="colonna-sinistra" class="p-0 colonna-sinistra"> </td>
<td>
<table class="table">
<tr>
<td>
<section>
[qui le sezioni o gli articoli]
</section>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</main>
<div id="bsnr_kickstart_test">bug bsnr_kickstart_test</div>
<div id="piedipagina_menu_postcards" class="versionedelprogramma">bug piedipagina_menu_postcards</div>
<div id="show_hide_postcards">bug show_hide_postcards</div>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/kickstart/default.js"></script>
<script>
document.getElementById("piedipagina_menu_postcards").innerHTML=
' <section style="position:fixed; bottom:0; left:0;'+
' width:100%; text-align:left; border:solid 1rem transparent;"> '+
' <span style="margin-right:2.3rem !important;'+
' padding:0.2rem;'+
' background-color:oldlace; '+
' border-radius:0.4rem !important;'+
' border:solid 0.05rem navy !important;"> '+
' '+
' <button type="button" class="btn shadow-none bg-warning rounded" '+
' data-toggle="collapse" data-target="#collapsemenuapdp" '+
' aria-expanded="false" '+
' style="position:fixed; top:2.5rem; right:0; /* border-radius:0rem !important; border:solid 0rem black; */ "> '+
' '+
' <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-back" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/> '+
' </svg> '+ ' '+
' </button> '+
' <span style="visibility:hidden !important;">menu</span> '+
' <a href="#fine"> '+
' <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none" /> <path fill="maroon" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/> '+
' </svg></a> '+
' <span style="visibility:hidden !important;">menu</span> '+
' '+
' <a href="#"> '+
' <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"> <path d="M0 0h24v24H0V0z" fill="none"/> <path fill="maroon" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/> '+
' </svg></a> '+
' '+
' </span> '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' <div id="collapsemenuapdp" '+
' class="collapse dropdown-menuY border-0" '+
' style=" padding:0rem !important; '+
' '+
' background-color:rgba(0,85,85,0); '+
' border-left:solid 0.1rem rgba(255,170,0,1) !important; '+
' border-radius:0rem !important; '+
' background-color:rgba(255,170,0,0.85); "> '+
' <ul style="border:solid 0.25rem indigo !important; '+
' height:11.5rem !important; '+
' overflow:auto !important; border-radius:0.2rem !important; ">'+
' <a class="btn-warning rounded" '+
' href="index.html"> '+
' <span class="rounded p-1 fw-bold" style="background-color:indigo;color:oldlace;border:solid 0.1rem indigo;">'+
' home_page</span></a> '+
' '+
' '+
' '+
' '+
' '+
' </ul> '+
' <span class="p-0" style="font-size:small !important; background-color:indigo;color:oldlace;"> '+
' versione bs5 con aggiunte alfabeta 20201227_2200 '+
' </span> '+
' <a class="ml-2 btn-warning rounded" '+
' href="index.html"> '+
' <span class="rounded p-1 fw-bold" style="background-color:oldlace;color:indigo;border:solid 0.1rem indigo;box-shadow:0.2rem 0.2rem 0.4rem black !important;">'+
' home_page</span></a> '+
' </div> '+
' '+
' </section> '+
'';
document.getElementById("show_hide_postcards").innerHTML=
'<span class="position-fixed bottom-0 right-0 m-1 versionedelprogramma" '+
' style="border:solid 1rem transparent;"> '+
'<span onclick="hideElement()" class="nascondi" style="color:transparent !important;" >X</span> '+
'<span onclick="showElement()" class="vedi" style="color:transparent !important;" >Y</span> '+
'</span> '+
' '
;
function showElement() {
element = document.querySelector('.versionedelprogramma');
element.style.visibility = 'visible';
}
function hideElement() {
element = document.querySelector('.versionedelprogramma');
element.style.visibility = 'hidden';
}
</script>
<div id="divpausa" style="position:fixed;
top:2.5rem;left:0;
top:50%;left:50%;
background-color:var(--bs-white) !important;
margin-left:-8.5rem !important; margin-top:-2rem !important;
border-radius:0.2rem !important; visibility:visible !important;">
<span id="pausa" class="spinner-border text-warning"></span>
<span style="background-color:transparent !important;">
<span id="Loading"
style="color:var(--bs-indigo) !important; font-size:2rem !important;">
Loading...</span>
<span id="percento"
style="color:var(--bs-indigo) !important;
font-size:2rem !important;font-variant:small-caps !important;">
</span>
</span>
</div>
<script>
function pausa(){
if (document.all){}
else if
(document.getElementById)
{
document.getElementById("pausa").style.visibility="hidden";
document.getElementById("percento").style.visibility="hidden";
document.getElementById("Loading").style.visibility="hidden";
document.getElementById("divpausa").style.visibility="hidden";
document.getElementById("body").style.visibility="visible";
document.getElementById("body").style.backgroundColor = 'default';
document.getElementById("html").style.backgroundColor = 'transparent';
}
}
var percento=document.getElementById("percento");
var contatore=1;
var intervallo=setInterval( function() { percento.innerHTML=contatore+"%";
contatore++; if (contatore===101) {clearInterval(intervallo);}
} , 9000)
</script>
</body>
</html>
Come gestire le note
<a id="nota_indietro_000" href="#nota_000" class="note-cerchietto"> 0 </a>
<p id="nota_000" class="my-0"></p> <a class="text-link-note" href="#nota_indietro_000"> (0)</a>
Questo è un esempio del funzionamento di Date() sincronizzato ogni secondo
Questo è un dato statico che fotografa il momento in cui abbiamo caricato la pagina. Applicato al postfisso funziona perfettamente dato che è dinamico: eseguendo un refresh della pagina si noterà un incremento del valore assoluto dato dallo scorrere del tempo in secondi. Inserendo questo valore nella ricerca del file esterno si ottiene praticamente lo stesso risultato del numero random.
var elem = document.getElementById("incremento");
var numero = 0;
var intervallo = setInterval(contatore, 1000);
function contatore() {
numero=numero+1;
elem.innerHTML = numero;
if (numero==40) {
window.location.href="test.php"
}
}
Lo script esegue un incremento ogni secondo fino a 5sec dopodiché esegue test.php oppure si ferma il conteggio.
if (numero==5) {
// window.location.href="test.php"
clearInterval(intervallo);
}
Con un ulteriore sofisticazione si può visualizzare il conto alla rovescia
Da notare un possibile problema di rendering dato dalla comune idea che una string viene spezzata dal browser quando trova uno space il quale fa da separazione per individuare le parole in una proposizione. Ora appare un behavior non congruo con questo comportamento tra 0123456789-0123456789 e 01234567890123456789 oppure 0123456789 0123456789 , normalmente le prime due string sono una unica parola mentre la terza string è composta da due parole tuttavia nel browser Chrome la string uno è formata da due parole e solo la seconda è interpretata come una singola string.
Alcuni problemi con il footer si rilevano dato che il collapse ha una priorità la quale impedisce di accedere ad alcune funzionalità del programma. Occorre quindi procedere con il hide del componente bloccante.
vai all'esempio [toggle]Il toggle utilizza un solo bottone per attivare o disattivare una determinata attività.
<span class="versionedelprogramma"=VEDI/NASCONDI</span>
<span class="position-fixed bottom-0 right-0 m-1 versionedelprogramma">
<span onclick="showElement()" class="vedi"> </span>
<span onclick="hideElement()" class="nascondi"> </span>
</span=
function showElement() {
element = document.querySelector('.versionedelprogramma');
element.style.visibility = 'visible';
}
function hideElement() {
element = document.querySelector('.versionedelprogramma');
element.style.visibility = 'hidden';
}
Un ulteriore miglioramento avviene se i due pulsanti X e Y sono fatti visualmente coincidere effettuando un unico pulsante toggle ovvero attiva/disattiva
<span id="vedoXoY">bug vedoXoY</span>
<script>
document.getElementById("vedoXoY").innerHTML=
' '+
' '+
' <style> '+
' '+
' .posvedoXoY{'+
' position:fixed !important;'+
' right:0 !important;'+
' bottom:0 !important;'+
' color:transparent !important;'+
' margin-right: 0.5rem !important;'+
' margin-bottom: 1.0rem !important;'+
' '+
' }'+
' '+
' .vediY{ '+
' cursor:pointer !important;'+
' background-color:indigo !important;'+
' background-color:rgba(75,0,130,1) !important;'+
' border:solid 0.12rem rgba(75,0,130,1) !important;'+
' '+
' }'+
' '+
' .vediX{ '+
' cursor:pointer !important;'+
' background-color:orange !important;'+
' background-color:rgba(255,165,0,1) !important;'+
' border:solid 0.12rem rgba(75,0,130,1) !important;'+
' '+
' }'+
' '+
' '+
' '+
' </style> '+
' '+
' '+
'<span onclick="showElement()" class="vedi nascondiY vediY posvedoXoY">Y</span> '+
'<span onclick="hideElement()" class="nascondi nascondiX vediX posvedoXoY">X</span> '+
' '
;
function hideElement() {
element = document.querySelector('.vedoXoY');
element.style.visibility = 'hidden';
element = document.querySelector('.nascondiX');
element.style.visibility = 'hidden';
element = document.querySelector('.vediY');
element.style.visibility = 'visible';
}
function showElement() {
element = document.querySelector('.vedoXoY');
element.style.visibility = 'visible';
element = document.querySelector('.vediX');
element.style.visibility = 'visible';
element = document.querySelector('.nascondiY');
element.style.visibility = 'hidden';
}
</script>
Codice per copiare velocemente una porzione di testo.
<button onclick="copyToClipboard('#copia')">
<i>copy</i>
</button>
<p id="copia">
testo da copiare
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
/*
How to copy TEXT to Clipboard on Button-Click
A Pen By Shaik Maqsood
https://codepen.io/shaikmaqsood/pen/XmydxJ
*/
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
La funzione copyToClipboard funziona con un id occorre quindi fare molta attenzione a non duplicare gli ids.
jQuery bootstrap piedipagina show_hide tablone links bscompatto
ascii code (da 32 a 127) visualizzati secondo font-family predisposta
32 space
33 ! exclamation mark
34 " quotation mark
35 # number sign
36 $ dollar sign
37 % percent sign
38 & ampersand
39 ' apostrophe
40 ( left parenthesis
41 ) right parenthesis
42 * asterisk
43 + plus sign
44 , comma
45 - hyphen-minus
46 . full stop
47 / solidus
48 0 digit zero
49 1 digit one
50 2 digit two
51 3 digit three
52 4 digit four
53 5 digit five
54 6 digit six
55 7 digit seven
56 8 digit eight
57 9 digit nine
58 : colon
59 ; semicolon
60 < less-than sign
61 = equals sign
62 > greater-than sign
63 ? question mark
64 @ commercial at
65 A Latin capital letter A
66 B Latin capital letter B
67 C Latin capital letter C
68 D Latin capital letter D
69 E Latin capital letter E
70 F Latin capital letter F
71 G Latin capital letter G
72 H Latin capital letter H
73 I Latin capital letter I
74 J Latin capital letter J
75 K Latin capital letter K
76 L Latin capital letter L
77 M Latin capital letter M
78 N Latin capital letter N
79 O Latin capital letter O
80 P Latin capital letter P
81 Q Latin capital letter Q
82 R Latin capital letter R
83 S Latin capital letter S
84 T Latin capital letter T
85 U Latin capital letter U
86 V Latin capital letter V
87 W Latin capital letter W
88 X Latin capital letter X
89 Y Latin capital letter Y
90 Z Latin capital letter Z
91 [ left square bracket
92 \ reverse solidus
93 ] right square bracket
94 ^ circumflex accent
95 _ low line
96 ` grave accent
97 a Latin small letter a
98 b Latin small letter b
99 c Latin small letter c
100 d Latin small letter d
101 e Latin small letter e
102 f Latin small letter f
103 g Latin small letter g
104 h Latin small letter h
105 i Latin small letter i
106 j Latin small letter j
107 k Latin small letter k
108 l Latin small letter l
109 m Latin small letter m
110 n Latin small letter n
111 o Latin small letter o
112 p Latin small letter p
113 q Latin small letter q
114 r Latin small letter r
115 s Latin small letter s
116 t Latin small letter t
117 u Latin small letter u
118 v Latin small letter v
119 w Latin small letter w
120 x Latin small letter x
121 y Latin small letter y
122 z Latin small letter z
123 { left curly bracket
124 | vertical line
125 } right curly bracket
126 ~ tilde
127 DEL
Il codice ascii continua fino a 255.