Déplacer un div dans un autre : quelle propriété ?

**MaTHieU_** · 15/08/2006, 14h04

Bonjour,

Je voudrais déplacer mon div "scrollup" dans mon div "live_informations" mais je n'y arrive pas...

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>ScrollUp</title>
		<meta http-equiv="content-language" content="fr"/>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15"/>
		<meta http-equiv="content-style-type" content="text/css"/>		
		<style type="text/css">
                        body
                        {
                                font-family             : Verdana;
                                font-size                       : 10px;
                        }
                        #live_informations
                        {
                                background-color        : #FFCE73;
                                border                  : 1px solid #000000;
                                height                  : 25px;
                                /*overflow                      : hidden;*/
                                width                   : 400px;
                        }
                        #scrollup
                        {
                                background-color        : #CCC;
                                position                        : relative;
                        }
                </style>
		<script type="text/javascript">
                        function scrollup()
                        {
                                setTimeout("scrollup()", 500);
                        }
                </script>
	</head>
	<body onload="javascript:scrollup();">
		<div id="live_informations">
			<div id="scroolup">
				15/08 18:50 : XXXX<br/>
				15/08 14:30 : YYYY<br/>
				15/08 12:12 : ZZZZ<br/>
				15/08 10:18 : AAAA<br/>
				15/08 06:45 : BBBB<br/>
				15/08 04:32 : CCCC<br/>
				14/08 23:47 : DDDD<br/>
				14/08 10:19 : EEEE
			</div>
		</div>
	</body>
</html>

J'ai essayé avec "top" et "margin-top" mais sans succès...

Savez-vous pourquoi ça ne fonctionne pas ?

Merci,
Mathieu

**Fabster** · 15/08/2006, 14h09

Envoyé par MaTHieU_

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="scroolup">

Peux etre a cause de ca, nan

?

Ou peux etre a tu fait une faute de frappe en ecrivant

**MaTHieU_** · 15/08/2006, 14h10

Bonjour,

Haaaa!!!!

J'aurai pu chercher longtemps

Merci,
Mathieu

**Fabster** · 15/08/2006, 14h12

lol, c'etait pas une faute de frappe alors

si je comprend bien
[EDIT] Ca s'est des trucs a la ***

[/edit]

**MaTHieU_** · 15/08/2006, 14h14

Salut,

Si si c'était une faute de frappe...

Mais jamais j'aurai pensé à vérifier le nom de l'id

Merci,
Mathieu

**Fabster** · 15/08/2006, 14h17

Lol, quand je disais faute de frappe, je parlais dans ton message. Je me suis dit que c'etait peut etre une erreur qui s'etait glisser entre ton code et ton post ici. Mais c'est pas grave, bonne continuation

**MaTHieU_** · 15/08/2006, 14h19

Salut,

Ha, OK!

Par contre, une autre question...

J'essai d'utiliser ça en JavaScript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("scrollup").style.top = document.getElementById("scrollup").style.top - 1;

Mais ça ne semble pas marcher :

Erreur*: Erreur d'analyse de la valeur pour la propriété «*top*». Déclaration abandonnée.
Fichier source*: file:///C:/Documents%20and%20Settings/xxx/Bureau/scroolup.html
Ligne*: 0

Sais-tu pourquoi ?

Merci,
Mathieu

**Fabster** · 15/08/2006, 14h24

Euh, le style.top n'existe pas en javascript.
Mais apres je vois pas trop ce que tu veux faire, explique un peu ce que tu recherche a faire.
Je te file le lien d'un site reprenant les equivalences entre les proprietes en CSS et celle en javascript. Ca pourra peut etre t'aider
Equivalence

**MaTHieU_** · 15/08/2006, 15h28

Salut,

J'ai donc utilisé marginTop !

Une autre question, comment récpérer la taille d'un div en JavaScript ?

Car j'ai besoin de récupérer la taille du div "scrollup".

Merci,
Mathieu

**Fabster** · 15/08/2006, 15h39

cette fois-ci faut utiliser une autre methode que le .display.
Faut chercher du cote des offset, ca doit etre un truc du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.element.offsetHeight;

**MaTHieU_** · 15/08/2006, 15h40

Salut,

J'ai fait ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var MyScrollUp = document.getElementById("scrollup");
var MyScrollUpHeight = MyScrollUp.offsetHeight;

C'est niquel

Merci,
Mathieu

**MaTHieU_** · 15/08/2006, 16h11

Salut,

J'ai donc fini, cependant, j'ai un soucis encore de compatibilité avec Internet Explorer, le div contenu "scrollup" dépasse du div conteneur...
En effet, ça macrhe parfaitement avec Firefox...

Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>ScrollUp</title>
		<meta http-equiv="content-language" content="fr"/>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15"/>
		<meta http-equiv="content-style-type" content="text/css"/>		
		<style type="text/css">
                        body
                        {
                                font-family             : Verdana;
                                font-size                       : 10px;
                        }
                        #live_informations
                        {
                                background-color        : #FFCE73;
                                border                  : 1px solid #000000;
                                height                  : 45px;
                                overflow                        : hidden;
                                width                   : 400px;
                        }
                        #scrollup
                        {
                                background-color        : #FFCE73;
                                position                        : relative;
                        }
                </style>
		<script type="text/javascript">
                        function scrollup()
                        {                               
                                var MyScrollUp = document.getElementById("scrollup");
                                var MyLiveInformations = document.getElementById("live_informations");
                                var MyReg = new RegExp("px","g");
                                var MyScrollUpMarginTop = MyScrollUp.style.marginTop;
                                var MyScrollUpHeight = MyScrollUp.offsetHeight;
                                var MyLiveInformationsHeight = MyLiveInformations.offsetHeight;
                                MyScrollUpMarginTop = MyScrollUpMarginTop.replace(MyReg,"");
                                if (MyScrollUpMarginTop < -96)
                                {
                                        MyScrollUpMarginTop = MyLiveInformationsHeight;
                                }
                                MyScrollUpMarginTop = MyScrollUpMarginTop-1 + "px";
                                MyScrollUp.style.marginTop = MyScrollUpMarginTop;
                                setTimeout("scrollup()", 100);
                        }
                </script>
	</head>
	<body onload="javascript:scrollup();">
		<div id="live_informations">
			<div id="scrollup">
				15/08 18:50 : XXXX<br/>
				15/08 14:30 : YYYY<br/>
				15/08 12:12 : ZZZZ<br/>
				15/08 10:18 : AAAA<br/>
				15/08 06:45 : BBBB<br/>
				15/08 04:32 : CCCC<br/>
				14/08 23:47 : DDDD<br/>
				14/08 10:19 : EEEE
			</div>
		</div>
	</body>
</html>