Alla proprietà position di un elemento si possono assegnare i valori:
position:absolute.
left:___px;
top: ___px;
Le proprietà left e top sono espresse come posizione rispetto all'origine della finestra o rispetto all'elemento in cui è contenuto l'elemento stesso.
Oppure:
position:relative
left:___px;
top: ___px;
Le proprietà left e top sono espresse relativamente alla posizione che l'elemento dovrebbe occupare nel flusso normale degli elementi che lo precedono.
Nel programma JavaScript che segue si usano le seguenti funzioni del linguaggio:
Nell'esempio seguente si crea una pagina avente una sezione, con allineamento orizzontale del suo contenuto al centro, nella quale è inclusa un'altra sezione contenente il testo: [IN MOVIMENTO].
Nella pagina è anche contenuto un form con due pulsanti: uno richiama la funzione sinistra (non ancora presente nella sezione script), l'altro richiama la funzione destra, (anche questa non ancora presente)
La pagina risultante mostra una scritta al centro e due pulsanti.
Si vuole che, premendo il pulsante con la didascalia: <---, la scritta si muova in direzione sinistra, premendo il pulsante con la didascalia --->, la scritta si muova verso destra.
<html>
<head>
<title>Misure</title>
<script>
</script>
</head>
<body>
<div align="center">
<div id="sposta" style="position:relative;left:0px">
[IN MOVIMENTO]
</div>
<form>
<input type="button" onclick="sinistra()" value="<---">
<input type="button" onclick="destra()" value="--->">
</form>
</div>
</body>
</html>
Nella sezione script della pagina inserire le seguenti funzioni, richiamate dalla pressione dei pulsanti:
La funzione destra()
function destra() {
rElem = document.getElementById("sposta")
x = parseInt(rElem.style.left)
if (isNaN(x)) x= 0
x += 100
document.getElementById("sposta").style.left = x + "px"
}
La prima istruzione della funzione:
rElem = document.getElementById("sposta")
La seconda istruzione:
x = parseInt(rElem.style.left)
Dopo aver letto il valore della cooordinata l'istruzione x += 100 incrementa di 100 il valore di x e, dopo avergli aggiunto l'unità di misura px, il nuovo valore viene assegnato alla proprietà left dell'elemento.
La funzione sinistra() differisce dalla funzione destra() solo perchè decrementa la coordinata:
function sinistra() {
rElem = document.getElementById("sposta")
x = parseInt(rElem.style.left)
if (isNaN(x)) x= 0
x -= 100
document.getElementById("sposta").style.left = x + "px"
}
</script>Introdurre un controllo che impedisca alla scritta di uscire da prefissati limiti a sinistra e a destra della pagina.
Scrivere una nuova pagina con due sezioni che usano il posizionamento assoluto, una posta a 50px da sinistra e l'altra posta a 450 px da sinistra. Usare un pulsante per scambiare di posto il contenuto delle due sezioni.