javascript: setInterval()

Stavo creando una piccola funzioncina per evitare di usare jquery per fare un div che si nasconde in modo scorrevole ( prefersico usare solo il mio codice )
la funzione sfrutta setInterval per decrementare l'altezza del div, l'unico problema è che il temporizzatore non mi funziona... per far scomparire l'oggetto devo cliccare più volte(una per pixel da far scomparire) sul link che fa partire la funzione...
il link è:

<a href="javascript: hider('nomediv')"> provami</a>

mentre il codice della funzione è:

function dec(e,h){
h = h - 1;
e.style.height = h+"px";
}

function hider(id){
e = document.getElementById(id);
h = e.offsetHeight;
e.style.overflow = 'hidden';
window.setInterval("dec(e,h)", 100);
}

so che così il codice è incompleto... alcune parti le ho tolte per veder di far partire il setInterval... ma niente,
spero possiate aiutarmi, grazie

ciao.

-

Risolto, l'altezza andava valutata nella funzione dec non in hider... altrimenti il valore passato sarebbe stato sempre il solito fino a che non fosse stata richiamata la funzione hider... faceva un loop sempre della solita operazione...

[makingweb]

mmm vedi qui

grazie ma non è ciò che cercavo, io volevo creare una funzione che fa qualcosa tipo quella che ho nelle news del mio sito, comunque sono riuscito a creare la funzione, e funziona discreatamente bene! a breve sostituirò quella prefabbricata con la mia... grazie.

ciao

-

PS: Più apprendo sul javascript più mi rendo conto che è fenomenale ed ha potenzialità quasi illimitate!

[dreadnaut]

se avessi provato a cercare setInterval sul forum, avresti trovato UNA discussione con la soluzione al tuo problema

http://forum.it.altervista.org/basi-...esistente.html

ho già detto che ho risolto! ho editato il primo post del topic poco dopo averlo postato... dove sta il problema??

-

EDIT: ho dato un occhiata al post che mi hai detto di leggere... e non c'entra niente col problema che avevo io... il setInterval funzionava ma era il parametro passato ad essre sempre il solito... faceva un loop infinito settando l'altezza sempre al solito valore...

[javascripter]

Invece centra e come.

window.setInterval("dec(e,h)", 100);

Così è come richiamare (supponendo che h sia 10): dec([object HTML...Element], 10) e di sicuro non è quello che ti aspetti, cioè che l'elemento e venga passato alla funzione dec.

Seguendo il suggerimento che ti ha dato dreadnaut, ottieni:

setInterval(function() {
    dec(e, h);
}, 100);

(che ovviamente funziona)

ribadisco: la funzione l'ho già fatta, funziona, non è quella del primo post e fa esattamente quello che deve fare!
Quella è sbagliata e lo so! l'ho fatta in maniera diversa da come dite voi e funziona ugualmente. devo cambiarla perchè VOI dite che così NON funziona anche se funziona???

ringrazio per l'aiuto ma non ce n'è bisogno (almeno da parte mia). Se poi lo fate per altri utenti che potrebbero aver bisogno in caso di future ricerche mi scuso per il fraintendimento.

ciao

[dreadnaut]

Ovviamente noi stavamo correggendo la funzione nel primo post, non quella corretta che tu hai scritto dopo e che non abbiamo mai visto Non credo sia necessario per questo esagerare con la dimensione del font.

Il problema è che nessuno di noi ha letto la scritta in fondo al tuo post in cui dicevi di aver risolto Una volta arrivati al problema -AH!- ci siamo buttati a cercare di risolverlo a nostra volta.

Se poi la tua nuova funzione.... funziona saggiamente, si, non fa male postarla qua per altri.

La funzione che ho fatto è questa:

var u = true; 
var i = 0;
var e;

function dec(){
  var h = e.offsetHeight;
  if((h - i) < 0){
    e.style.height = "0px"
      i = 1;
    u = false;
    window.clearInterval(x);
  }else{
    i++;
    h = h - i;
    e.style.height = h+"px";
  }
}

function inc(){
  var h = e.offsetHeight;
  if( he < 1 ){
    he = y;
  }
  if((h + i) > he){
    e.style.height = he+"px"
      i = 1;
    u = true;
    window.clearInterval(x);
  }else{
    i++;
    h = h + i;
    e.style.height = h+"px";
  }
}

function hider(id){
  e = document.getElementById(id);
  e.style.overflow = 'hidden';
  if(u){
    he = e.offsetHeight;
    x = window.setInterval("dec()", 10);
  }else{
    y = e.offsetHeight;
    x = window.setInterval("inc()", 10);
  }
} 

invece di passare valori ho usato variabili globali.
Funzionare funziona... ma ha solo un piccolo problema... essendo globali se ci metto più menù a scomparsa interferiscono tra loro...
Ho pensato allora di crearmi degli classi, visto che javascript e rigorosamente orientato ad oggetti, e creare un oggetto per menù.
La classe è la seguente:

