changement de position d'un div

Version imprimable

20/07/2010, 04h48
visqueu

changement de position d'un div
Salut
je fais un site là ou chaque utilisateur dispose de sa boite de messagerie,

j'ai une première page dans laquelle il y a la liste des messages dans des div

l'utilisateur peut cliquer sur un X pour supprimer un message, j'ouvre la page de

suppression par un iframe pour éviter le rechargement et je met le <div>

supprimé en style hidden .. mais je dois décaler mes messages en dessous en

haut de 100 px pour occuper l'espace laissé par la div supprimée

ça marche pour la première fois seulement...
après les
Code:

1 2 document.getElementById("message"+num).style.top=document.getElementById("message"+num).style.top - 100;
ne changent rien !

merci d'avance
20/07/2010, 09h48
eckerdecker

Bonjour,

Je ne visualise pas très bien comment sont disposés tes divs ni pourquoi tu utilises une iframe mais je vais te donner quelques remarques qui feront peut-être avancer ton shmilblik :

- la propriété css top n'a de sens que si ton élément est en position: relative ou absolute ou encore fixed

- la propriété css top s'indique ainsi : "100px" donc ton bout de javascript fais une soustraction entre une chaine et un entier : "100px" - 100. De plus si à l'origine la propriété top n'était pas renseignée je ne sais pas trop ce que va te donner sa lecture via javascript.

- si tes divs sont dans le flux normal de la page, tu ne devrais même pas avoir besoin de les replacer quand tu en met un en hidden.
20/07/2010, 09h52
gwyohm
Citation:

Envoyé par eckerdecker

Bonjour,
- si tes divs sont dans le flux normal de la page, tu ne devrais même pas avoir besoin de les replacer quand tu en met un en hidden.

+1
Code:

1 2 var a = "100px"-100; // -> NaN

salut
comme vous le voyez je fixe en position relative mes divs !
sauf que c'est dynamique et c'est dans une boucle while et les id des divs sont dynamiques aussi...
si c'est une soustraction de string-int pourquoi ça marche pour la première soustraction ?
est ce que je dois donc enlever les "px" de 100px et puis convertir en int pour réaffecter ensuite ?

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
 
<div id=message<?php echo $num;?> style="position:relative;"><table width="670px" border="1">
  <tr>
    <td width="3%">&nbsp;</td>
    <td width="9%">&nbsp;</td>
    <td width="15%"><?php echo $sender[1];?>&nbsp;</td>
    <td width="64%"><?php echo $b[4]; ?></td>
    <td width="9%">
	<form id=<?php echo $num ?> target="mess<?php echo $num;?>" method="POST" action="message.php"  onsubmit="delete_mess(<?php echo $num;?>);">
	<input type=hidden value=<?php echo $b[0]; ?> name=message>
	<input type=hidden value=<?php echo $num; ?> name=num>
	<input type=submit value=X>
	</form></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td colspan=2>
	<p id=load<?php echo $num;?>><img src="loader.gif"/></p><?php echo $b[5]; ?>
	<div style="cursor:pointer" onclick="
	document.getElementById('rep<?php echo $b[0]?>').style.display='block';" ><h1> Repondre</h1></div>
	<span id=rep<?php echo $b[0]?> style="display:none;">
 
	<table width=500><tr><td align=center><form name=message method=post action=ajout.php>
	  &nbsp;<input type=hidden name=message_rep value=0></td></tr>
	  <tr><td align=center><textarea name=corps cols=40 rows=10></textarea><br></td></tr>
	  <input type=hidden name=rec value=$him;
	  <input type=hidden name=preced value=$b[0];
	  <tr><td align=center><input type=submit value=Envoyer></td></tr>
	  </form></table>
 
	</span><br />
	</td>
 
  </tr>
</table>	<iframe id="mess<?php echo $num;?>" name="mess<?php echo $num;?>" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</div>

21/07/2010, 08h50
gwyohm

Salut,

Citation:

Envoyé par visqueu

comme vous le voyez je fixe en position relative mes divs !

En effet, mais tu ne fais que définir la position comme relative, pas de définition du top.

Par ailleurs, on ne voit pas ton javascript dans le code ; et il serait plus simple d'avoir le code généré plutôt que le php.

Enfin, il est préférable de mettre des " autour des valeurs des attributs de tes entités HTML.
21/07/2010, 14h10
Watilin

Citation:

Envoyé par visqueu

Salut
…
je met le <div> supprimé en style hidden …

Tu veux dire « visibility: hidden » ou « display: none » ?

Parce que si tes <div> sont positionnés en static (c’est le mode par défaut) et masqués avec display, ça devrait marcher… À moins que ton CSS soit vraiment tordu…

;)