muovere avanti ed indietro un <p>

**kove** · 26-09-2012, 17:24

Salve,

sono alle prime armi con javascript, e sto cercando di creare un semplicissimo script che muove un

in basso a destra quando si clicca e lo riporta alla posizione iniziale quando si clicca di nuovo.
Non funziona, credo di star sbagliando qualcosa, probabilmente nell'assegnazione della variabile.
Qualcuno mi ci può dare un occhio?

Ecco il codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p id="paragrafo" onclick="cambiaposizione()" style="cursor:se-resize; position:absolute;">questo è il testo dell'elemento di id paragrafo</p>

<script type="text/javascript">

function cambiaposizione()
 {

var spazitop=document.getElementById("paragrafo").style.top;

	if ( spaziotop="0")
	{
	document.getElementById("paragrafo").style.top="100px";  
	document.getElementById("paragrafo").style.left="100px";  
	}
	else {
		document.getElementById("paragrafo").style.top="0";  
		document.getElementById("paragrafo").style.left="0"; 
	}
 }
</script>
</body>
</html>

**KillerWorm** · 26-09-2012, 17:44

Ciao,

a occhio vedo 2 grossi errori:

1 - hai dichiarato la variabile spazitop mentre nella condizione usi la variabile spaziotop (c'è una "o" di troppo)

2 - nella condizione devi utilizzare l'operatore di uguaglianza (==), mentre tu stai usando quello di assegnazione (=)

Il resto del codice non so se funzioni ma dovresti correggere questi errori.

**kove** · 26-09-2012, 17:52

grazie Killerworm,

ho corretto i 2 errori, ma il codice non va lo stesso...

**lucavizzi** · 26-09-2012, 18:01

document.getElementById("paragrafo").style.top
non restituirà nulla al primo click a meno che tu non definisca, in linea, la regola css:
style="cursor:se-resize; position:absolute; top:0;"
Una volta definito lo stile in linea (in un css esterno o nel tag <style> non sarebbe leggibile da javascript), lo style.top restituirà il top nel formato "0px" o "100px" e non nel formato "0", "100".

**kove** · 26-09-2012, 18:27

grazie Lucavizzi,

ho provveduto ad inserire la regola css "top:0;" in linea, ma non è cambiato niente, l'elemento rimane fermo, da cosa può dipendere?

Ciao

**KillerWorm** · 26-09-2012, 18:30

Come indicato da lucavizzi, specifica la proprietà top da css.

Ti propongo una soluzione più compatta per ciò che vorresti fare:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
  </head>
  <body>
    <p id="paragrafo" onclick="cambiaposizione()" style="cursor:se-resize; position:absolute; top:0; left:0">questo è il testo dell'elemento di id paragrafo</p>
    <script type="text/javascript">
      function cambiaposizione(){
        var es = document.getElementById("paragrafo").style;
        es.top = es.left = (es.top=="100px"?"0px":"100px");
      }
    </script>
  </body>
</html>

**lucavizzi** · 26-09-2012, 18:38

Originariamente inviato da kove
grazie Lucavizzi,

ho provveduto ad inserire la regola css "top:0;" in linea, ma non è cambiato niente, l'elemento rimane fermo, da cosa può dipendere?

Ciao

if ( spaziotop=="0px")

ciao

**kove** · 26-09-2012, 18:45

ok, adesso va, perfetto, grazie mille.

Mi chiedevo, se volessi aggiungere una transizione graduale in maniera semplice, mi servirebbe una libreria come jquery?
Scusate la probabile idiozia delle domande ma sono davvero alle prime armi ...

**KillerWorm** · 26-09-2012, 18:46

Originariamente inviato da kove
grazie Lucavizzi,

ho provveduto ad inserire la regola css "top:0;" in linea, ma non è cambiato niente, l'elemento rimane fermo, da cosa può dipendere?

Ciao

Faccio giusto una precisazione.
Specificando "top:0;" puoi ottenere differenti risultati dai diversi browser. Ad es. IE risolve il valore 0 con "0px" mentre FF lo risolve con "0pt".
Questo diventa un problema se utilizzi il valore di quella proprietà per eseguire dei confronti all'interno del tuo script.
In questo caso, dovresti specificare anche l'unità di misura (sia sul css che sullo script).
Quindi "top:0px;" e if (spaziotop=="0px")

Edit: scusa lucavizzi, non avevo visto la tua risposta

**lucavizzi** · 26-09-2012, 18:48

Sì, ti servirebbe Animate di jQuery.

Discussione: muovere avanti ed indietro un <p>

Strumenti discussione

Ricerca discussione

Visualizza

muovere avanti ed indietro un <p>

Permessi di invio