WebSite X5Help Center

 
Ferdinando C.
Ferdinando C.
User

Nascondere/mostrare una sezione di una pagina  it

Auteur : Ferdinando C.
Visité 3769, Followers 2, Partagé 0  

Buonasera a tutti.

Espongo qual'è il mio problema (perdonatemi la scarsa competenza sul prodotto ma ho cominciato da poco, ho cercato invano una soluzione leggendo altri post ma non ci sono riuscito).

Vorrei inserire in una pagina una sezione "nascosta" per default. Questa sezione dovrebbe attivarsi espandendosi verticalmente al di sotto di una frase classica del tipo "leggi tutto...".

Ancora più carino sarebbe se, dopo essersi espansa, ci fosse la possibilità di nasconderla nuovamente cliccando su una frase del tipo "leggi meno..." o qualcosa del genere.

Tutto quello che ho trovato sul forum mi riconduce ad aprire una popup o una shwbox ma non è quello che vorrei fare io.

Non so se sono riuscito ad esprimermi correttamente.

Grazie a prescondere per la pazienza ed eventuale supporto.

Saluti

Posté le
25 RéPONSES - 2 UTILE - 1 CORRECT
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... oppure aggiungo, ...trattandosi sempre di soluzione EXTRA, ...che con il "fai da te", ...potresti usare il metodo JS div_sino che avevo proposto diversi anni fa; ...purtroppo gli esempi sono andati estinti, ma ripensandoci, sarebbe semplice da ottenere...

... purtroppo non ho il programma, ma nel caso di interessasse, posta il LINK della pagina, con i due testi, l'anteprima e lo sviluppo del testo, in due oggetti incolonnati, possibilmente senza altri oggetti affiancati, e poi vedremo il da farsi, che alla fin fine potrebbe! risulterebbe semplice, e senza effetti extra...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Ferdinando C.
Ferdinando C.
User
Auteur

Intanto vi ringrazio per gli aiuti.

Dalle Vs. risposte mi pare però di capire che non esiste nulla di nativo in WebSite X5 pro v.14) che mi aiuti a risolvere il problema.

Devo necessariamente ricorrere a codice aggiuntivo (avrei voluto evitare).

Per il momento ho trovato come alternativa la showbox, peccato che non se ne riesca a gestire in alcun modo la larghezza.

Pensate che se guardo il sito da smartphone, la showbox è larga al massimo un paio di cm e non c'è modo di allargarla :-(

Lire plus
Posté le de Ferdinando C.
Gianfranco G.
Gianfranco G.
User

Ciao, in realtà qualcosa del genere si più ‘simulare’ con l’uso di testo su più schede, ma il problema è che lo spazio che sarà diempito dal testo da espandere rimarrà inizialmente vuoto. Ma se posso permettermi, gli esempi che hanno postato sono semplicissimi da integrare (ho provato in pochi minuti quello suggerito da Claudio e funziona alla perfezione ed è facile da usare). Vedi tu cosa ti conviene fare.

Lire plus
Posté le de Gianfranco G.
Ferdinando C.
Ferdinando C.
User
Auteur

Ci proverò. Sulla larghezza della showbox mi devo rassegnare??? C'è un modo per modificarla?

Grazie

Lire plus
Posté le de Ferdinando C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... prova con il metodo di EsseDi ... dettagliato in tutti i passaggi e con varie opzioni personalizzabili, basta un minimo di impegno; oppure con un copia/incolla quelli proposti da Mirko e Claudio...

... tempo fa per verificare avevo fatto una rapida prova con gli >> IFRAME ...molto flessibili per contenuti esterni, magari adatto per pagine nascoste del progetto stesso...

.



Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Esse Di
Esse Di
User

Mi sono accorto di avere pubblicato erroneamente il sito realizzato per la versione 11.

Ho provveduto a correggere l'errore, per cui ora cliccando sul link segnalato si apre correttamente il sito della versione 13

Nel frattempo ho verificato la validità dei codici anche per la versione 14 e ne ho pubblicato il sito.

