Qua la mano, cumbar’… to’, la mano scumbar’!

Ovvero: volevo inviare una mail a hubrys però ho pensato che: 1) se gli avessi mandato un messaggio privato per spiegarglielo Splinder si sarebbe mangiato il codice HTML che serviva senza far capire una cippa al destinatario, come accadde con Ossimorosa, e 2) alla fine è una cosa che può interessare anche altri.

Ovvero, ancora: se nel post precedente avevo ricercato quel minimo di comprensibilità, adesso non ci capirete na mazza pe’ ddavero.

Allora.

Capita, in una pagina HTML, quale può essere appunto il proprio blog, di avere dei blocchi di testo che occupano un po’ troppo spazio. Ad esempio, c’è chi ha molti link ad altri blog, c’è chi invece mette da parte una lista di link ai vari post che fan parte di una serie (ad esempio la tragica Telecomachia ^^), e così via.

Ebbene, noi vi possiamo aiutare. Dove noi sta per io e il DHTML, che a sua volta sta per Dynamic HyperText Markup Language, che a sua volta sta semplicemente per combinazione di CSS, Javascript e HTML (anzi, XHTML perché noi siamo fighi e usiamo le ultime novità del mercato).

Premesse generali, sostanzialmente inutili in questo contesto, ma che posson sempre servire in futuro.

Il CSS serve a definire molto più facilmente le proprietà di un oggetto HTML. Ad esempio, mettiamo di voler rendere un paragrafo di testo rosso. Senza CSS avremmo scritto:

<p>
 <font color="red">
  Questo è il testo che diventa rosso.
 </font>
</p>

Invece noi che siamo bravi e vogliamo fare i fighi che tra l’altro risparmiano pure un po’ di spazio, scriveremo:

<p style="color: red;">
 Questo è il testo che diventa rosso.
</p>

Voi direte: l’effetto è lo stesso, allora che ci frega? In verità vi dico, questa cosa ha un suo senso, ma se non lo capite in questo post come se fosse una rivelazione divina non ve lo potrò spiegare altrimenti, anche perché se no a quest’ora lavorerei alla Jackson Libri e voi comprereste libri da 700 pagine per la modica cifra di 50 euro (ehi, ci devo pensare…).

Ok, ve lo dico. La vera utilità del CSS risiede nelle classi. Sono una cosa fighissima: mettiamo il caso di avere 10 paragrafi disseminati qua e là, e noi vogliamo che siano mostrati tutti alla stessa maniera. Per esempio, questi 10 paragrafi, al contrario degli altri, devono essere tutti gialli su sfondo nero.

Ciao! Sono un paragrafo giallo su sfondo nero!

Per renderli così dovremmo scrivere qualcosa tipo:

<p style="background-color: black; color: yellow;">
 Ciao! Sono un paragrafo giallo su sfondo nero!
</p>
<p style="background-color: black; color: yellow;">
 Ciao! Sono un altro paragrafo giallo su sfondo nero!
</p>
<p style="background-color: black; color: yellow;">
  Me' basta. Fate finta che io sia già il decimo.
</p>

Sai che rottura se decidiamo, all’improvviso, di cambiare qualcosa, tipo mettere uno sfondo verde anziché uno sfondo nero? Se invece ci inventiamo una classe, e la chiamiamo, chessò, pippo, ci risparmiamo un altro po’ di rotture. La prima rottura che ci risparmiamo consiste nello scrivere, invece, così:

<p class="pippo">
 Ciao! Sono un paragrafo giallo su sfondo nero!
</p>
<p class="pippo">
 Ciao! Sono un altro paragrafo giallo su sfondo nero!
</p>
<p class="pippo">
  Me' basta. Fate finta che io sia già il decimo.
</p>

Chiaramente dobbiamo anche spiegare a qualcuno ‘sto pippo che mi rappresenta. Questo lo andiamo a fare all’inizio del codice HTML, nella sezione compresa fra <head> e </head> (intestazione), e più in particolare in uno spazio delimitato da <style type="text/css"> e </style> (che troverete già, bello come il sole e pronto per essere manipolato):

p.pippo
{
 background-color: black;
 color: yellow;
}

A questo punto, se volessimo cambiare qualcosa, ad esempio appunto lo sfondo, faremo una semplice modifica alla definizione di pippo anziché andare a modificare dieci paragrafi:

p.pippo
{
 background-color: black;
 color: green;
}

Ok, smettetela di scorrere la pagina: la parte interessante è qui.

Esiste una proprietà del CSS chiamata display, che può assumere alcuni valori. Quelli che servono a noi sono block e none. Senza scendere nei dettagli, se impostiamo display: block, l’oggetto viene mostrato, se mettiamo invece display: none, l’oggetto c’è ma non si vede.

Piccolo esempio:

Fai clic qui per mostrare/nascondere il testo.

