"Congelare" il valore di una variabile?

[ALFABreezE]

Ooocchei... m'arendo! :/

Ve la faccio breve.
Ho questo script qua ('pescato' qua e là nei varii thread del forum):

function resize(OBJ) {
    var speed = 0;
    var self = document.getElementById(OBJ);
    var stop = self.scrollHeight;
    var a = 0;

    var initialHeight = self.style.height.split('px')[0]; //<-- QUESTA!!

    function enlarge() {
        var start = self.style.height.split('px')[0];
        if(start<stop) {
            speed = speed+Math.ceil((stop - start)/10);
            self.style.height = speed +'px';
            }
            else {
            clearInterval(s);
            a=1;
            }
    } 
    function collapse() {
        var start = self.style.height.split('px')[0];
        if ((a==1) && (start > initialHeight)) {
        speed = Math.floor(start / 20);
        self.style.height = (start - speed) +'px';
        }
        else {
            clearInterval(t);
            a=0;
            }
    }
    var s = setInterval(enlarge,10);
    var t = setInterval(collapse,10);
} 

che vorrei usare per espandere/collassare elementi del DOM appiacere.
Il problema è che, nella fattispecie, lo voglio usare su un paragrafo al quale ho già dato, nei CSS, "height: 35px;".

Ora... IN TEORIA, quel " var initialHeight = self.style.height.split('px')[0];" che sta alla 7ª riga, DOVREBBE recuperarmi il valore "35" cheppoi userei come condizione nella funzione "collapse" per cancellare il setInterval della funzione precedente.

Ovviamente non lo fa perché, essendo una variabile, appunto, "varia". E dunque prende il valore dell'altezza assunta dal paragrafo quando termina la funzione "enlarge".

Ergo, tornando a bomba sul titolo del thread, non esiste un modo per "congelare" il valore iniziale della variabile initialHeight e "conservarlo" intatto per poterlo poi richiamare quando mi serve?
(Se al posto di "initialHeight" ci scrivo "35", lo script funzia).


Poi non so bene se il problema è solo questo o se ce ne sono altri.
Intanto mi accontenterei di risolvere questo; se ce ne sono altri però ditemelo, sivvuplé ;-)

TIA

cià
ale

[fcaldera]

Originariamente inviato da ALFABreezE
Ovviamente non lo fa perché, essendo una variabile, appunto, "varia". E dunque prende il valore dell'altezza assunta dal paragrafo quando termina la funzione "enlarge".

no, non è proprio così: non lo fa perchè se vuoi leggere l'altezza di un elemento dovresti scrivere
var initialHeight = self.offsetHeight;

La funzione enlarge() poi è ininfluente per quella variabile visto che non la modifica da nessuna parte.
initialHeight una volta valorizzata resta costante per tutto lo scope della funzione resize() e nelle funzioni interne ad essa, ovviamente.


Sinceramente io farei in altro modo: assegnerei agli elementi che possono collapsare una classe distintiva
(es. "collapsable") sulla quale lo script aggancia l'evento di click; a questa aggiungere una classe aperta "opened" e chiusa "closed".

Avrei quindi un certo numero di elementi con class="collpasable opened" oppure "collapsable closed"
ogni volta che clicco su un elemento la classe da "opened" diventa "closed" e viceversa. Queste classi avranno naturalmente una definizione di stile nel css ad es. con display: block e display: none;

un eventuale effetto fadein/fadeout si può realizzare con una qualsiasi libreria javascript (es. mootools) che realizza un effetto tra i vari cambi di classe.

[ALFABreezE]

Innanzi tutto grazie per la risposta ;-)

Originariamente inviato da fcaldera
no, non è proprio così: non lo fa perchè se vuoi leggere l'altezza di un elemento dovresti scrivere
var initialHeight = self.offsetHeight;

Ah... Quindi non è proprio possibile prendere il valore direttamente dai CSS?
O c'è un altro modo?

La funzione enlarge() poi è ininfluente per quella variabile visto che non la modifica da nessuna parte.
initialHeight una volta valorizzata resta costante per tutto lo scope della funzione resize() e nelle funzioni interne ad essa, ovviamente.

Sì...
Il problema è che quando clicco di nuovo sull'elemento al quale ho associato la funzione enlarge() per far partire il collapse() initialHeight assume il valore dell'altezza dell'elemento "espanso", visto che riparte tutta la funzione principale resize(). Quindi non ho più i miei 35px di partenza, che sono quelli che mi consentono di controllare/fermare il collapse().

