Visualizzazione risultati 1 fino 14 di 14

Discussione: javascript: setInterval()

  1. #1
    Guest

    Predefinito 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 è:
    Codice HTML:
    <a href="javascript: hider('nomediv')"> provami</a>
    mentre il codice della funzione è:
    Codice:
    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...
    Ultima modifica di opens : 28-06-2010 alle ore 04.43.40 Motivo: risolto

  2. #2
    makingweb non è connesso Utente attivo
    Data registrazione
    30-06-2009
    Messaggi
    281

    Predefinito

    mmm vedi qui

  3. #3
    Guest

    Predefinito

    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!
    Ultima modifica di opens : 28-06-2010 alle ore 16.32.06

  4. #4
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,253

    Predefinito

    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
    Ultima modifica di dreadnaut : 28-06-2010 alle ore 17.11.52

  5. #5
    Guest

    Predefinito

    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...
    Ultima modifica di opens : 28-06-2010 alle ore 18.24.49

  6. #6
    L'avatar di javascripter
    javascripter non è connesso Moderatore
    Data registrazione
    14-02-2010
    Messaggi
    1,114

    Predefinito

    Invece centra e come.
    Codice:
    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:
    Codice:
    setInterval(function() {
        dec(e, h);
    }, 100);
    (che ovviamente funziona)

  7. #7
    Guest

    Predefinito

    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

  8. #8
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,253

    Predefinito

    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.

  9. #9
    Guest

    Predefinito

    La funzione che ho fatto è questa:
    Codice PHP:
    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:

    Codice PHP:
    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
    Ultima modifica di dreadnaut : 30-06-2010 alle ore 17.24.57 Motivo: + highlight ed indentazione

  10. #10
    L'avatar di dementialsite
    dementialsite non è connesso Super Moderatore
    Data registrazione
    19-10-2004
    Residenza
    fuori Padova
    Messaggi
    5,046

    Predefinito

    Hai provato a scrivere semplicemente così le funzioni...?
    Codice:
    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...
    Ultima modifica di dementialsite : 30-06-2010 alle ore 16.28.58
    Le questioni tecniche hanno risposte migliori nel forum pubblico, non trovi?

    When you don't know your next step... improvise

    ALTERVISTA WANTS YOU!
    Vuoi diventare moderatore su AlterVista? Scopri come...

  11. #11
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,253

    Predefinito

    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):

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

    Oggetto.prototype = {

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

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

    };
    Ultima modifica di dreadnaut : 30-06-2010 alle ore 17.38.46

  12. #12
    Guest

    Predefinito

    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:
    Codice HTML:
    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...
    Ultima modifica di andreafallico : 02-07-2010 alle ore 10.54.25 Motivo: Usa il tasto Edita

  13. #13
    L'avatar di dementialsite
    dementialsite non è connesso Super Moderatore
    Data registrazione
    19-10-2004
    Residenza
    fuori Padova
    Messaggi
    5,046

    Predefinito

    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...
    Le questioni tecniche hanno risposte migliori nel forum pubblico, non trovi?

    When you don't know your next step... improvise

    ALTERVISTA WANTS YOU!
    Vuoi diventare moderatore su AlterVista? Scopri come...

  14. #14
    Guest

    Predefinito

    è 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
    Ultima modifica di opens : 01-07-2010 alle ore 20.02.04

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •