mon getElementById ne marche pas

Version imprimable

Bonjour,

pourriez me mettre sur la bonne voie, j'essaie de positionner un élément avec getElementById après un calcul que je symbolise ici par une fonction bidon. Mais comment faire rentrer le résultat dans la coordonnée ? Qu'est-ce qui me manque dans le code ?

Merci beaucoup pour votre aide !!

Tomas
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <html> <head> <title>Vyroba</title> <style type="text/css"> #image {position: absolute; top:150px; background-color: yellow; width: 200px; height:200px; } </style> <script> function calculX() { a = 100; return a; } </script> </head> <body> <script> a = calculX(); document.getElementById("image").style.left = a; </script> <div id="image"></div> </body> </html>

04/03/2007, 23h22
N1bus

Bonjour,

Peut-etre que le nom de ton div ne conviens pas : image est peut etre un mot réservé. Tu devrais le renommer , par exemple div-img , et ressayer
04/03/2007, 23h40
Tooomas

J'ai tout simplifié, mon div s'appel l'autrement dans "la réalité". Donc le problème ne viendrait pas d'ici...
05/03/2007, 00h24
bigboomshakala

:mouarf: hello

ton div n'est créé qu'après l'appel du script !
déplace ton script après le code html du div et ça marchera
05/03/2007, 00h57
Tooomas
Si si, ça marche !!! Et dire que je me casse la tête depuis deux jours...

Mais il y a un autre problème qui apparait du coup...
Je veux lancer le calcul de ses coordonnées régulieurement et j'ai rajouté donc une fonction :
Code:

1 2 3 4 5 6 7 function allezgo() { document.write(""); a = calculX(); b = calculY(); document.getElementById("image").style.left = a; document.getElementById("image").style.top = b; }
si donc je met après mon div
Code:

1 2 3 <script> allezgo(); </script>
ça marche toujours très bien - en manuel. En raffraichissant la page, ça recalcul et replace l'élément.

MAIS ! si j'ajoute à la place
Code:

1 2 3 <script> setInterval("allezgo()",1000); </script>
tout les éléments html disparaissent au bout d'une seconde - et de toute façon même pedant la second que l'élément était affiché, il n'a pas pris en compte le coordonnées fournis par le calcule. Pourtant le recalcule marche, je fais afficher les résultats. Mais - ça se passe ensuite sur une page blanche. Et c'est vraiment seulement le setInterval qui a tout fait disparaître...

Vous saurriez que faire pour que setInterval("allezgo()",1000); ne fasse pas tout disparaitre ???

Merci énormément d'avance, je ne suis pas un confirmé en JavaScript... !!!

un truc comme ça je suppose ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
<title>Vyroba</title>
<style type="text/css"> 
#image	{position: absolute; top:150px; background-color: yellow; width: 200px; height:200px; }
</style>
 
<script>
	function getPos(o)
{
	try
	{
		var x = y = 0;
		if (o.offsetParent)
		{
			x = o.offsetLeft;
			y = o.offsetTop;
			while (o = o.offsetParent)
			{
				x += o.offsetLeft;
				y += o.offsetTop;
			}
		}
		return [x,y];
	}
	catch(ex){ window.status = 'function getPos exception : ' + ex.name + ' - ' + ex.message; return [-1,-1];}
}
 
function allezgo(){
	var a = getPos(document.getElementById("image"))[0] + 10;
	var b = getPos(document.getElementById("image"))[1] + 10;
	document.getElementById("image").style.left = a; 
	document.getElementById("image").style.top = b;
	setTimeout("allezgo()",500);
}
</script>
 
</head>
 
<body>
 
 
 
<div id="image"></div>
 
<script>
allezgo();
</script>
</body>
</html>

05/03/2007, 08h44
SpaceFrog

en fait tu as juste un problème d'instanciation vu la position de ton script ...
au moment ou tu appelles avec getElementById ton objet n'est pas encore instancié !

déplace ton script àprès la création du div dasn le flux de la page ou mets le après la balise fermante du body ...
ou fait une focntion que tu appelles dans le onload ...

