"DIV" et centrages (y'a aussi du JS)

**Bensor** · 07/08/2007, 10h37

Bonjour,

Je suis en train de coder un widget javascript de boites de dialogues (modales ou non, peu importe, ce sont des boites de dialogue).

Tout d'abord, le fonctionnement du truc. les DIVs qui serviront de boites de dialogues sont auparavant invisible, et leur hauteur n'est pas fixée. Lorsqu'on veut afficher une boite de dialogue, on affiche un DIV, en absolute, qui opacifie partiellement la page, puis on affiche, en absolute aussi, la boite de dialogue.

Mon problème est que je n'arrive pas à centrer les DIVs verticalement ni horizontalement.

Pour le vertical, je sais que cela marche avec un truc du genre "style.top='50%';style.marginTop= -document.getElementById('dialog').style.offsetHeight);", mais le problème est que offsetHeight me retourne 0, que ce soit sous Fx, IE ou Opéra. Pourtant, à priori, la boite de dialogue est créée avant l'appel de la fonction javascript, même si elle est masquée par défaut.

Pour l'alignement horizontal, normalement une automatisation des marges de droite et de gauche le fait, mais ce n'est pas mon cas :s

Voilà mon code sans les tentatives d'alignement vertical:

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
64
65
66
67
68
69
70
71
<html>
  <head>
    <style>
      .dialog {
        background-color: #DDDDFF;
        display:none;
        -moz-border-radius: 5px;
        padding: 4px;
        margin-left: auto;
		margin-right: auto;
        width: 525px;
        border: #999 1px solid;
        z-index: 999;
        position: absolute;
      }
      #dialog_container{
        opacity: 0.5;
        background-color: #FFFFFF;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        top: 0px;
        left: 0px;
        display:none;
        position: absolute;
        z-index: 998;
      }
    </style>
    <script type='text/javascript'>
      var opened_div = "";
      var has_clicked = false;
      var divh = 0;
 
      function page_width() {
        return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;
      }
      function page_height(){
        return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;
      }
 
      function show_dialog(obl){
        opened_div = obl;
        var obol = document.getElementById("dialog_container");
        obol.style.height=page_height()+"px";
        obol.style.width=page_width()+"px";
        obol.style.display='block';
        document.getElementById(obl).style.display='block';
 
        return false;
      }
      function hide_dialog(){
        document.getElementById('dialog_container').style.display="none";
        document.getElementById(opened_div).style.display="none";
        document.onkeypress=''
      }
    </script>
  </head>
  <body>
    <div id='dialog_container'></div>
    <div id='dial1' class='dialog'>
      <p>Dialogue 1</p>
      <p><a href='#' onclick='hide_dialog();'>Fermer</a></p>
    </div>
    <div id='dial2' class='dialog'>
      <p>Dialogue 2</p>
      <p><a href='#' onclick='hide_dialog();'>Fermer</a></p>
    </div>
    <p>Bla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla</p>
    <a href='#' onclick='show_dialog("dial1")'>Montrer 1</a><a href='#' onclick='show_dialog("dial2")'>Montrer 2</a>
    <p>Bla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla</p>
  </body>
</html>

PS : Ce widget est une adaptation d'un widget trouvé sur un autre site, donc si des noms de fonction ou de variable vous semblent familier, c'est normal

Merci.

**Bensor** · 07/08/2007, 14h54

Personne n'a d'idées?

En fait je pense que la cause du problème vient du fait que le div est caché dès le début, les navigateurs ne doivent pas trop aimer ça. Si seulement il y avait un moyen de récupérer ne serait-ce que la hauteur du truc dans le cas présent pour l'alignement vertical, cela me sauverait la vie

Mais pourquoi CSS n'intègre pas de paramètre de centrage vertical (un genre de 'vertical-position: center')? Cela faciliterait la vie d'un bon nombre de développeurs web

**Candygirl** · 07/08/2007, 15h30

Envoyé par Bensor

Pour le vertical, je sais que cela marche avec un truc du genre "style.top='50%';style.marginTop= -document.getElementById('dialog').style.offsetHeight);", mais le problème est que offsetHeight me retourne 0, que ce soit sous Fx, IE ou Opéra.

Euh, il me semble que offsetHeight s'applique directement à l'élément; ce n'est pas un style. En rajoutant un alert dans ta fonction show_dialog tu verras que cela fonctionne (sur FF et aussi sur IE pour autant que tu rajoutes un doctypequ'il passe en mode standard

):

Code javascript :

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

alert(document.getElementById(obl).offsetHeight);

mais je ne maîtrise pas des masses javascript...

**Bensor** · 07/08/2007, 16h44

Envoyé par Candygirl

Euh, il me semble que offsetHeight s'applique directement à l'élément; ce n'est pas un style. En rajoutant un alert dans ta fonction show_dialog tu verras que cela fonctionne (sur FF et aussi sur IE pour autant que tu rajoutes un doctypequ'il passe en mode standard

):

Code javascript :

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

alert(document.getElementById(obl).offsetHeight);

mais je ne maîtrise pas des masses javascript...

J'y crois pas