E qui si ritorna a bomba. Non c'è un modo per far diventare quel "var initialHeight=offsetHeight;" una specie di costante? Magari facendo una funzione apposita...
Anche perché ho un altro paio di scriptini che sono fermi per lo stesso motivo.

Sinceramente io farei in altro modo: assegnerei agli elementi che possono collapsare una classe distintiva (es. "collapsable") sulla quale lo script aggancia l'evento di click; a questa aggiungere una classe aperta "opened" e chiusa "closed".

Avrei quindi un certo numero di elementi con class="collpasable opened" oppure "collapsable closed"
ogni volta che clicco su un elemento la classe da "opened" diventa "closed" e viceversa. Queste classi avranno naturalmente una definizione di stile nel css ad es. con display: block e display: none;

Non vorrei agire sul display, perché vorrei creare dei paragrafi da due o tre righe che volendo l'utente si espande se vuole continuare a leggere. Per questo sto usando solo l'altezza.
La soluzione delle classi invece sembra interessante, anche se ancora non l'ho capita bene :)
(Dovrei recuperarmi le varie classi con "document.getElementByClassName()", in quel caso, giust)?
Ora me la studio.

un eventuale effetto fadein/fadeout si può realizzare con una qualsiasi libreria javascript (es. mootools) che realizza un effetto tra i vari cambi di classe.

Su questo punto sono un po' combattuto. Da una parte mi rendo conto che l'uso di una (o più) libreria potrebbe semplificarmi notevolmente la vita, dall'altro ho la sensazione che usandole non imparerò mai niente di JS.

GRAZZ! :)

cià
ale

[fcaldera]

Originariamente inviato da ALFABreezE
Non vorrei agire sul display, perché vorrei creare dei paragrafi da due o tre righe che volendo l'utente si espande se vuole continuare a leggere. Per questo sto usando solo l'altezza.
La soluzione delle classi invece sembra interessante, anche se ancora non l'ho capita bene
(Dovrei recuperarmi le varie classi con "document.getElementByClassName()", in quel caso, giust)?

l'uso del display era un esempio: tu puoi definire ad es.

height: auto; per la classe .opened
height: 3em; per la classe .closed (o quanto basta per visualizzare le prime 3 righe di testo)

il vantaggio di questo approccio è che se un giorno vuoi ad esempio colorare di verde i paragrafi aperti e fare rossi quelli chiusi, ti basterà modificare solo lo stile (essendo qualcosa che riguarda i CSS) senza dover modificare il comportamento, cioè javascript.

se usi una libreria javascript hai delle primitive per accedere agli elementi attraverso il nome della classe (ad es. jQuery(".collapsable").each(function() { ... });

altrimenti se non vuoi usare una libreria devi fare un ciclo for su tutti gli elementi del DOM e nel ciclo, inserirai in un array gli elementi che hanno classe '.collapsable'

poi esegui le operazioni sugli elementi di quell'array

[ALFABreezE]

Originariamente inviato da fcaldera
[....]
poi esegui le operazioni sugli elementi di quell'array

Eh!
È tutto chiaro fino a qui.
Ma come faccio "poi" a "eseguire le operazioni sugli elementi di quell'array", se non mi riesce nemmeno di far eseguire UNA operazione su UN oggetto specifico? :)

L'operazione che dovrei eseguire, in questo caso, sta tutta in quella funzione che ho postato all'inizio.
Quella funzione non ha un'applicazione "pratica" particolare, apparte quella di permettermi di studiare un po' le "animazioni" in JS tramite il setInterval() per imparare "come si fa".
(Ovviamente, senza usare librerie e orpelli varii).

Quindi o quella funzione è sbagliata / l'ho impostata male io, oppure ci dev'essere un modo per "congelare" il valore della variabile "initialHeight" allo stato iniziale (vedi subject) e recuperarla ogni volta che parte la funzione apprescindere dall'altezza 'attuale' dell'oggetto, oppure... nollosò.

È chiaro che potrei impostare il valore iniziale come secondo parametro della funzione (es: resize(OBJ, initialHeight); e poi richiamarla con resize('testo_01', 35); ), ma vorrei fare una cosa un po' più "reusable".
(Anche perché non è detto che sappia sempre il valore iniziale dell'altezza di ogni singolo oggetto).

Ue'... Non mi fraintendere, eh? ;-)
Le dritte che m'hai dato sono state utilissime e cercherò di farne buon uso.
Ma al momento la mia priorità è riuscire a far funzionare il "toggle" tra enlarge() e collapse().

Comefaccio? :)

cià
ale