Olimpo Informatico

[mozart2]

Salve a tutti,

ho delle pagine in html e php, contenenti varie voci e vorrei farle in stile wikipedia mobile, nel senso che si clicca sul titolo (topic) e sotto appare tutto il testo che vi appartiene, linko una pagina random da wikiepdia nel caso non fosse chiaro quello che intendo:
wikipedia

(se il browser vi rimanda sulla pagina non mobile dovete andare in basso a destra per lo switch)

Sulla pagina linkata potete cliccare su:
- Gameplay
- History
- Reception
- See also
- References
- External links
per far apparire e scomparire il testo, mi chiedevo se fosse possibile fare una cosa analoga in php, purtroppo cercando con termini "testo a scomparsa" si trovano solo guide in altri linguaggi per avere testo che appare e scompare in base al posizionamento del mouse, non quello che mi interessa quindi.


Un grazie in anticipo

Mozart2

[freemind]

Ciao, se lo vuoi fare SOLO in php si può ma viene una "vaccata" e scusa il termine.
Dovresti far ciclare la pagina su se stessa e decidere se quella voce è da visualizzare oppure no e tenere conto dello stato delle altre.
Per fare una cosa che abbia come effetto più o meno quello della pagina da te linkata devi per forza usare javascript.
Usando jquery (o altri framework) puoi anche ottenere qualche effetto carino senza diventare matto altrimenti basta anche solo javascript "secco".
Secondo me la libidine massima la otterresti non come wikipedia ma chiamare di volta in volta i chunk che contengono le varie parti in modo che quando apri la pagina la prima volta questa contiene solo quello che vedi e non parti nascoste in modo da essere più leggera.

[mozart2]

Ecco, temevo una risposta come questa, che il php non basta...
La vaccata proposta la avevo pensata anche io, ma... è proprio una vaccata

Allora, detto sinceramente non conosco niente di javascript, jquery e via dicendo, tenendo conto che il sito è piccolo, e che al momento è l'unico effetto che voglio aggiungere, se trovo una documentazione che parte dalle basi piena di esempi potrei anche farcela.

La tua proposta mi sembra iteressante, ma come fai a sapere che gia wikipedia non faccia così?

È buona la guida: w3c
oppure consigliate qualcos'altro?

Domanda scema (perché non conosco ancora javascript) che forse farei meglio a posticipare, ma i chunck da te nominati andrebbero su file terzi, oppure potrebbero stare sullo stesso file php?

Perché a questo punto, se possibile, mi piacerebbe scrivere il pezzo di javascript che da l'effetto voluto su un file terzo, che viene richiamato da ogni pagina php che lo necessità (visto che tutte le pagine php hanno la stessa struttura), in modo da tenere su file separati la forma della pagina (per il quale ho fatto un file css), il contenuto (attualmente su file php e html) e gli effetti grafici (da fare ora in javascript).
Il tutto per avere ordine, piccola mania personale

Grazie per il consiglio!

edit:
ripensandoci, caricare a posteriori i chunck potrebbe non essere una buona idea. Se un utente disabilita javascript sul suo computer non sarebbe in grado di vedere i contenuti, mentre su wikipedia (appena testato disablitando javascript) i contenuti sono subito tutti visibili, e non si può cliccare per mostrarlo/nasconderlo.

[freemind]

Dunque, adesso non riesco ma domani provo a metterti giù due righe io; non è difficile quello che vuoi fare e usando un framework js la cosa diventa ancora più semplice.

Non ho passato al debugger la pagina che hai linkato ma visto che cliccando i link per aprire le sezioni non vedo ciclare la stessa ma solo apparire/scomparire il contenuto deduco che faccia come ho detto.

Il link verso w3c va bene però fa conto che sul quel sito i tutorial non sono proprio il top nel senso che servono solo a descrivere quello che è lo standard.
Su internet trovi di tutto sul javascript quindi non preoccuparti delle guide: ci sono di ogni tipo.

