déplacer une div
Le
Une Bévue
Je souhaite déplacer (haut/bas, droite/gauche) de 10px un marker dans
une div. Commandé par les flèches haut/bas/droite/gauche du clavier.
Bon ça "marchotte" mais quand je clique sur la flèche gauche, ça va bien
à gauche mais de 30px environ.
quand je clique sur droite, ça va -- aussi à gauche -- mais de 10px.
seuls les flèches vers le haut et le bas fonctionne "as expected"
le code :
<!doctype html>
<html>
<head>
<!--
http://on-air.hiseo.fr/html5/encodage-caracteres-declaration-html5/ -->
<meta charset="UTF-8" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Flèches</title>
<style>
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
header {
position: absolute;
top: 0;
width: 100%;
height: 60px;
margin: 0;
padding-left: 20px;
background: #ccc;
}
.img {
position: absolute;
top: 60px;
width: 100%;
margin: 0;
padding: 0;
}
.img img {
width: 100%;
margin: 0;
padding: 0;
}
#marker {
position: absolute;
left: 50%;
top: 260px;
z-index: 9999;
}
.svg {
width: 50px;
height: 41px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 190px;
margin: 0;
padding-left: 20px;
background: #ccc;
}
</style>
<script>
(function() {
var arrows = {
LEFT: {key: 37, callback: leftArrow},
UP: {key: 38, callback: upArrow},
RIGHT: {key: 39, callback: rightArrow},
DOWN: {key: 40, callback: downArrow}
};
var stdoutElt, markerElt;
window.addEventListener('load', start, false);
function start(event) {
stdoutElt = document.getElementById('stdout');
markerElt = document.getElementById('marker');
document.body.addEventListener('keyup', keyupDispatch,
false);//keydown | keypress
}
function keyupDispatch(event) {
for(var arrow in arrows) {
if(arrows[arrow].key == event.keyCode) {
arrows[arrow].callback();
}
}
}
function leftArrow() {
write2STDOUT("You pressed the 'LEFT' arrow.");
markerMove(-10.0, 0)
}
function upArrow() {
write2STDOUT("You pressed the 'UP' arrow.");
markerMove(0, -10.0)
}
function rightArrow() {
write2STDOUT("You pressed the 'RIGHT' arrow.");
markerMove(10.0, 0)
}
function downArrow() {
write2STDOUT("You pressed the 'DOWN' arrow.");
markerMove(0, 10.0)
}
function markerMove(dx, dy) {
var rect = markerElt.getBoundingClientRect();
if(dx != 0) {
markerElt.style.left = parseInt((rect.left + dx), 10)
+ "px";
markerElt.style.right = parseInt((rect.right + dx), 10)
+ "px";
}
if(dy != 0) {
markerElt.style.top = parseInt((rect.top + dy), 10)
+ "px";
markerElt.style.bottom = parseInt((rect.bottom + dy), 10)
+ "px";
}
var rect_new = markerElt.getBoundingClientRect();
write2STDOUT("dx = " + dx + ", old left + " + rect.left + ",
new left = " + rect_new.left + ", old top = " + rect.top + ", new top =
" + rect_new.top);
}
function write2STDOUT(txt) {
stdoutElt.innerHTML += txt + "";
//stdoutElt.innerHTML = txt;
}
})()
</script>
</head>
<body>
<header><h3>Flèches TEST</h3></header>
<!-- section>
<div class='img'><img
src="http://lorempixel.com/1280/400/abstract"/></div>
</section -->
<footer><pre id='stdout'></pre></footer>
<div id="marker"><img class="svg" src="img/map-marker.svg"/></div>
</body>
</html>
une div. Commandé par les flèches haut/bas/droite/gauche du clavier.
Bon ça "marchotte" mais quand je clique sur la flèche gauche, ça va bien
à gauche mais de 30px environ.
quand je clique sur droite, ça va -- aussi à gauche -- mais de 10px.
seuls les flèches vers le haut et le bas fonctionne "as expected"
le code :
<!doctype html>
<html>
<head>
<!--
http://on-air.hiseo.fr/html5/encodage-caracteres-declaration-html5/ -->
<meta charset="UTF-8" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Flèches</title>
<style>
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
header {
position: absolute;
top: 0;
width: 100%;
height: 60px;
margin: 0;
padding-left: 20px;
background: #ccc;
}
.img {
position: absolute;
top: 60px;
width: 100%;
margin: 0;
padding: 0;
}
.img img {
width: 100%;
margin: 0;
padding: 0;
}
#marker {
position: absolute;
left: 50%;
top: 260px;
z-index: 9999;
}
.svg {
width: 50px;
height: 41px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 190px;
margin: 0;
padding-left: 20px;
background: #ccc;
}
</style>
<script>
(function() {
var arrows = {
LEFT: {key: 37, callback: leftArrow},
UP: {key: 38, callback: upArrow},
RIGHT: {key: 39, callback: rightArrow},
DOWN: {key: 40, callback: downArrow}
};
var stdoutElt, markerElt;
window.addEventListener('load', start, false);
function start(event) {
stdoutElt = document.getElementById('stdout');
markerElt = document.getElementById('marker');
document.body.addEventListener('keyup', keyupDispatch,
false);//keydown | keypress
}
function keyupDispatch(event) {
for(var arrow in arrows) {
if(arrows[arrow].key == event.keyCode) {
arrows[arrow].callback();
}
}
}
function leftArrow() {
write2STDOUT("You pressed the 'LEFT' arrow.");
markerMove(-10.0, 0)
}
function upArrow() {
write2STDOUT("You pressed the 'UP' arrow.");
markerMove(0, -10.0)
}
function rightArrow() {
write2STDOUT("You pressed the 'RIGHT' arrow.");
markerMove(10.0, 0)
}
function downArrow() {
write2STDOUT("You pressed the 'DOWN' arrow.");
markerMove(0, 10.0)
}
function markerMove(dx, dy) {
var rect = markerElt.getBoundingClientRect();
if(dx != 0) {
markerElt.style.left = parseInt((rect.left + dx), 10)
+ "px";
markerElt.style.right = parseInt((rect.right + dx), 10)
+ "px";
}
if(dy != 0) {
markerElt.style.top = parseInt((rect.top + dy), 10)
+ "px";
markerElt.style.bottom = parseInt((rect.bottom + dy), 10)
+ "px";
}
var rect_new = markerElt.getBoundingClientRect();
write2STDOUT("dx = " + dx + ", old left + " + rect.left + ",
new left = " + rect_new.left + ", old top = " + rect.top + ", new top =
" + rect_new.top);
}
function write2STDOUT(txt) {
stdoutElt.innerHTML += txt + "";
//stdoutElt.innerHTML = txt;
}
})()
</script>
</head>
<body>
<header><h3>Flèches TEST</h3></header>
<!-- section>
<div class='img'><img
src="http://lorempixel.com/1280/400/abstract"/></div>
</section -->
<footer><pre id='stdout'></pre></footer>
<div id="marker"><img class="svg" src="img/map-marker.svg"/></div>
</body>
</html>
Bonjour,
Je m'aperçois qu'en partant d'une position gauche de 465,5, si j'appuie
sur droite, j'ai "485px" dans markerElt.style.left (au besoin on peut
investiguer du côté du séparateur décimal), mais que
markerElt.getBoundingClientRect().left me retourne 465.
ça ne résout pas la question, mais il me semble bien que ça situe c e
qu'il y a à comprendre pour faire tourner la chose.
Je me demande si style.left est le bon moyen de déplacer l'élément, dans
l'affirmative si il y a quelque chose à rafraîchir avant d'interroger
les nouvelles propriétés.
function markerMove(dx, dy) {
var rect = markerElt.getBoundingClientRect();
write2STDOUT(dx);
if(dx != 0) {
write2STDOUT("old_left : " + rect.left + "new left : " +
(rect.left + 10));
markerElt.style.left = parseInt((rect.left + dx), 10 )
+ "px";
markerElt.style.right = parseInt((rect.right + dx), 10 )
+ "px";
write2STDOUT(markerElt.style.left);
write2STDOUT(markerElt.getBoundingClientRect().left);
Oui, merci beaucoup.
En fait j'ai résolu le problème ce matin, il s'était agravé entre-temps.
Je pense que mon erreur était de mettre le style dans les css au lieu
d'être in-line :
<div id="marker" style="position: absolute;left: 296px;top:
110px;z-index: 9999;"><img class="svg"
src="img/map-marker-green.svg"/></div>
ensuite avec #getBoundingClientRect(), je ne sais pas ce qu'il se passe,
peut-être est-ce que les propriétés retournées sont en lecture seule,
mais un parseInt(..., 10) ne donne rien ça retourne quand même un nombre
décimal si je fais :
for(var prop in rect) {
if(rect.hasOwnProperty(prop)) {
rect[prop] = parseInt(rect[prop]);
}
}
donc j'ai résolu "tout bêtement" avec le style in-line, et en utilisant :
function markerMove(dx, dy) {
markerElt.style.left = (parseInt(markerElt.style.left, 10) +
dx) + "px";
markerElt.style.top = (parseInt(markerElt.style.top , 10) +
dy) + "px";
}
voili-voilou.
Ah ... J'ai eu un doute au sujet du style, mais j'ai l'impression que je
loupais un autre maillon.
Bon ben très bien si ça marche.
Au fait pour la gestion des événements avec les touches tu as utilisé
quoi comme doc ?
ben j'ai juste utilisé event.keyCode :
avec ça j'ai retrouvé les codes des 4 flèches.
ou bien :
markerElt.style.left = markerElt.style.left.replace('px','') + dx + "px";
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
<- 37
^ 38
-> 39
v 40
http://stephane.moriaux.pagesperso-orange.fr/truc/key_code
lastModified: 10/08/2006
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
ce ne serait pas plutôt (pour qu'il y ait addition) :
markerElt.style.left = parseInt(markerElt.style.left.replace('px',''),
10) + dx + "px";
?
en effet, il faut transformer en nombre le 1er membre de l'opération,
hop!
markerElt.style.left = +markerElt.style.left.replace(/px/,'')+dx+'px';
Ceci étant, je ne suis pas certain que :
markerElt.style.left = +markerElt.style.left.replace(/px/,'')+dx;
ne fonctionne pas aussi ?
Comme c'est un juste truc visuel on peut aussi faire varier les marges
de l'élément qui sera positionné en absolute dans un autre (bien calé)
Et même, peut-être, utiliser des class pour ce faire, avec l'avantage
que ça fonctionnera avec une FdS générale sans attribut style ajouté à
l'élément.
Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
bravo, tu auras une crotte en chocolat dans ta chaussette à Noël )))
Eh eh.
Ou alors "les bases de l'assembleur" et "les interruptions du DOS" :)
Je dois avoir ça au fond d'une malle, quelque part chez le garde-meuble s.
Mais il me semble me souvenir qu'on trouve ça sur Internet.