Malgrès tout...

Vous êtes vachement gentis, merci pour vos efforts... Mais malgrès tout ce que j'ai essayé d'après vos conseils, ça me fait toujours les mêmes bogues...

Je tente une chose. Je mets le tout. Malgrès l'application de tout ce que j'ai pu comprendre de votre exemple qui marche et de vos conseils, ça cloche encore quelque part... Vous y verrez la faille ???

En effet, le calcul apporte le positionnement des éléments par apport à la taille réelle de la fenêtre ouverte. Le CSS n'y fera rien, ça finit par s'alligner en bas à droite sur une portion "recadrée" à l'intérieur du contenu. Le reste sort comme superflu. Le recadrage est ici symbolisé par le cadre vert. (D'abord le jaune est centré, ensuite le vert est centré proportionnellement et à la fin le vert reste visible en bas à droite - vraiment pas de salut avec css).

Voici le code :
(ça marche en manuel, en changeant la taille de la fenêtre et en rechargeant la page. Mais en ajoutant setInterval, rien ne va plus.)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Deplacement</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> #image_principale {position: absolute; background-color: yellow; width: 980px; height:690px;} #image_centre {position: absolute; background-color: non; width: 640px; height: 540px; top: 50px; left: 200px; border: green 30px solid; } </style> <script> function winH() { if (window.innerHeight) return window.innerHeight; else if (document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight; else if (document.body && document.body.clientHeight) return document.body.clientHeight; else return null; } function winW() { if (window.innerWidth) return window.innerWidth; else if (document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth; else if (document.body && document.body.clientWidth) return document.body.clientWidth; else return null; } function laterale(W) { var m=980; var a=700; var r=200; if (W >= m) { x = (W - m)/2; x = Math.floor(x); document.write("W>m: "+x+"<br />"); } else if (a < W && W < m) { x = (7/5)*((W - m)/2); x = Math.floor(x); document.write("a < W < m: "+x+"<br />"); } else if (a > W) { x = W - a - r; document.write("a>W: "+x+"<br />"); } x = Math.floor(x); return x; }; function superieur(H) { var n=690; var b=540; var q=50; if (H >= n) { y = (H - n)/2; y = Math.floor(y); document.write("H>n: "+y+"<br />"); } else if (b < H && H < n) { y = (5/4)*((H - n)/2); y = Math.floor(y); document.write("b < H < n: "+y+"<br />"); } else if (b > H) { y = H - n + q; document.write("b>H: "+y+"<br />"); } y = Math.floor(y); return y; }; function calculX() { puf = winW(); paf = laterale(puf); return paf; } function calculY() { aaa = winH(); bbb = superieur(aaa); return bbb; } function allezgo() { var a = calculX(); var b = calculY(); document.getElementById("image_principale").style.left = a; document.getElementById("image_principale").style.top = b; // setInterval("allezgo()",1000); // (que je l'active ici ou plus bas, c'est le meme bogue...) } </script> </head> <body> <div id="image_principale"> <div id="image_centre"></div> </div> <script> allezgo(); // setInterval("allezgo()",1000); </script> </body> </html>
Je sais, si j'étais un bon, j'aurais la réponse tout seul... Merci d'avance pour votre aide ! En effet, la seule chose qui cloche c'est ce "setInterval"... (setTimeout à la place n'a rien arrangé).

05/03/2007, 12h40
SpaceFrog

lance le setInterval dans le onload de la balise body

Je l'ai fait...

Je l'ai fait comme ça :
Code:

1 2 3 4 5 6 7 8 <body onload="setInterval("allezgo()",1000);"> <div id="image_principale"> <div id="image_centre"></div> </div> </body> </html>
et ça n'a rien donné...

05/03/2007, 12h54
SpaceFrog

mets un alert au debut de la focntion pour voir au moins si elle est lancée ...
05/03/2007, 13h05
Tooomas

Effectivement, ni window.alert("Salut"); ni document.write("By by"); place dans la fonction allezgo() ne donnent rien dans ce cas-là... (<body onload="setInterval("allezgo()",1000);">

Mais dans d'autres cas, le calcul se fait régulieurement, seulement sur la page blanche - je fait afficher les résultats. Pourquoi ça marche parfaitement en manuelle et pas en "automatique" ? Pourtant, le "allzego()" relance toute la procédure depuis le début...
05/03/2007, 13h09
Tooomas

M'infin...

Si, ça marche un peu, en remplacant les guillemets :
<body onload="setInterval('allezgo()',1000);">

Mais c'est toujours la même chose. Je vois le compte rendu du calcul sur la page blanche, les éléments ont disparu !
05/03/2007, 13h10
SpaceFrog
problème de quotes ...
Code:

1 2 <body onload="setInterval(function(){allezgo()},1000);">
ou

Code:

<body onload="setInterval('allezgo()',1000);">
05/03/2007, 13h17
Tooomas

Oui, on a du se croiser... J'ai effectivement remarqué le pb des quotes, je l'ai corrigé. J'ai ensuite essayé ta deuxième possibilité d'écriture. Le résultat est le même : calcul se fait, mais sur une page blanche...
05/03/2007, 13h24
Tooomas

L'exemple qui marchait admirablement de "bigboomshakala" est clair. J'ai juste remplacé sa function getPos(o) par la mienne - et rien ne vas plus pour l'affichage. Si non, je pense que l'architecture de nos deux choses est strictement la même ! J'ai bien vérifié ! Je suis punis pour des péchés comises ???
05/03/2007, 13h24
SpaceFrog

normal document.write ecrase le contenu de la page ...

colle un div sur la page et attribues lui le contenu que tu souhiates en innerHTML par exemple ..
05/03/2007, 13h55
Tooomas

Super ! Ca marche. En enlevant les document.write, ça marche. Pourquoi alors ça marché manuellement avec ???

Donc si je résume toutes mes problèmes c'était :
1) soit l'ordre de placement de mon "div" et de la "fonction", soit il fallait placer l'unload dans le body
2) des quotes imbriqués
3) document.write qui efface tout