Ricapitolando:

http://www.essedi.altervista.org/_EVO13/_showhide/index.html  per la versione EVO 13

http://www.essedi.altervista.org/_EVO14/_showhide/index.html  per la versione EVO 14

I codicici sono praticamenteb identici.

Lire plus
Posté le de Esse Di
Ferdinando C.
Ferdinando C.
User
Auteur

Da scartare gli IFRAME perchè a quanto pare vengono deprecati da Google. Me lo confermate?

Lire plus
Posté le de Ferdinando C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... laughing)))) ...è da 15 anni che si dice che sono deprecati! ...e proprio google ne fa uso ...laughing)))

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Ferdinando C.
Ferdinando C.
User
Auteur

perdonatemi per l'ignoranza!!!

in ogni caso sarò io una schiappa ma per me aggiungere codice HTML è una roba tabù...

La difficoltà che incontro è che non riesco a mantenere la formattazione di testo/colori all'interno della pagina se non inserendo tale formattazione all'interno del codice HTML (cosa che gradirei evitare)

Ho provato a risolvere la questione utilizzando lo shwbox ma il problema dello showbox (come suddetto nei precedenti post) è che non riesco a gestirne la larghezza sullo smartphone (diventa una colonna microscopica illeggibile).

A tal proposito vorrei dare un suggerimento agli autori dell'applicazione (se non è una roba troppo complessa): ho notato che nascondendo una riga (dalla sezione responsive) alle risoluzioni superiori questa viene nascosta anche a risoluzioni inferiori.

Sarebbe carino invece se il mostra/nascondi fosse più flessibile a qualunque risoluzione (ad esempio, nascondo qualcosa a risoluzioni superiori che invece mostro a risoluzioni inferiori e/o viceversa).

In questo modo riuscirei a determinare la larghezza esatta della showbox ad una determinata risoluzione (e valida solo per quella) in modo da non comprometterne la visualizzazione ad altre risoluzioni.

Non so voi cosa ne pensate. 

Lire plus
Posté le de Ferdinando C.
Ferdinando C.
Ferdinando C.
User
Auteur

Proseguo il thread per chiarire meglio. Ho provato ad applicare il metodo EsseDi ma nonostante abbia fatto copia incolla degli esempi non riesco ad attivare il pulsante (NON VEDO IL PULSANTE).

Tra l'altro non ho capito dove devo collocare esattamente l'immagine dei pulsanti...

Vorrei specificare però che nell'esempio di EsseDi nel codice vedo testo e colori.

Quello che io vorrei fare è una roba semplicissima: inserire nel codice solo il richiamo all'apertura/chiusura mentre per testo, colori e formattazione sfruttare le potenzialità di WebSite (utilizzando i suoi box di testo).

Mentre scrivo vedo che il mio post (precedente a questo) utilizza il metodo che vorrei applicare io (se guardate in coda c'è una stringa LEGGI DI PIU' e/o MOSTRA MENO che fa esattamente quello che vorrei io).

C'è la possibilità di applicarlo in modo light come suddetto?

Grazie a tutti

Lire plus
Posté le de Ferdinando C.
Esse Di
Esse Di
User
Ferdinando C.
............ Vorrei inserire in una pagina una sezione "nascosta" per default. ................

Sono stato tratto in inganno dalla parola “sezione”. Credendo, erroneamente, che ci si riferisse a più oggetti e non ad un semplice testo, ho proposto il mio sistema.

Ferdinando C.

Proseguo il thread per chiarire meglio. Ho provato ad applicare il metodo EsseDi ma nonostante abbia fatto copia incolla degli esempi non riesco ad attivare il pulsante (NON VEDO IL PULSANTE).

Tra l'altro non ho capito dove devo collocare esattamente l'immagine dei pulsanti...

Assodato che una simile funzione non è direttamente prevista da X5, qualsiasi metodo si voglia utilizzare presuppone la capacità di inserire materiale esterno nel progetto

Ferdinando C.

