Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Spostamento di un div da posizione iniziale qualsiasi

    Salve, sto tentando di generalizzare un programmino che sposta un div mediante le frecce direzionali della tastiera. Succede che funziona benissimo se il div parte con
    codice:
    position: absolute;
    top: 0px;
    left: 0px;
    Viceversa se inizia con delle coordinate differenti, queste vengono "azzerate" prima di iniziare a spostarsi...
    Per quanto riguarda lo spostamento orizzontale...
    codice:
    if (tasto == 39) {
    	sinistra = Number(sinistra.substring(0, sinistra.length-2)) + 25;
    	// 50 è la larghezza del div
    	if (sinistra <= x - 50) {
    		document.getElementById("guardia").style.left = sinistra + "px";
    	}
    } else if (tasto == 37) {
    	sinistra = Number(sinistra.substring(0, sinistra.length-2)) - 25;
    	if (sinistra >= 0) {
    		document.getElementById("guardia").style.left = sinistra + "px";
    	}
    }
    Analoga situazione per gli spostamenti verticali, se premo la freccia giù il div si porta a top: 50px (evento su keyup e su keydown) anche se parte con top: 250px.
    Letteralmente leggo in Ispeziona di Chrome che al div "guardia" top e left si resettano a 0 prima di incrementarsi e decrementarsi di 25 e poi concatenarsi a "px"...
    Dove sbaglio? Grazie.

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Ciao, ci possono essere diversi fattori che incidono sul risultato.
    La variabile sinistra dove e come la stai inizializzando?

    Presumo ci sia qualcosa del genere prima di quelle condizioni:
    codice:
    var sinistra = document.getElementById("guardia").style.left;
    Mi confermi?

    In tal caso considera che la proprietà style, per un elemento HTML, riflette l'omonimo attributo style che è definito nel tag (come stile in linea). Per cui, via script, puoi recuperare i valori delle relative proprietà CSS (ad esempio left) attraverso la proprietà style.

    In altre parole, se hai definito left attraverso l'attributo style (cioè nello stile in linea applicato al tag), allora puoi recuperarlo dalla proprietà style (attraverso JavaScript); se invece lo hai definito tramite CSS esterno, o incluso nel documento con <style>, allora la proprietà style.left risulta essere indefinita fintanto che non vai ad impostarla da script.

    Per leggere lo stile di un elemento, a prescindere che sia applicato in linea o attraverso fogli di stile inclusi, puoi usare il metodo getComputedStyle().

    In alternativa, se vuoi usare la proprietà style, dovrai definirne in precedenza le proprietà CSS

    ... o attraverso l'attributo style direttamente nel tag come stile in linea
    codice HTML:
    <div id="guardia" style="left: 250px;"></div>
    ...
    <script>console.log(document.getElementById("guardia").style.left);</script>

    ... o attraverso JavaScript
    codice HTML:
    document.getElementById("guardia").style.left = "250px";
    ...
    console.log(document.getElementById("guardia").style.left);
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  3. #3
    Sì, le variabili sono definite esattamente come hai scritto nell'esempio, con style poiché fissate dal foglio CSS.
    Strano perché in altre situazioni ricordo di aver prelevato e impostato tranquillamente valori di attributi CSS dal foglio di stile, non dal tag dell'elemento.
    Comunque con l'attributo style nel tag funziona tutto.
    Grazie.

  4. #4
    Salve, mi succede un'altra cosa strana.
    Dopo aver mosso il mio div con i tasti direzionali, avvio una funzione fuga() che muove random un altro div "ladro".
    In fuga(), dopo aver analizzato i vari casi in cui "ladro" si trova su un angolo o uno spigolo (inizialmente è nel div che circoscrive la "stanza" di gioco, leggermente a destra, mentre "guardia" è leggermente a sinistra), effettuo...
    codice:
    casuale = Math.floor(Math.random()*4);
    				
    	if (casuale == 0) {
    		sopraL = Number(sopraL.substring(0, sopraL.length-2)) - 50;
    		document.getElementById("ladro").style.top = sopraL + "px";
    	} else if (casuale == 1) {
    		sinistraL = Number(sinistraL.substring(0, sinistraL.length-2)) - 50;
    		document.getElementById("ladro").style.left = sinistraL + "px";
    	} else if (casuale == 2) {
    		sinistraL = Number(sinistraL.substring(0, sinistraL.length-2)) + 50;
    		document.getElementById("ladro").style.top = sinistraL + "px";
    	} else if (casuale == 3) {
    		sopraL = Number(sopraL.substring(0, sopraL.length-2)) + 50;
    		document.getElementById("ladro").style.top = sopraL + "px";
    	}
    succede che la posizione iniziale di "ladro" è
    codice HTML:
    <div id="ladro" style="top: 250px; left: 400px;">L</div>
    Tuttavia capita che dopo la prima mossa di "guardia", salti a
    codice HTML:
    <div id="ladro" style="top: 450px; left: 400px;">L</div>
    L'aumento di top è correlato con casuale == 3, ma credo sia chiaro che in tal caso al valore di sopraL, che è
    codice HTML:
    let sopraL = document.getElementById("ladro").style.top;
    vada aggiunto 50, non 200!
    Avvengono altri "salti" simili, sempre con "ladro" lontano dai bordi che "salta" sempre alterando l'attributo top del suo div, mai left.

  5. #5
    Trovato l'errore...
    codice:
    document.getElementById("ladro").style.top = sinistraL + "px";
    Assegnavo il valore aggiornato per left a top...

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,311
    Trovato l'errore...
    Hai già provato Forum HTML.it Toolset?
    uno script che ottimizza il layout e le funzionalità del Forum

  7. #7
    Problema persistente in orizzontale.
    Questo è il codice.
    codice:
    else if (sinistraL == 450) { // ladro allo spigolo destro
        casuale = Math.floor(Math.random()*3);
                    
        if (casuale == 0) {
            sopraL = Number(sopraL.substring(0, sopraL.length-2)) - 50;
            document.getElementById("ladro").style.top = sopraL + "px";
        } else if (casuale == 1) {
            sinistraL = Number(sinistraL.substring(0, sinistraL.length-2)) - 50;
            document.getElementById("ladro").style.left = sinistraL + "px";
        } else if (casuale == 2) {
            sopraL = Number(sopraL.substring(0, sopraL.length-2)) + 50;
            document.getElementById("ladro").style.top = sopraL + "px";
        }
        
    }
    E qui allegata la situazione che si verifica...
    js.jpg
    Da dove prende quell'incremento di 50px?? Dovrebbe poter andare soltanto sopra, sotto o a sinistra!

    Edit: ho messo un console.log(casuale) in quell'if, ma non mostra nulla! Entra in pratica nell'else finale in cui si considera che il div non sia su un bordo o su un angolo. Cosa sta succedendo, perché sinistraL == 450 risulta false quando è true??
    Ultima modifica di Gas75; 31-07-2022 a 17:41

  8. #8
    Trovato l'errore: i confronti negli if vanno fatti con le posizioni in pixel perché il metodo come prima cosa recupera i valori top e left che sono comprensivi di unità di misura.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.