Et voilà !!!
Merci beaucoup !!

P.S. Naivement, j'ai pensé que les éléments vont se redimentionner avec le redimentionnement de la fenêtre, en temps réel, comme avec CSS. Mais non, ça se réajuste une fois la souris lachée. Bon tant pis, on ne peut pas tout avoir...
05/03/2007, 14h06
bigboomshakala

pour qu'il se passe une action au redimensionnement de la fenêtre il faut associer une fonction à l'événement window.onresize

Code:

window.onresize = function(){repositionner ('idToto')};
05/03/2007, 14h34
SpaceFrog

tes elements se redimensionneraient avec la fenetre si ils étaient dimensionnés en pourcentage à la base ...
Mais bon dimensionner intégralement un site en % ... bonjour la galère ...
05/03/2007, 15h06
Tooomas

Cooool...

J'ai intégré windows.onresize, c'est parfait !

Mon but et la nécessité c'est ça :
- rien redimentionner
- par contre au fur et à mesure que la fenêre diminue, laisser impérativement l'essentiel avec ses dimentions d'origine et en le laissant visible.

En gross, les éléments graphiques sortent de plus en plus, on s'en fou. Ce qui reste c'est un petit div du texte avec deux trois liens en dessous.

C'est un jeu interactive pédagogique, ou on passe par des situations et on choisit entre plusieurs comportement proposé pour continuer. L'habillage c'est bien, mais l'essentiel c'est le petit bout de text et le choix. Ca doit rester toujours pareil et visible. Du coup, il n'y aura même pas les ascenseurs, car l'essentiel sera toujours visible. Et au départ, on se trouvera sur du plein page dépouillé de toutes les bares.

Avec tous ces problèmes, j'étais tenté de l'ouvrir plein page et de le figer, mais comme ça c'est quand même beaucoup mieux ! Merci encore pour votre aide !