function oggetto(){
  this.u = true;
  this.i = 1;
  this.he = 0;
  this.x = 0;
  this.e = 0;
  this.y = 0;

  oggetto.prototype.dec = function(){
    var h = this.e.offsetHeight;
    if((h - this.i) < 0){
      this.e.style.height = "0px"
        this.i = 1;
      this.u = false;
      window.clearInterval(this.x);
    }else{
      this.i++;
      h = h - this.i;
      this.e.style.height = h+"px";
    }
  };

  oggetto.prototype.inc = function(){
    var h = this.e.offsetHeight;
    if( this.he < 1 ){
      this.he = this.y;
    }
    if((h + this.i) > this.he){
      this.e.style.height = this.he+"px"
        this.i = 1;
      this.u = true;
      window.clearInterval(this.x);
    }else{
      this.i++;
      h = h + this.i;
      this.e.style.height = h+"px";
    }
  };

  oggetto.prototype.hider = function(id){
    this.e = document.getElementById(id);
    this.e.style.overflow = 'hidden';
    this.e.style.visibility = 'visible';
    this.e.style.display = 'block';
    if(this.u){
      this.he = this.e.offsetHeight;
      this.x = window.setInterval(this.dec(), 10);
    }else{
      this.y = this.e.offsetHeight;
      this.x = window.setInterval(this.inc(), 10);
    }
  };

} 

ma non funziona... eppure mi sembra che la dichiarazione della classe sia giusto e sia l'esatto corrispondente delle funzioni create precedentemente... se qualcuno mi sa dare una mano mi farebbe comodo...

grazie,
ciao

[dementialsite]

Hai provato a scrivere semplicemente così le funzioni...?

this.dec = function () {
   ...
};

this.inc = function () {
   ...
};

this.hider = function () {
   ...
};

All'interno della dichiarazione la classe "oggetto" non è ancora definita, per questo prototype non dovrebbe funzionare...

Ti suggerirei, inoltre, un'altra cosa: sarebbe meglio se spostassi le prime quattro righe del metodo hider() e andassi a sostituirle all'inizializzazione di this.e (ovviamente, dovrai anche spostare il parametro id all'inizio della dichiarazione). Ci sono una serie di motivi:
- così come lo definisci, non hai realmente un oggetto per ciascun DIV a scomparsa, ma solo un contenitore che non aggiunge molte funzioni in più a quanto hai scritto prima
- rischi inoltre che le variabili si mescolino tra loro, causando un'espansione su un DIV che invece dovrebbe essere compresso (o viceversa).

Stammi bene...

[dreadnaut]

Mi sono permesso di editare il post sopra, aggiungendo indentazione e colore

Per quanto riguarda l'uso di prototype, stai definendo i metodi nel posto sbagliato: con prototype vanno messi fuori dalla classe, oppure vanno definiti come dice dementialsite.

La cosa confusionaria è che in javascript puoi definire una classe in mille modi. Io ad esempio seguo ancora un altro formato (per abitudine più che altro, perché JSON mi sembra quello meno ridondante):

function Oggetto() {
  // corpo del costruttore, inizializzazione
}

Oggetto.prototype = {

  metodo: function() {
  // corpo del metodo
  },

  altrometodo: function() {
  // corpo del metodo
  },

}; 

purtroppo continua a non funzionare... mi da il solito errore che mi dava la prima funzione che ho postato...

il metodo che usi tu (Dreadnaut) lo usavo anche io (se non mi confondo tra i tanti), ha un solo difetto... non puoi creare più istanze della stessa classe... in pratica oggetto e classe coincidono. e in questo caso mi serviva di creare più oggetti diversi ma della stessa classe.

se riuscite a trovarci qualche altro errore vi ringrazio...

ciao

EDIT:
@dementialsite: Scusa ma non avevo visto la tua risposta, ero passato direttamente a quella di dreadnaut...
quindi tu mi consigli di creare l'oggetto legato al div e passargli come parametro direttamente l'id del div? una cosa del tipo:

function oggetto(id){
   this.e = document.getElementById(id);
   ...

dove id è l'id del div...
giusto?

ciao

-

EDIT: Provato ma non funziona... facendo così mi dà "this.e" come indefinito nella funzione hider...

[dementialsite]

Ho fatto un po' di modifiche, ne trovi una versione funzionante qui: http://dementialsite.altervista.org/...ider/hider.htm

Puoi notare che:
- la struttura ad oggetti non ti salva dal fatto che devi inizializzare la struttura, e va fatto in fondo alla pagina (perché all'inizio i tre DIV non sono ancora stati costruiti)
- all'interno del metodo hider() c'è qualche problema di "visibilità" ("scope"), che va aggiustato con l'uso di una variabile... che contiene il riferimento allo stesso oggetto.

Stammi bene...

è palese che gli oggetti li inizializzavo... sennò che senso ha XD. solo che lo facevo dopo ogni div da modificare...
Per quanto riguarda lo scope, ho visto diverse guide su internet e faceano come ho fatto io per richiamare una funzione... molto probabilmente devo ancora entrare bene nel meccanismo degli oggetti e dello scope con essi...
grazie mille per l'aiuto.

PS: Se vuoi puoi pubblicarla sul tuo sito la funzione... ricorda però di citarmi :P

ciao