Per come strutturare i files: tu hai un db sotto oppure ogni pagina è a se?
Se ci fosse il db la cosa sarebbe veramente veloce perchè la pagina principale verrebbe generata dinamicamente con il contenuto di base e poi i chunk verrebbero pescati dal db in base all'id.
Se così non fosse non importa perchè a questo punti avresti tanti file php quanti sono i chunk (oppure uno per ogni pagina principale che con una if visualizza quello giusto).

Non c'è alcun problema nel avere del codice javascript riutilizzabile: si cra una funzione e la si mette in un file e poi dove serve si include il codice e lo si usa (come con tutti i linguaggi).

[mozart2]

Grazie mille per l'aiuto.

No, non uso db, solo pagine php, html e il foglio di stile css al momento.
Alcune pagine php richiamano dei contenuti html per non dover riscrivere le stesse cose decine e decine di volte, come il header e il footer.

E all'interno di alcune pagine php, il cui contenuto è un po' lungo, vorrei appunto mettere questo 'effetto' per non presentare una pagine lunghissima al primo colpo, ma per raggiungere subito il contenuto interessato.


edit:
non so se hai visto l'edit precedente, ma credo che sia meglio caricare tutti i contenuti nell'eventualità un utente disabiliti javascript, no?

[mozart2]

Allora, intanto ho guardato un po' in giro e mi è sembrato di capire che devo usare onclick visto che voglio che il tutto cambi quando clicko sul titolo.

Leggendo in rete ho estrapolato questo comando, inutile dire che non sono in grado di comprenderlo appieno e nemmeno dire se funziona...
ad esempio non mi è chiaro dove si debba posizionare il testo...

<div id="MyInfo" style="display:none;">Qui le informazioni</div>
<a href="#" title="Mostra Info" onclick="document.getElementById('MyInfo').style.display='block';">Mostra Info</a>

Mi sembra chiaro che nel div vada messo il testo, mentre onclick camuffato da link permette di far apparire (e sparire?) il testo richiesto, anche se non comprendo ancora il comando, come non mi è nemmeno chiaro dove debba apparire il testo.


Edit:
ho trovato e testato anche come nascondere il testo:

<a href="#" title="Nascondi Info"
onClick="document.getElementById('MYInfo').style.display='none';">Hide content again</a>

mi sono sorti però alcuni dubbi, nei codici postati ho sempre
href="#"
mentre da un'altra parte ho trovato
href="javascript:;"
una delle due espressioni è più corretta?

Inoltre non riesco a capire bene come riunire i due comandi sotto uno solo, potrei fare una funzione esterna, ma mi sembra esagerato, non riesco capire come, con javascript, vedere se il testo mostrato o meno.

[mozart2]

Allora, sono riuscito nel 99% del mio intento, ecco il codice:

[mozart2]

Sono abbastanza sicuro (usando onclick) che il codice sia corretto, se togliete i tag html funziona, altrimenti no...

[mozart2]

Dopo lungho testare (scusa se non ho aspettato il codice bello e pronto, ma almeno così imparavo qualcosa), sono riuscito, in locale, ad avere del codice funzionante.

[SverX]

secondo me dovresti mettere tutte le sezioni visibili, e via JavaScript nasconderle quando carica. Così dove JavaScript è disabilitato rimangono visibili.

[mozart2]

Ottimo consiglio, lo ho appena applicato tramite la funzione onload all'interno del body:

[SverX]

non saprei, forse via javascript si può cambiare il default nel css... così se javascript è disabilitato viene mostrato tutto, se invece è abilitato non devi esplicitamente fare il toggle di ognuno nell'onLoad...

[mozart2]

Mhm

non conosco così bene i css per integrarli con javascript...

[SverX]

scusa, intendo che probabilmente puoi cambiare direttamente gli stili via javascript... ma mi fermo perché qui sono già su terreno sconosciuto...

[mozart2]

A questo punto però devo comunque fare un controllo se l'utente ha javascript abilitato o meno, tanto vale rendere