ca fonctionne

Parfaitement centré comme il faut verticalement

Tu me sauves la vie là

Je faisais un offsetHeight après un style, donc forcement ça fonctionnait pas bien

Bon maintenant, me reste plus qu'à résoudre l'alignement horizontal et le truc est presque prêt pour la production (reste un piti problème de fermeture intempestive de la boite à résoudre sous opéra, je pense pas que ça soit sorcier à résoudre). Si quelqu'un à une idée sur cet alignement horizontal, il est le bienvenue

**balu** · 08/08/2007, 01h04

Bonjour,

Ce n'est pas une réponse précise mais pour ton JavaScript, le framework Prototype pourrait t'aider pour le côté cross-browser.

**Bensor** · 08/08/2007, 09h36

Envoyé par balu

Bonjour,

Ce n'est pas une réponse précise mais pour ton JavaScript, le framework Prototype pourrait t'aider pour le côté cross-browser.

Le côté Javascript fonctionne parfaitement (enfin, sauf sous Opéra), je n'ai pas besoin d'utiliser Prototype pour 2-3 fonctionnalités relativement simples à mettre en oeuvre, javascript ou ajax. De plus, l'utilisation de Prototype nécessite certainement une phase d'apprentissage, chose que je ne peux pas me permettre pour le moment.

Enfin maintenant c'est plus une question de CSS que de JS.

**Candygirl** · 08/08/2007, 10h18

Pour centrer horizontalement un bloc en absolu on utilise en général une marge négative de la moitié de la largeur de ton block:

Code :

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

1
2
3
4
5
6
7
 
.dialog {
  width:525px;
  position:absolute;
  right:50%;
  margin-left:-462px
}

Le problème de cette technique est que, si la largeur de ta fenêtre est inférieure à la largeur de ton élément, une partie du contenu disparaît à gauche, sans possibilité de scroller pour le voir.

Tout dépend de la construction de ta page. Si tu as dedans un élément qui garantit une largeur minimum de 525px, il n'y a aucun problème, autrement tu peux définir un min-width sur le body pour éviter ce désagrément (mais pas pris en compte par IE6).

**Bensor** · 08/08/2007, 10h36

C'est parfait

La largeur des boites de dialogue restera certainement à 525px pour un bon bout de temps, donc de ce côté là, pas de soucis

Le code source, qui a subi un petit coup de balai

:

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
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
  <head>
    <style>
      .dialog {
        background-color: #DDDDFF;
        display:none;
        -moz-border-radius: 5px;
        padding: 4px;
        margin-left: auto;
	margin-right: auto;
        width: 526px;
        left: 50%;
  	margin-left: -263px;
        border: #999 1px solid;
        z-index: 999;
        position: absolute;
        top: 50%
      }
      #dialog_container{
        opacity: 0.5;
        background-color: #FFFFFF;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;
        top: 0px;
        left: 0px;
        display:none;
        position: absolute;
        z-index: 998;
      }
    </style>
 
    <script type='text/javascript'>
      var opened_div = "";
 
      function page_width() {
        return window.innerWidth != null? window.innerWidth: document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth:document.body != null? document.body.clientWidth:null;
      }
      function page_height(){
        return window.innerHeight != null? window.innerHeight: document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight:document.body != null? document.body.clientHeight:null;
      }
 
      function show_dialog(dialog){
      	opened_div = dialog;
 
        var dialog_container = document.getElementById("dialog_container");
        dialog = document.getElementById(dialog);
 
        dialog_container.style.height=page_height()+"px";
        dialog_container.style.width=page_width()+"px";
        dialog_container.style.display='block';
 
        dialog.style.display='block';
        var width = dialog.offsetHeight;
        dialog.style.marginTop=-(width/2);
      }
      function hide_dialog(){
        document.getElementById('dialog_container').style.display="none";
        document.getElementById(opened_div).style.display="none";
      }
    </script>
  </head>
  <body>
    <div id='dialog_container'></div>
    <div id='dial1' class='dialog'>
      <p>Dialogue 1</p>
      <p><a href='#' onclick='hide_dialog();'>Fermer</a></p>
    </div>
    <div id='dial2' class='dialog'>
      <p>Dialogue 2</p>
      <p><a href='#' onclick='hide_dialog();'>Fermer</a></p>
    </div>
    <p>Bla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla</p>
    <a href='#' onclick='show_dialog("dial1")'>Montrer 1</a><a href='#' onclick='show_dialog("dial2")'>Montrer 2</a>
    <p>Bla bla Bla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla blaBla bla</p>
  </body>
</html>

Petit rappel : le code ne fonctionne pas (encore) sous Opera

**beeboo** · 08/08/2007, 11h29

Sinon pour ce genre d'opération, il existe des bibliothèques de fonctions javascript tout-à-fait respectueuses des standards, pas trop lourdes et offrant un accès orienté objet à tous les eléments du DOM :
http://www.prototypejs.org/
et pour les effets visuels :
http://script.aculo.us/

"DIV" et centrages (y'a aussi du JS)

Centrer un élément en CSS

Discussions similaires

Partager

Partager