• User

    testo a comparsa

    premetto che sto sviluppando in xhtml e quindi con i div, non riesco a trovare uno script che al click mi faccia comparire del testo (una sorte di didascalia)

    es.

    • titolo
    • titolo2
      ADSLASKLòFGVJDSòLGKDFSKòLLKòG
      ADSFòLDAGKòLDFSGKLKLDFSòGKLDSFKòL

    UNA SORTA DI MENù AD ALBERO che al click del titolo si espanda e compare il testo o didascalia


  • Super User

    Ciao makeart,prova così:
    [php]<script language="JavaScript">
    <!--
    function mostra{
    document.getElementById('testo').style.display='';
    }
    function nascondi{
    document.getElementById('testo').style.display='none';}
    //-->
    </script>

    <a href="javascript:mostra();">Leggi</a><br><a href="javascript:nascondi();">Nascondi</a>
    <br /><div id="testo" style="display: none; border: 1px solid;">;
    Testo interno al div.
    </div>[/php]Ciao!


  • User

    penso ci sia un errore all'interno del codice quel tag di chiusura dello script dopo il link cmq mi da errore sulla javascript


  • Super User

    Sì,l'avevo scritto in pochi secondi quindi c'era qualche erroretto 😄
    Prova ora,ho corretto il mio post precedente 😉
    Ciao!


  • User

    non va uguale :mmm:


  • User Attivo

    Ha dimenticato le parentesi dopo il nome di funzione 🙂

    [HTML]<script language="JavaScript">
    <!--
    function mostra(){
    document.getElementById('testo').style.display='';
    }
    function nascondi(){
    document.getElementById('testo').style.display='none';}
    //-->
    </script>[/HTML]


  • User

    ok funziona adesso è possibile che mostrando il div il link mostra si sostituisca con il link nascondi?

    Non so se mi sono spiegato bene io vorrei realizzare il classico menù ad albero con il + e -

    Altro problemino come faccio a renderlo implementabile ovvero come posso far coesistere n div espandibili nella stessa pagina?

    E renderlo compatibile con FireFox?


  • User Attivo

    Quante ne vuoi!!!! 😄

    Allora... dai un id all'ancora tipo <a id="ciccio" ... ... ...

    Dopodiché aggiungi alla funzioni mostra e nascondi un istruzione per modificare il testo interno dell'ancora. Se vuoi che passi da mostra a nascondi devi usare una stessa funzione che controlla se il testo è già scomparso o no e agisce di conseguenza... per parametrizzare il tutto devi passare alla funzione un parametro che identifica l'elemento che stai elaborando.

    Ecco un esempio completo e funzionante (già testato) del tutto (anche su firefox, senza problemi... se qualcosa non ti è chiaro chiedi pure... se vuoi di + devi cominciare a "pagare" 😛

    
    <html>
    <script language="JavaScript">
    <!--
    function mostraNascondi(idTesto) {
     
    if(document.getElementById('testo' + idTesto).style.display == 'none')
    {
     document.getElementById('testo' + idTesto).style.display='';
     document.getElementById('ciccio' + idTesto).innerHTML = "- Nascondi";
    }
    else
    {
     document.getElementById('testo' + idTesto).style.display='none';
     document.getElementById('ciccio' + idTesto).innerHTML = "+ Mostra";
    }
    }
     
    //-->
    </script>
    <body>
    Prima parte: <a id="ciccio1" href="javascript:mostraNascondi('1');">+ Mostra</a><br>
    <br /><div id="testo1" style="display: none; border: 1px solid;">Questo è il testo del primo Div
    </div> 
    Seconda Parte: <a id="ciccio2" href="javascript:mostraNascondi('2');">+ Mostra</a><br>
    <br /><div id="testo2" style="display: none; border: 1px solid;">Questo è il testo del secondo Div
    </div> 
    </body>
    </html>
    
    

  • User

    così funziona, adesso volendolo implementare all'interno di una struttura con i frame: link su frame1 e div su frame 2 con la possibilità che quando clicchi su un link nasconte automaticamente il div visualizzato sostituendolo con il nuovo


  • User Attivo

    se usi i frame, e quello a sinistra è un menù, nei link del menù basta che tu metta <a href="pagina.html" target="nomedelframe2"> e lui ti carica la pagina.html direttamente nel tuo frame2.

    Se la tua pagina è dinamica in qualche maniera puoi passargli i parametri tramite query string:

    <a href="paginadinamica.xxx?ID=idqualunque" target="nomedelframe">

    era questa la tua idea? Se invece vuoi che tutti i div siano contenuti nel secondo frame, e vuoi solo farli apparire e scomparire allora ti sconsiglio la struttura a frame (la sconsiglio in genere a parte rarissime e strane specifiche), a quel punto è uguale farlo con una singola pagina.


  • User

    comunque resta il problema di automatizzare il fatto che quando clicchi scopare il div visualizzato e appare quello nuovo


  • User Attivo

    Se parlavi del menù è piuttosto facile, basta che ti salvi in una variabile il div che hai allargato (vecchioDiv) e la relativa voce del menu (vecchioMenu), e quando ne allarghi un altro lo fai scomparire

    ti posto il codice

    
    <html>
    <script language="JavaScript">
    <!--
    var vecchioMenu;
    var vecchioDiv;
    vecchioMenu = '';
    vecchioDiv = '';
    
    function mostraNascondi(idTesto) {
     
    if(document.getElementById('testo' + idTesto).style.display == 'none')
    {
    if(vecchioMenu != '') vecchioMenu.innerHTML = '+ Mostra';
    if(vecchioDiv != '') vecchioDiv.style.display='none';
    
    document.getElementById('testo' + idTesto).style.display='';
     document.getElementById('ciccio' + idTesto).innerHTML = "- Nascondi";
    
     
    vecchioMenu = document.getElementById('ciccio' + idTesto);
    vecchioDiv = document.getElementById('testo' + idTesto);
     
    }
    else
    {
    
    document.getElementById('testo' + idTesto).style.display='none';
     document.getElementById('ciccio' + idTesto).innerHTML = "+ Mostra";
     
    vecchioMenu = '';
    vecchioDiv = '';
    
    }
    }
     
    //-->
    </script>
    <body>
    Prima parte: <a id="ciccio1" href="javascript:mostraNascondi('1');">+ Mostra</a><br>
    <br /><div id="testo1" style="display: none; border: 1px solid;">Questo è il testo del primo Div
    </div> 
    Seconda Parte: <a id="ciccio2" href="javascript:mostraNascondi('2');">+ Mostra</a><br>
    <br /><div id="testo2" style="display: none; border: 1px solid;">Questo è il testo del secondo Div
    </div> 
    </body>
    </html>
     
    
    

  • User

    ok, per far in modo che di defaulti mi mostra il primo id?


  • User

    ho visto che utilizzando i frame funziona lo stesso impostando il target al link, nonostante gli stessi link sono presenti su tutte e due i frame non si impalla.

    C'è un problema però cliccando due volte sullo stesso link appare/scompare


  • User Attivo

    Se non vuoi che scompaia al secondo click devi levare la parte di javascript che stà nell "else"

    Se vuoi che il primo div compaia basta che invece di dargli display:none gli dai display:block e il resto funziona uguale.

    ah... dimenticavo, se vuoi che il primo div sia visibile devi anche sostituire all'inizio del codice javascript questo:

    
    vecchioDiv = '';
    
    

    con questo: (al posto di 'idDelPrimoDiv' ci và l'id del primo div

    
    vecchioDiv = document.getElementById('idDelPrimoDiv');
    
    

  • User

    il problema è che i div vengono generati da un ciclo


  • User Attivo

    Se il ciclo è di tipo For allora basta che metti un istruzione condizionale

    if (indiceDelCiclo = 1) -> display:block;

    altrimenti ti crei una variabile boleana prima di iniziare il ciclo

    blPrimo = true

    e dentro il ciclo fai il controllo:

    if blPrimo -> diplay:block + blPrimo = false

    in modo che scatta solo la prima volta.

    Se all'inizio della pagina non sai il nome del primo div allora dentro quell'istruzione condizionale salvati su una stringa il nome del primo div, tipo "sPrimoDiv"

    e alla fine della pagina html (ma prima del tag di chiusura) metti

    <script type="text/javascript">
    vecchioDiv = document.getElementById('<%=sPrimoDiv%>');
    </script>

    ovviamente riadattando la sintassi alla tecnologia ed al linguaggio che stai utilizzando.


  • User

    fare invece una funzione js che richiamo sul body con onload che mi richiama la funzione per mostrare il div

    anche perchè credo che poi non si setti la variabile che ti permette di nascondere il div mostrato nei link successivi


  • User Attivo

    Non ti ho suggerito quello perché quando costruisci il <body> della pagina ancora non conosci il nome del div (ma lo conosci solo dopo che cicli sugli elementi)

    Il codice che ti ho postato (quello da mettere a fine pagina) serve a posta per inizializzare la variabile e mantenera il funzionamento del codice.

    Se percaso già all'altezza del tag <body> conosci il nome del div ti basta mettere nell'onload "mostraNascondi('nomeDelDiv');"

    ma io spesso ho avuto problemi con l'evento onload (a volte mi scatta prima che la pagina sia stata costruita interamente e quindi javascript non và).

    Semmai fai un tentativo.


  • User

    come pensavo con l'IF nel ciclo non setta la variabile vecchio div e di conseguenza gli altri div si sovrappongo, il primo div nonn scompare mai