Div oscurabile

[andrea-dindya]

Ciao ragazzi,

qualcuno di voi sa se è possibile realizzare con i css un div che al click del mouse collassi e diventi invisibile? Tanto per intenderci come uno show more fatto in javascritp come se ne vedono molti in giro.
Il mio problema è che devo creare un'applicazione in php che mostri una serie di notizie, di ciascuna notizia si deve poter leggere solo i primi 60 caratteri e gli eventuali rimanenti in un div nascosto che diventa visibile al clic del mouse.
Se uso javascript dovrei creare una funzione per ogni "show more", voglio evitarlo perchè sarebbe stupido avere 100 funzioni per 100 notizie (tanto per fare un esempio).
Mi domandavo se una soluzione del genere si può fare con i css e dove posso trovare una cosa del genere.

Vi ringrazio
Andrea

[Giovà22]

Non credo che col css si possano fare cose del genere. Forse se lavori sul php, inserendo un "onclick" puoi avere qualcosa a comparsa, ma creare l'animazione di un'apertura del div senza script mi pare difficile.

[evan75]

E' possibile, ma funziona solo con alcuni tipi di browser.. e guarda caso, non funziona con IE 6>

in pratica dai uno stato :active al div stesso
all'inizio è nascosto, poi viene visualizzato.
è un po' lo stesso principio di un menu a cascata fatto con i css.

ti ho fatto un esempio velocissimo stringato al massimo, per farti vedere il codice.

(usa FF perchè se usi IE non vedi nulla)

http://www.webartists.it/webartists_...pandibile.html

spero ti possa essere utile..

ciao

-E75

[Mich_]

Se l'evento scatenante l'apertura DEVE essere il click, devi per forza usare JS.
Certamente non servono 100 funzioni, ne basta una a cui passi un riferimento(*).

PERO`
tieni presente che un JS di tale tipo e` intrusivo, cioe` se il brwoser non ha JS (o e` disattivato) l'utente non puo` leggere il testo. Quindi se vuoi usare JS devi usare qualche trucco per rendere la cosa accessibile.

Se invece ti basta l'evento mouseover, esiste anche in CSS (si chiama :hover) e con alcuni accorgimenti si puo` far funzionare in tutti i browser.


(*) Ecco un esempio di JS con passaggio parametro:
show more
Poi il JS deve decodificare il parametro passato, e risalire all'oggetto da aprire/modificare (potrebbe essere il padre di "this" o il nonno a seconda di come e` la marcatura).

[andrea-dindya]

Vi ringrazio per i numerosi suggerimenti,
non ho alcun problema ad usare javascript ma il fatto che in tal caso cliccando su un link "mostra" (diciamo così) mi si apre sempre lo stesso div nascosto anche se clicco su un link che non è quello giusto

guardate questo esempio.
http://webdesignerss.interfree.it/showmore/test.html

come posso fare?

[Mich_]

Forse hai fatto un po' di confusione. ...

Ci sono gravi errori di HTML e CSS, che impediscono al JS di funzionare.
NON PUOI dare id uguali a due oggetti diversi: come fa poi il JS a capire a cosa ti riferisci?

E non usare segni matematici all'interno dei nomi: i browser di solito capiscono correttamente per quanto riguarda il CSS (anche se potrebbero far confusionie), ma il JS interpreta il - come segno meno, e questo puo` portare a comportamenti "strani".

[andrea-dindya]

Si, hai perfettaemnte ragione che ho commesso degli errori in HTML chiamando con lo stesso nome du eoggetti diversi. Ma se li chiamassi con nomi diversi non dovrei (forse) avere un javascript per ciascun oggetto? E' proprio questo che voglio evitare. Ipotizza di avere 100 testi oscurati, dovrei avrere 100 javascript che li gestiscono? Scusa ma non sono molto forte in javascript, potersti aiutarmi a trovare una soluzione?

[Mich_]

Ma l'hai gia` usata la soluzione. Hai passato il nome dell'oggetto che vuoi vedere: basta che cambi nome ad ogni chiamata.

Io veramente pensavo ad un metodo piu` "furbo" (passando il this e decodificandolo all'interno della funzione), ma anche il tuo puo` funzionare (e` piu` semplice all'inizio, ma complica un pelo la parte lato server).
Il problema e` strutturare bene la pagina.

esempio:

<div id="notizia1" class="hide">
  <p class="alwayson"> questo e` l'inizio della notizia 1</p>
  <p class="readmore">show more</p>
  <p class="normallyhidden">continuazione della notizia 1</p>
  <p class="readless">show less</p>
</div>

A questo punto alle funzioni ShowMore() e ShowLess() stai passando il nome del blocco.
All'interno delle funzioni fai riferimento ai vari oggetti contenuti cosi`:

function ShowMore(idblocco) {
  document.getElementById(idblocco).className = "show";
}
function ShowLess(idblocco) {
  document.getElementById(idblocco).className = "hide";
}

A questo punto e` cruciale avere il CSS strutturato correttamente:

.hide .readmore {
  display: block;
  float: right;
}
.hide .normallyhidden {
  display: none;
}
.hide .readless {
  display: none;
}

.show .readmore {
  display: none;
}
.show .normallyhidden {
  display: block;
}
.show .readless {
  display: block;
  float: right;
}

[andrea-dindya]

Grazie è proprio la soluzione che stavo cercando. Sei un mito. Come ti ho detto sono più bravo in php che in javascript (dove mi sento una capra...). E' arrivato il momento di mettermi a studiarlo.
Ti ringrazio ancora

[Mich_]

Originariamente inviato da andrea-dindya
Grazie è proprio la soluzione che stavo cercando. Sei un mito. Come ti ho detto sono più bravo in php che in javascript (dove mi sento una capra...). E' arrivato il momento di mettermi a studiarlo.
Ti ringrazio ancora

Nota che nalla "mia" soluzione il JS e` proprio poco. Il lavoro viene fatto dal CSS.
pero` e` comunque una soluzione intrusiva. Una possibile scappatoia sarebbe:

HTML:
<div id="notizia1" class="noscript">

CSS: (da aggiungere all'altro)
.noscript .readmore {
  display: none;
}
.noscript .normallyhidden {
  display: block;
}
.noscript .readless {
  display: none;
}

JS (da inserire all'evento onload della pagina)
var lista = document.getElementById(ID_CONTENITORE).getElementsByTagName('div');
for (l=0; l<lista.length; l++) {
  if (lista(l).id.indexOf('notiz') == 0) lista(l).className = "hide";   /* (*) */
}

(*) Nota: non so se esiste la proprieta` id degli oggetti; ci deve comunque essere un modo per verificare se l'id inizia con una determinata stringa (oppure se la classe e` "noscript") e in tal caso combiarla.

Questo metodo e` non-intrusivo, in quanto in mancanza di JS si vede tutta la notizia, in presenza di JS una parte delle notizie viene nascosta.