0
Nov 04 2017

Contenteditable: un’utopia

Qualche tempo fa avevo cominciato a sviluppare una piccola webapp ad uso interno con Vue.js e, volendo implementare dei tag, mi serviva anche un input per modificarli.

Prima che un mio amico mi consigliasse Vue-Multiselect, avevo provato diversi tag input, di cui alcuni non funzionanti, altri invece che non soddisfacevano tutti i miei requisiti: l’integrazione con Vue, la possibilità di integrarli col design del resto del sito (o quanto meno che sembrassero abbastanza coerenti con Bootstrap, visto che mi sto basando su quello) e che avessero l’autocompletamento.

Non trovandone nessuno che facesse al caso mio, ho deciso di cominciare a scrivere un input tag “universale” con queste caratteristica:

  • indipendenza da qualsiasi libreria, in modo che se altri si fossero trovati nella mia situazione avrebbero potuto usarlo;
  • completa libertà grafica per i designer;
  • possibilità di implementare un auto completamento (scriverne uno che non abbia alcuna dipendenza è un lavoro abbastanza lungo e inutile).

Come soluzione avevo trovato di usare un div con contenteditable="true" (un attributo molto, molto vecchio, disponibile persino su Internet Explorer 6, “il terribile”) e un [Leggi il resto...]

0
Feb 13 2011

Funzione “input” per Smarty

Ho creato una funzione per creare in automatico degli input su smarty, di tutti i tipi.

Forse quello più incompleto è il checkbox, che però per il momento non mi risulta utile cambiare.

Un’altra caratteristica di questa funzione è quella di fissare un value se presente in $_POST o in $_REQUEST ad esclusione dell’input type="password".

Il codice PHP è:

[Leggi il resto...]
3
Dic 28 2010

Epic Win: Inserire un filmato SWF

Oggi mi sono reso conto di un mio epic win fenomenale che però appartiene al passato.

Qualche tempo fa mi appassionavo molto ai forum e ne seguivo uno di supporto a un hoster di forum.

C’era una discussione sui vari tag HTML per mettere i contenuti multimediali.

Per il flash c’era solo l’embed, così ho postato il vero codice, quello con l’object.

Allora uno mi dice su perché in realtà l’embed era contenuto nel mio codice, che non serviva a niente, che dicevo cavolate.

Precisiamo subito che per chi non lo sapesse l’embed è messo per compatibilità con i vecchi browser.

Oggi ho realizzato che il W3C vuole dichiarare obsoleto il tag embed un po’ come il font, anzi, l’ha già fatto (per esempio nell’XHTML 1.1 non c’è).

Ora, chi aveva il codice più sbagliato? Io o te utente di cui per fortuna tua non mi ricordo l’username?

Direi Epic Win!

7
Set 07 2010

Menu stile applicazioni con jQuery

È assai strano per me pubblicare post di questo genere.

Ho pubblicato ancora dei tutorial ma mai sulla costruzione di pagine web.

E così questo è il primo.

Avevo promesso a Lantaca di fare questo tutorial sui menu con jQuery perché lui ha fatto il suo tema di Windows.

Così lo scopo di questo tutorial è di creare… l’ambiente desktop di GNOME (l’ambiente desktop che hanno anche distribuzioni GNU Linux). Più precisamente ho usato lo sfondo standard di Debian e anche il suo logo.

Partiamo dall’HTML: ho usato un div in alto con id topmenu contenente una lista per i vari menu principali (Applicazioni, Risorse e Sistema). Degli elementi solo il primo ha una classe con l’unico fine di mettere il logo di Debian.

Dentro ogni elemento c’era uno span.menu-item contenente il nome del menu e un div.menucontent con il contenuto che è fatto sempre a liste.

Il CSS è facile.

Al div#topmenu è stato dato il posizionamento assoluto in alto, altezza di 24px, sfondo etc.

Ai li della lista principale è stato messo float: left; per tenerli ognuno a sinistra dell’altro.

Ai div.menucontent è stato applicato il posizionamento assoluto per non fare troppo spazio tra i menu, una larghezza fissa e… [Leggi il resto...]

0
Apr 05 2010

Come andare contro la trasformazione dei simboli

Purtroppo certe volte i servizi di blog fanno brutti scherzi, come togliere i backslash, cioè \.

Per rimetterli basta usare i codici HTML…

Eccone alcuni:

  • & = &
  • \ = \
  • * = *
  • &#60; = <
  • &#62; = >
  • &#34; = "
  • &#39; = '
  • &#64; = @
  • &#45; = -
  • &#95; = _
  • &#46; = .
  • &#91; = [
  • &#93; = ]

Può essere che la pagina venga aggiornata in futuro perché userò questa come pagina di riferimento, comunque al massimo basta che cercate su google HTML Code For Symbols e dovreste trovare un sacco di siti…