Creare un DIV a comparsa in WebSite X5 
Autor: Vincenzo S.Buona sera a tutti,
vorrei chiedere a voi più esperti nella realizzazione, forse per voi banale, di uno o più DIV a comparsa.
Mi spiego meglio, nel mio progetto in griglia 4x4 ho diverse immagini.
Le immagini occupano una sola cella a righe alternate, pertanto ho in totale 8 immagini sulla riga 1 e 3.
Ovviamente ne inserirò altre però questo è per farvi capire la disposizione dei miei oggetti.
La mia esigenza, che purtroppo nonostante le mie mille ricerche non sono riuscito a risolvere, è quella di inserire sotto ogni immagine nelle celle vuote un testo che cliccandoci sopra si mostri e mi sposti ovviamente le immagini sottostanti adattandole al testo.
Ho cercato vari esempi su tutto internet ma il massimo che sono riuscito a creare è stato quello di inserire una cella sottostante contente il codice html e javascript per la gestione del div, solo che quando mostravo il contenuto se non abilitavo lo scroll, il contenuto non veniva visualizzato poichè si posizionava sotto le immagini.
Inoltre se possibile vorrei mettere 4 oggetti html in griglia, 1 sotto per ogni immagine, ma quando clicco il mostra vorrei che la scritte si mostri per tutta la larghezza della pagina non solo nello spazio del frame.
Premetto che non sono molto pratico pertanto vi sarei davvero grato se mi desse informazioni più dettagliate possibili, vi ringrazio anticipatamente e spero di non farvi perdere tempo inutilmente.
Vi chiedo scusa se forse non sono riuscito ad esprimermi al meglio, attendo vostre cortesi risposte.
Autor
L'effetto che vorrei creare è esattamente questo:
http://www.misterwebby.com/index_demo.php/slider-verticale-che-genera-unaccordion-effetto-fisarmonica-molto-fluido
"Autocollapse Demo"
Però sinceramente non saprei proprio come adattarlo e da dove iniziare.
Buongiorno Vincenzo,
automaticamente non è possibile con il software, puoi però cercare delle guide o tutorial online così da prelevarti lo script necessario da inserire per esempio in un oggetto HTML nel progetto. Potrai poi rendere invisibile il menù standard di WebSite X5 e usare il tuo.
Magari qualche altro utente della community potrà darti maggiori indicazioni.
Grazie.
Autor
Ah ok ti ringrazio Riccardo sei stato molto gentile.
Sono giorni che cerco script con una spiegazione per neofiti come me, alcuni pur se riesco a farli funzionare, non spostano le immagini in base all'altezza del testo che si apre.
In particolare quello che cerco è un accordion semplice su del testo nascosto.
Magari rendendolo più semplice lascerei nelle righe 1 e 3 le 4 immagini, una per cella,
nelle righe 2 e 4 metterei un solo campo che occupa tutta la riga però con i vari DIV.
Resto in attesa se qualcuno può aiutarmi.
Grazie in anticipo
... di accordion ne troverai in abbondanza; ...devi scegliere quello che ti risulti più amichevole e seguire le istruzioni del produttore del codice...
... in linea di massima è semplice seguendo questa struttura:
1) - tutti i codici che richiamano SCRIPT, dichiarazioni script, style CSS e richiami a fogli CSS vanno dichiarati o inseriti nel Pannello ESPERTO sezione HEAD; (codice CSS può essere inserito anche nel pannello Esperto di un Oggeto Codice HTML della pagina, senza tag style);
2) - il codice HTML va inserito in Oggetto Codice HTML, o della Intestazione, o inserito nella pagina;
3)- tutte le cartelle e loro contenuti e files a servizio, JS, CSS, ecc., vanno inviate alla RADICE del Sito in RETE con un programma FTP alternativo, tipo Filezilla e simili...
4) - controllare le path in uso nell'esempio relative alla immagini, e correggerle in base alla reale posizione che avranno nella struttura de sito;
...
... per capire e verificare, fai le prove esportando un Progetto di prova, verificando in RETE, e magari posta qui il LINK per permettere di controllare...
.
ciao
Autor
Ti ringrazio KolAsim diciamo che con quelle linee guida mi è già più chiaro il discorso.
Vedo di trovare qualche esempio di facile utilizzo ed implementarlo.
Nel caso non dovessi riuscirci, creerò un sito di prova che utilizzi il mio modello così da chiedervi ancora una volta, il vostro aiuto.
Intanto vi ringrazio ancora per la disponibilità e mi scuso per il disturbo.
... non so di cosa si tratti, perchè non ho il programa, ma prova a vedere coc'è che ha proposto MirKo, qui: https://helpcenter.websitex5.com/post/106571 ...casomai potrai contattarlo...
.
ciao
Autor
Buongiorno a tutti sono ancora io,
allora non essendo riuscito nel mio intento allego una copia del mio progetto che mantiene la mia struttura base così da capire dove sbaglio.
All'interno della cartella c'e sia il progetto che il codice sorgente.
Come esempio per l'accordion sto seguendo: http://www.ilcacciatoredinuvole.it/accordion/index.html
che farebbe al caso mio, solo che non capisco dove sbaglio.
Spero qualcuno di voi riesca ad aiutarmi.
Autor
Allego il progetto esportato per il file iwp è troppo grande.
L'esempio è nella pagia prova del menu a tendina
... non sono in condizioni di verificare, ...ma, ...riferimento il link accordion di riferimento che hai indicato da Snake.Xenzia, ...leggi tutto il Topic che ti ho indicato in precedenza...
.
ciao
Autor
Buon pomeriggio,
KolAsim ho provato già a seguire quel topic, ma neanche il progetto che pubblica Mirko mi funziona.
Vedo solo il testo in colonna senza nessun effetto accordion.
L'esempio citato include sia testo che immagini.
Qui è spiegato come realizzare una cosa simile utilizzando normali oggetti di Incomedia X5
http://essedi.altervista.org/_EVO11/_showhide/libero.html
leggi bene...
https://helpcenter.websitex5.com/post/106571#19
la mia cartella files la hai inserita nella tua cartella di prova...?
Arrivato tardi...
... presta attenzione anche agli altri consigli e precisazioni che hai ricevuto...
... da parte mia, senza del programma attualmente, e sperando che nessuno si offenda, non posso verificare e quello che posso fare io è solo vedere e valutare quello che si fa, e sempre se nelle mie limitate possibilità...
... posta il LINK dei tuoi esempi, in modo che si possa valutare, considerando che il codice di Snake.Xenzia, salvo smentite, sembra! incompatibile con il jQuery del programma, quindi dovrai provare magari con il link che avevi anticipato, e fanne vedere il risultato per eventuali correzioni...
... ho dato un'occhiata al primo link che avevi postato, e sembra abbastanza semplice secondo le linee guida che ti avevo anticipato;...provaci...
... alla cieca di dico che ...nel pannello Proprietà/ESPERTO della pagina devi incollare questo codice:
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css' />
<noscript> <style> .st-accordion ul li{ height:auto; } .st-accordion ul li > a span{ visibility:hidden; } </style>
</noscript>
... il grosso è fatto ...
... nell'oggetto Codice HTML che inserirai nella pagina dovrai incollare tutto iol codice che parte da: <div class="wrapper"> ...(iniziale, dopo del <body>)
...XXXX tutto il codice XXXXX...
... per finire a: </script> ...(finale, prima del </body>)
... finito...
... non funzionerà in Anteprima...!...
.. per il perfezionamento del tutto... ... al Passo_5 effettua Esportazione su DISCO in una NUOVA cartella; fatto questo, incollare dentro a questa cartella le cartelle originali che hai scaricato, CSS, IMAGES, JS ...con il loro contenuto...
... adesso potrai avviare la INDEX e testare in locale quello che hai fatto...
... devi prendere in considerazione che la cartella IMAGES potrebbe entrare in conflitto con quella creata dal programma con stesso nome, ma in teoria non dovrebbe dare problemi con file immagini di nomi diversi tra loro...
... per l'esportazione in RETE di questa struttura, dovrai usare un programma FTP terzo, tipo Filezilla, WS_FTP, e simili, più che altro per le cartelle a servizio di Accordion...
... quando avrai pianificato il progetto, potrai passarti il tempo a personalizzare immagini e testi...
... per eventuali chiarimenti e/o omissioni, fatti risentire, non prima però di aver pubblicato l'esempio in rete...
.
ciao
Autor
Perfetto sono riuscito nel mio intento, ho seguito tutto ciò che diceva Mirko e KolAsim.
Vi ringrazio per l'aiuto datomi.