Quello che io vorrei fare è una roba semplicissima: inserire nel codice solo il richiamo all'apertura/chiusura mentre per testo, colori e formattazione sfruttare le potenzialità di WebSite (utilizzando i suoi box di testo).

Questo è possibile solo con il mio metodo. Gli altri esempi di accordion proposti implicano che il testo sia inserito in un oggetto HTML

Credo che il mio procedimento sia spiegato abbastanza bene nel sito.

Per chi ha un minimo di esperienza, non dovrebbe essere difficile, analizzando il codice del mio sito, scaricare ed inserire nel proprio sito le risorse richieste, che poi sono una immagine, un codice CSS ed un codice js.

Per i meno esperti, di seguito fornisco una breve spiegazione

Dalla versione per EVO 14, scaricare i file sdBtn.png, sd_showhide.css e, secondo le proprie esigenze, uno o più file js, per esempio sd_show_libero_chiuso.js (tasto destro del mouse sul nome, quindi “Salva destinazione con nome…)

  • In “Impostazioni - Avanzate - Statistiche, SEO e Codice – Esperto – Prima della chiusura del tag HEAD” inserire le seguenti righe

<link rel="stylesheet" href="files/sd_showhide.css" type="text/css" />
<script type="text/javascript" src="files/sd_show_libero_chiuso.js"></script>

  • In “Impostazioni - Avanzate - Statistiche, SEO e Codice – Esperto – File allegati al codice” caricare nella cartella files, tramite il comando “Aggiungi”, i file scaricati sdBtn.png, sd_showhide.css e sd_show_libero_chiuso.js
  • Per ogni sezione che si vuole mostrare-nascondere, inserire un oggetto HTML, alto 46 px, con il seguente codice:

<div class = "sdBtn" id = "qualunquenomeid"> Testo del pulsante </div>

Come spiegato anche nel sito di esempio:

class = "sdBtn" è obbligatorio

il nome dell’id può essere scelto a piacere

Testo del pulsante può anche mancare

  • Attribuire ad ogni oggetto che si vuole venga mostrato-nascosto cliccando sul pulsante un’àncora con un nome che inizia con il nome dell’id del pulsante.

Tutto qui.

Lire plus
Posté le de Esse Di
Ferdinando C.
Ferdinando C.
User
Auteur

Intanto ti mando un grazie 1.000.000 per la pazienza kiss

Conto nel weekend di provare e di mettere finalmente fine a questo thread.

GRAZIE ANCORA

Lire plus
Posté le de Ferdinando C.
Ferdinando C.
Ferdinando C.
User
Auteur

E' perfetto sei un grande!!!

Due cosucce e poi ti mando 1.000.000 di LIKE!

