le formule magiche

Soluzioni specifiche HTMLSpecific HTML solutions

Informazioni sull'accesso a queste risorse

Modulo di contatto per i membri
Per aiuto e segnalazioni

Membership index

NOTA: I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

Rassegna di soluzioni per differenti problematiche del codice HTML.

NOTA: per testare il codice puoi usare HTML Editor.


Body - deactivation of user functions

Body - disattivazione delle funzioni per l'utente

Esempio con tutte le voci insieme:

<body onselectstart="alert('Content protected by copyright!');
return false" oncontextmenu="alert('Content protected by copyright');
return false" ondragstart="alert('Content protected by copyright');
return false" onkeydown="alert('Content protected by copyright');
return false" onmousedown="alert('Content protected by copyright');return false">

Descrizione delle singole voci:

onselectstart = disabilita selezione (in tutti i modi)
oncontextmenu = disabilita tasto dx
ondragstart = disabilita trascinamento
onkeydown = disabilita tastiera
onmousedown = disabilita tasti del mouse

Open all the page links in a new tab

Aprire tutti i link della pagina in una nuova scheda

 <head>
  <base target="_blank">
</head>

Link href="#" without page jumps to the top

Link href="#" senza ritorno della pagina al top

Quando un link contiene il simbolo # (es: chiusura modal), cliccandolo causa il ritorno della pagina al bordo superiore. Per evitarlo basta aggiungere un numero al cancelletto. Es: href="#1"

Button that opens a alert window

Pulsante che apre una finestra di avviso

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Expandable content (details - summary)

Contenuto espandibile - details, summary

<details>
  <summary>Open</summary>
  <p>Here you can put some content...</p>
  <p>... and anything else you want :)</p>
</details>

Browser support: https://caniuse.com/#feat=details
NOTA: La tendina è chiusa per default al caricamento. Per averla aperta, basta aggiungere l'attributo open a details.
Es: <details open>
In alternativa, potete usare Javascript:
Javascript solutions

Clickable phone number

Numero di telefono cliccabile

Per rendere un numero di telefono cliccabile da cellulare, basta impostarlo in questo modo:
<a href="tel:XXXXXXXXXXXXX">Telefono</a>

Link with error in file manager

Link con errore nel file manager

Alcuni link a pagine esterne vengono segnati come errore dal file manager.
Spesso questo è causato dal simbolo & contenuto nel link. Di solito il collegamento funziona ugualmente, ma, per eliminare l'errore, è possibile sostituire & con &amp;& with &amp;.
Verificare sempre che, dopo la correzione, il link continui a funzionare.

New line in tooltip

Andare a capo in un tooltip

Per andare a capo con il testo in un tooltip, bisogna usare il simbolo &#13.
Esempio:
<img src="img.jpg" title="testo&#13testo">

Titles in a list

Titoli in un elenco

È lecito inserire i tag dei titoli (h2, h3, h4 ..) all'interno di un elenco tra i tag <li> </li>
Il problema è che i puntini (bullets) non saranno allineati con il titolo su alcuni dispositivi mobili.
Appariranno in questo modo:


   Title

   Title

Per risolvere il problema, basta applicare la regola "display:inline" ai tag (h2, h3, h4 ..).

Color-picker

Classic color-picker

Color picker classico

Esempio:

<input type="color" value="#f86f0b">

Open color picker on click

Color-picker che si apre cliccando su un link testuale

Esempio:

<style>
#color-picker {
display: none;
}
.color-picker {
  cursor: pointer;
  text-decoration: underline;
}
.color-picker:hover {
  color: #ffa500;
}
</style>

<input type="color" id="color-picker" value="#f86f0b">
<label for="color-picker" class="color-picker">color</label>

Color-picker with text field

Color picker con casella di testo

Esempio:


<input id="background-color" type="color" value="#ff0000" onchange="javascript:document.getElementById('chosen-color').value = document.getElementById('background-color').value;">
<br>
<input id="chosen-color" type="text" readonly="" value="#ff0000">


Membership index