Per prima cosa dobbiamo inserire una piccola funzione Javascript, possibilmente nell’intestazione (cioè, come detto prima, quella sezione del codice HTML compresa fra <head> e </head>). Il codice l’ho rubato a Trentamarlboro, che ringrazio e con cui mi complimento davvero se per caso è lui l’autore, vista l’implementazione semplice ma efficace:

<script type="text/javascript">
function toggle(id) {
 if (document.all) {
  if (document.all[id].style.display == 'none') {
   document.all[id].style.display = '';
  } else {
   document.all[id].style.display = 'none';
  }
  return false;
 } else if (document.getElementById) {
  if (document.getElementById(id).style.display == 'none') {
   document.getElementById(id).style.display = 'block';
  } else {
   document.getElementById(id).style.display = 'none';
  }
  return false;
 }
}
</script>

Successivamente dobbiamo modificare tutte quelle parti del codice HTML che vogliamo modificare. Per esempio, prendiamo quello che avrebbe dovuto fare hubrys per la serie della Telecomachia (mi permetto di aggiustarlo un po’ perché in realtà ci sono dei piccoli errori nel codice originale):

<div class="boxSidebar">
<h2 class="sectiontitle">Biastemario:</h2>
<h3>TELECOMACHIA</h3>
<a href="http://...">Prima puntata</a><br />
<a href="http://...">Seconda puntata</a><br />
<a href="http://...">Terza puntata</a><br />
...
</div>

In questo caso diventa:

<div class="boxSidebar">
<h2 class="sectiontitle">Biastermario:</h2>
<h3>
 <a href="javascript: void(0);" onClick="toggle('biast_telecom');">TELECOMACHIA</a>
 </h3>
<div id="biast_telecom">
  <a href="http://...">Prima puntata</a><br />
  <a href="http://...">Seconda puntata</a><br />
  <a href="http://...">Terza puntata</a><br />
  ...
</div>

In questo modo apparirà più o meno come segue:

Biastemario:
TELECOMACHIA

 

Ok. Attendo notizie.

15 thoughts on “Qua la mano, cumbar’… to’, la mano scumbar’!

  1. Minchia, stavo proprio cercando questo… credo di amarti. :D Chissà se riesco a darlo in pasto senza tanti sbattimenti anche a Blogger (immagino di sì… di solito fa storie solo per maiuscole/minuscole).

  2. Ma si parla per caso della cosa che ho fatto io?

    Perché quando ho visto pezzi di codice che mi sono familiari lo ammetto, ho saltellato un po’ nella lettura.

    La cosa che più mi stupisce è che fino ad ora funziona tutto. Pare, e sottolieno pare, io sia riuscita a fare quello che volevo senza andare incontro a danni irreversibili. Oltretutto mi dicono che si configura bene sia usando mac che windows, sia firefox che safari (ogni tanto lo uso io) che explorer. Con linux non ho ancora controllato ma credo funga.

    Cioè.

    Funziona!

    Ma ti sei lanciato in questa spiegazione sotto gentile richiesta del cattomoderasta?

  3. credo che ti meriterai un premio, quando capirò e applicherò tutto ciò, che mi pare meraviglioso come quando mi insegnarono a-e-i-o-u.

    mi si aprono orizzonti sconfinati, e distese azzurre e verdi praterie/dove corrono dolcissime le telecomachie…

    :)

    per adesso grazie

  4. premesso che ho capito il senso del post dal titolo (a differenza degli altri a quanto pare), credo che un gioro potrebbe tornarmi utile questo codice…ma proprio se mi ci voglio applicare…eh, mica sono l’ossimorosa io!

    (sca-mar-cio!)

  5. Ecco, potreste provare a convincere hubrys a partecipare… :P

    Comunque per il come vi darò dettagli non appena trovate il terzo (o anche quarto e più, se vi riesce ^^) incomodo; il quando chiaramente è il prossimo post utile, il chi lo deciderete voi, e il perché… eh… questa è una domanda difficile assai :P

    @hubrys: contro la sindrome da muratore questo commento è la soluzione.

  6. sono andato da dorian, poi da ossimorosa, poi son stato dirottato qui di nuovo. mi sento sempre come prima, con la differenza che non trovo il buffet…

  7. Allora si dia inizio allo scamarcio contest!

    Partecipanti effettivi fino ad ora: tu, io e presumo Dorian (se si tira indietro sono guai)

    Forse ho convinto bombay.

    Facci sapere, oh magister!

  8. giammai mi tirerò indietro!

    che abbia inizio lo scamarcio-contest,

    e direi che per dare l’esempio il magister dovrebbe postare ^^

    hubrys il tutto nacque a causa del post del giovine thelegs intitolato “no step”, ma l’obiezione fu di ossimorosa!! io rivesto il ruolo di coro greco.

    nonchè petulante censore.

    evviva evviva!

    venghino siori venghino

Note something down here. Put some effort into it.