• User Attivo

    Questo è un esempio funzionante con il mio codice h t t p ://gd83.altervista.org/example/
    giusto per dare un'idea di quello che voglio realizzare.


  • User Attivo

    Ma tu hai chiesto come fare per evitare di ripetere due volte lo stesso codice, non come fare per aumentare l'altezza di un div se viene cliccato. Spiega bene cosa vuoi fare e poi vediamo come farlo. Per aumentare l'altezza di un div, l'oggetto window non ti serve.


  • User Attivo

    @Francesco Di Caprio said:

    Ma tu hai chiesto come fare per evitare di ripetere due volte lo stesso codice, non come fare per aumentare l'altezza di un div se viene cliccato. Spiega bene cosa vuoi fare e poi vediamo come farlo. Per aumentare l'altezza di un div, l'oggetto window non ti serve.

    Ciao Francesco, si quello che volevo é proprio quello di riscrivere quella parte di codice senza ripeterla.
    In teoria a me non serve aumentare l'altezza del div, ma di aggiungere la classe 'selected' all'attributo href quando l'elemento 'li' supera i 30px di altezza.
    Il menù cliccabile che cambia l'altezza è fittizio, non c'entra con quello che devo realizzare è solo una simulazione per mostrare il funzionamento del codice da me postato.


  • User Attivo

    Con questo esempio qui forse è più chiaro, in effetti mi sono spiegato proprio male :rollo:

    Però quello che vorrei migliorare è solo il codice da me postato inizialmente,
    il resto non è da calcolare sia perché è solo una simulazione del codice reale e sia perché non ho la possibilità di modificare il sorgente orginale
    il sorgente html e js, ma solo il mio blocco di codice.

    Il tutto funziona correttamente, infatti quando la lista supera i 25px si aggiunge la classe 'Selected' all'attributo href.

    ecco l'esempio :

    h t t p : / / gd83.altervista.org/example2/


  • User Attivo

    Sono riuscito a realizzare lo script con l'aiuto di Francesco (grazie!),
    come potrei semplificare ancora il codice agendo direttamente sull'elemento li
    senza specificare l'id?

    grazie!

    [HTML]

    function resizeFrame() {
    var frames = []; for (var i = 149, l = 1000; i < l; i++) {
    frames.push(i);}
    $.each(frames, function() {
    var divHeight = $('li#' + this).outerHeight();

    if (divHeight > 30) {   
    

    $('li#' + this + ' > a').addClass('Selected');
    } else {
    $('li#' + this + ' > a').removeClass('Selected');
    }
    });
    }
    setInterval(resizeFrame, 150);

    <ul id="tree">
    <li id ="150"> <a href="#">nameA</a>
    <ul><li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    </ul>
    </li>
    <li id ="250"> <a href="#">nameB</a>
    <ul> <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    </ul>
    </li>

    <li id ="980"> <a href="#">nameC</a>
    <ul><li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    </ul>
    </li>
    </ul>[/HTML]


  • User Attivo

    Usando come selettore il tag, piuttosto che un id, agisci su tutti i tag. Con $("ul#tree li"), agisci su tutti i LI che sono figli dell'UL con ID "tree".


  • User Attivo

    @Francesco Di Caprio said:

    Usando come selettore il tag, piuttosto che un id, agisci su tutti i tag. Con $("ul#tree li"), agisci su tutti i LI che sono figli dell'UL con ID "tree".

    Ho provato a modificare il codice in questo modo ma non funziona 😞

    [HTML]
    $("#tree li").each(function() {
    var divHeight = $('li').outerHeight();
    if (divHeight > 30) {
    $('li > a').addClass('Selected');
    } else {
    $('li > a').removeClass('Selected');
    }
    });
    }
    setInterval(resizeFrame, 150);[/HTML]


  • User Attivo

    Cosa devi modificare, i li che sono sotto #tree, oppure i li che sono sotto l'ul che sta sotto?


  • User Attivo

    @Francesco Di Caprio said:

    Cosa devi modificare, i li che sono sotto #tree, oppure i li che sono sotto l'ul che sta sotto?

    I tag li che sono sotto che stanno sotto l'ul tree, cioè quelli che nel codice html hanno l'id.


  • User Attivo

    Ho modificato il codice in questo modo, ma applica la classe 'Selected' a tutti i tag a

    [HTML]
    function resizeFrame() {

    $("ul#tree li").each(function() {       
    
     var divHeight = $('ul#tree li').outerHeight();
    
           if (divHeight > 30) { 
    
               $('ul#tree li > a').addClass('Selected');
    
            } else {
    
                $('ul#tree li > a').removeClass('Selected');
    
            }   
    
    }); 
    

    }
    setInterval(resizeFrame, 50);[/HTML]