Intanto non sono riuscito a delimitare l'altezza a 46px (non so come si fa) dell'oggetto codice (ma me la sono cavata inserendo il codice all'interno del box di testo, in coda al testo)

Se ci fosse la possibilità di modificare la label a seconda se vedo più testo o meno sarebbe il massimo (come i post precedenti, viene visualizzata la label LEGGI DI PIU' a sezione chiusa, LEGGI DI MENO a sezione aperta).

In ogni caso come suddetto ti ringrazio per l'aiuto.

CIAO

Lire plus
Posté le de Ferdinando C.
Esse Di
Esse Di
User
Ferdinando C.
Intanto non sono riuscito a delimitare l'altezza a 46px (non so come si fa) dell'oggetto codice (ma me la sono cavata inserendo il codice all'interno del box di testo, in coda al testo)

Ottimo! Così facendo il tasto Apri-Chiudi viene posizionato in fondo al testo da mostrare-nascondere

Comunque quando apri un oggetto HTML per inserirne il contenuto l'ultima riga in basso permette di specificarne l'altezza: c'è proprio scritto "Altezza"

Ferdinando C.

Se ci fosse la possibilità di modificare la label a seconda se vedo più testo o meno sarebbe il massimo (come i post precedenti, viene visualizzata la label LEGGI DI PIU' a sezione chiusa, LEGGI DI MENO a sezione aperta).

Questo è spiegato (e credo abbastanza bene) all'interno della sezione "Come si fa":

Il testo all'interno del div (Come funziona) costituisce il titolo del pulsante. Esso ovviamente può mancare. Supponiamo di volere realizzare il classico pulsante con le diciture "Apri" o "Chiudi". Sarà sufficiente includere il testo all'interno delle immagini del pulsante e non inserire alcun testo nel div, che quindi diventerebbe:

<div class = "sdBtn" id = "sdBtnFnz" </div>

Lire plus
Posté le de Esse Di
Ferdinando C.
Ferdinando C.
User
Auteur

GRANDISSIMO!!!!

TI QUOTO!!!

Lire plus
Posté le de Ferdinando C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...!... per correttezza dovresti assegnare il CORRETTO alla risposta risolutica utile e corretta...!...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Ferdinando C.
Ferdinando C.
User
Auteur

Concludo solo un attimo evidenziando che inserendo il codice in coda al box di testo, accade un fatto strano:

l'hamburger menu non si apre più correttamente :-(

Su web tutto OK ma osservando il sito dai browser su smartphone, l'unico che visualizza correttamente l'hamburger menu è Firefox mentre per vedere il menu sugli altri browser occorre rimpicciolire la pagina...

Ho risolto inserendo il codice in un box dedicato (come da esempio EsseDi)...

Hasta la Vista :-)

Lire plus
Posté le de Ferdinando C.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT

Ferdinando ti ricordo che sul Forum funziona così:

Per ringraziare gli utenti che ti rispondono, puoi cliccare su "utile"  (la manina verde col pollice in su) sotto al loro post...

Quando il post sarà risolto è buona norma cliccare su "Corretto" (la spunta verde) al post che ti ha risolto (NON a te stesso, a meno che non risolvi da solo) , per chiudere il post e far sapere alle altre persone che potrebbero avere un problema come il tuo che quella è la soluzione.

Se hai altre domande non legate strettamente al post che hai aperto, apri un nuovo post.

Lire plus
Posté le de Claudio D.
Ferdinando C.
Ferdinando C.
User
Auteur

scusate, fatto!

Lire plus
Posté le de Ferdinando C.
Ferdinando C.
Ferdinando C.
User
Auteur

Buongiorno a tutti.

Mi rivolgo in particolare a @EsseDi che mi ha risolto il problema per espandere/comprimere intere sezioni di testo/grafica all'interno del mio portale.

Ho ancora un paio di problemi per raggiungere la perfezione:

  1. Dopo aver fatto molti tentativi non riesco a fare in modo che il pulsante "sdBtn.png" possa risultare "centrato" in orizzontale nella pagina (per qualunque risoluzione). Ho provato a cambiare la larghezza in punti ed anche il margine ma purtroppo, essendo una capra in javascript, non riesco a venirne fuori
  2. Vorrei adoperare anche un altro pulsante per il mio sito "sdBtn2.png" che mi serve ad esempio quando ho uno sfondo chiaro ma non so da dove partire per implementarlo (immagino bisognerebbe agire su tutti i file ma sinceramente, dopo aver provato a modificare gli script, sono ad un punto fermo.

Allego al presente post i 3 files che adopero per gestire il pulsante "sdBtn.png".

Specifico che ho inserito:

  • In “Impostazioni - Avanzate - Statistiche, SEO e Codice – Esperto – Prima della chiusura del tag HEAD” inserire le seguenti righe

<link rel="stylesheet" href="files/sd_showhide.css" type="text/css" />
<script type="text/javascript" src="files/sd_show_libero_chiuso.js"></script>

Spero nell'aiuto risolutivo :-)

Lire plus
Posté le de Ferdinando C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... hai chiuso questo argomento con il corretto/risolto...

... se continui con le domande, o riabiliti l'Argomento, oppure ne apri uno nuovo facendo riferimento a questo con un link, ...altrimenti qui non potrai ottenere interventi da terzi...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