[DOM] Détection redimensionnement de la fenêtre windows via JQuery

Invité · 18/08/2008, 01h45

Bonjour,

Est-il possible, avec JQuery, de détecter le redimensionnement de la fenêtre de l'explorateur internet (IE, FF, ..). Le but est de redimensionner la hauteur du document html. (pas le changement de resolution

)

Voir ICI, si vous redimensionnez la fenêtre de FF ou IE, ou le volet Firebug ou IE Developer Toolbar, lors de l'entrée ou la sortie de la souris du document html, il se redimensionne à la hauteur correcte.

Merci pour vos aides

A+

**Bovino** · 18/08/2008, 02h07

Bonjour,
A la base, je pense que c'est juste la gestion du onresize sur le body, ensuite, il suffit de récupérer les nouvelles dimensions de la fenêtre pour adapter les styles des différents éléments de la page.

Invité · 18/08/2008, 09h51

Bonjour Bovino,

Pour les valeurs pas de soucis puisque j'arrive à redimensionner la page. Cependant, je n'ai pas encore réussi à capturer le bon évènement pour déclencher le redimensionnement.

J'ai essayer sur body, sur ses parents avec resize change et même focus, mais rien, la désolation.

Bon, je continue mes recherches.

A+

edit: le code de la page:

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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="style_reset.css" type="text/css" />
<style type="text/css">
body{
  overflow: hidden;
}
.site{
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	background-color: red;
}
.haut{
	width: 100%;
	height: 50px;
	background-color: lime;
}
 
.gauche{
	float: left;
	width: 150px;
	text-align: center;
	background-color: olive;
}
 
.droite{
  float: left;
  width: 600px;
  background-color: white;
}
.bas{
  width: 100%;
  height: 50px;
  background-color: lime;
}
.m{
	width: 100%;
	background-color: olive;
}
.t_m{
  padding: 4px;
  width: 142px;
}
.sm{
	width: 100%;
	background-color: InactiveCaptionText;
}
.t_sm{
  padding: 4px;
  width: 142px;
}
.clicked{
	background-color: #8fbc8f;
}
.fleche_d{
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(16-arrow-right.png);
}
.fleche_b{
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(16-arrow-down.png);
}
.clearer{
	clear: left;
}
</style>
 
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
 
fen_size = {
 
  _h: function() {
      if (window.innerHeight) {
    	//Navigateurs sauf Explorer
        H = window.innerHeight;
      }
      else if (document.documentElement && document.documentElement.clientHeight) {
      	//Internet Explorer mode Strict
      	H = document.documentElement.clientHeight;
      }
      else if (document.body && document.body.clientHeight) {
      	//Autres Internet Explorer
      	H = document.body.clientHeight;
      }
      return H ;
  },
 
  _w: function() {
      if (window.innerHeight) {
        	//Navigateurs sauf Explorer
        	W = window.innerWidth;
        }
        else if (document.documentElement && document.documentElement.clientHeight) {
        	//Internet Explorer mode Strict
        	W = document.documentElement.clientWidth;
        }
        else if (document.body && document.body.clientHeight) {
        	//Autres Internet Explorer
        	W = document.body.clientWidth;
        }
        return W ;
  }
};
// Traitement après chargement DOM
$(document).ready(function() {
  // Masquage sous_menu
  $(".sm").hide();
  // Dimensionnement de la page
  $(".gauche").height(fen_size._h() - $(".haut").height() - $(".bas").height());
  $(".site").bind("mouseenter",function(){$(".gauche").height(fen_size._h() - $(".haut").height() - $(".bas").height());});
  $(".site").bind("mouseleave",function(){$(".gauche").height(fen_size._h() - $(".haut").height() - $(".bas").height());});
  // Gestion flèche
  $(".m,.t_sm").hover(
    function(){$(this).siblings(".sm").length ? $(this).addClass("fleche_b"):$(this).addClass("fleche_d")},
    function(){$(this).siblings(".sm").length ? $(this).removeClass("fleche_b"):$(this).removeClass("fleche_d")}
  );
  // Gestion animation
  $(".t_m").click(function(){
        if ($(this).parent(".m").siblings(".sm:visible").length != 0 ) {
          $(this).parent(".m").removeClass("clicked").siblings(".sm").slideUp("slow");
        }
        else {
          $(".m").removeClass("clicked").siblings(".sm:visible").slideUp("slow");
          $(this).parent(".m").addClass("clicked").siblings(".sm").slideDown("slow");
        }
  });
  // Gestion appel
  $("#m1").click(go_m1);
  $("#m2").click(go_m2);
  $("#m3").click(go_m3);
  $("#m4").click(go_m4);
  $("#m5").click(go_m5);
  $("#m6").click(go_m6);
  $("#m7").click(go_m7);
  $("#m8").click(go_m8);
  $("#m9").click(go_m9);
  $("#m10").click(go_m10);
  $("#m11").click(go_m11);
});
 
 
function go_m1() {alert("m 1"); return false;};
function go_m2() {alert("m 2-1"); return false;};
function go_m3() {alert("m 2-2"); return false;};
function go_m4() {alert("m 2-3"); return false;};
function go_m5() {alert("m 3"); return false;};
function go_m6() {alert("m 4-1"); return false;};
function go_m7() {alert("m 4-2"); return false;};
function go_m8() {alert("m 4-3"); return false;};
function go_m9() {alert("m 5-1"); return false;};
function go_m10() {alert("m 5-2"); return false;};
function go_m11() {alert("m 5-3"); return false;};
 
</script>
 
<title>Titre Vertical Accordéon</title>
</head>
<body>
<div class="site">
    <div class="haut">Le Haut</div>
    <div class="gauche">
        <!-- Menu 1 -->
        <div class="blk_menu">
            <div id="m1" class="m">
                <div class="t_m">Menu 1</div>
            </div>
        </div>
        <!-- Menu2 -->
        <div class="blk_menu">
            <div class="m">
                <div class="t_m">Menu 2</div>
            </div>
            <div id="m2" class="sm">
                <div class="t_sm">Sous-Menu 2-1</div>
            </div>
            <div id="m3" class="sm">
                <div class="t_sm">Sous-Menu 2-2</div>
            </div>
            <div id="m4" class="sm">
                <div class="t_sm">Sous-Menu 2-3</div>
            </div>
        </div>
        <!-- Menu 3 -->
        <div class="blk_menu">
            <div id="m5" class="m">
                <div class="t_m">Menu 3</div>
            </div>
        </div>
        <!-- Menu 4 -->
        <div class="blk_menu">
            <div class="m">
                <div class="t_m">Menu 4</div>
            </div>
            <div id="m6" class="sm">
                <div class="t_sm">Sous-Menu 4-1</div>
            </div>
            <div id="m7" class="sm">
                <div class="t_sm">Sous-Menu 4-2</div>
            </div>
            <div id="m8" class="sm">
                <div class="t_sm">Sous-Menu 4-3</div>
            </div>
        </div>
        <!-- Menu 5 -->
        <div class="blk_menu">
            <div class="m">
                <div class="t_m">Menu 5</div>
            </div>
            <div id="m9" class="sm">
                <div class="t_sm">Sous-Menu 5-1</div>
            </div>
            <div id="m10" class="sm">
                <div class="t_sm">Sous-Menu 5-2</div>
            </div>
            <div id="m11" class="sm">
                <div class="t_sm">Sous-Menu 5-3</div>
            </div>
        </div>
    </div>
    <div class="droite">coucou</div>
    <div class="clearer"></div>
    <div class="bas">le bas</div>
</div>
</body>
</html>

**Bovino** · 18/08/2008, 10h38

Tu as essayé ça :

Code :

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

1
2
3
$(window).resize(function(){
  //ta fonction
});

?

Invité · 18/08/2008, 11h18

J'ai presque testé (je pense) tous les éléments parents de body, même html!
Mais rien, argh!!

Je vais finir par mettre un timer pour vérifier si la valeur a changée

A+

**Bovino** · 18/08/2008, 11h30

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function() {
  // Masquage sous_menu
  $(".sm").hide();
  // Dimensionnement de la page
  $(window).resize(function(){
    $(".gauche").height(fen_size._h() - $(".haut").height() - $(".bas").height());
  });
  // Gestion flèche

Ne fonctionne pas ???

Invité · 18/08/2008, 11h47

Ah, la la

Pourquoi vouloir mettre des ' ou des " partout.
Bon, super Bovino, cela fonctionne, merci à toi!

Code :

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

$(window).resize(function(){ $(".gauche, .droite").height(fen_size._h()); return false });

Ne pas oublier le return false; en fin de fonction pour éviter la propagation.

Modif du code après chargement du DOM (j'ai simplifié et intégré dans fen_size le calcule qui va bien) et j'ai calculé aussi la hauter de .droite (sinon pas d'overflow quand il y en a besoin).

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
// Traitement après chargement DOM
$(document).ready(function() {
  // Masquage sous_menu
  $(".sm").hide();
  // Dimensionnement de la page
  $(".gauche, .droite").height(fen_size._h()); 
  $(window).resize(function(){ $(".gauche, .droite").height(fen_size._h()); return false });
  // Gestion flèche
  $(".m,.t_sm").hover(
    function(){$(this).siblings(".sm").length ? $(this).addClass("fleche_b"):$(this).addClass("fleche_d")},
    function(){$(this).siblings(".sm").length ? $(this).removeClass("fleche_b"):$(this).removeClass("fleche_d")}
  );
  // Gestion animation
  $(".t_m").click(function(){
        if ($(this).parent(".m").siblings(".sm:visible").length != 0 ) {
          $(this).parent(".m").removeClass("clicked").siblings(".sm").slideUp("slow");
        }
        else {
          $(".m").removeClass("clicked").siblings(".sm:visible").slideUp("slow");
          $(this).parent(".m").addClass("clicked").siblings(".sm").slideDown("slow");
        }
  });
  // Gestion appel
  $("#m1").click(accueil);
  $("#m2").click(go_m2);
  $("#m3").click(go_m3);
  $("#m4").click(go_m4);
  $("#m5").click(go_m5);
  $("#m6").click(go_m6);
  $("#m7").click(go_m7);
  $("#m8").click(go_m8);
  $("#m9").click(go_m9);
  $("#m10").click(go_m10);
  $("#m11").click(go_m11);
});

Bon, maintenant je passe à $.ajax pour remplir le partie droite

A+

edit 1: modif des codes $(".gauche, .droite") ben plus court, feignasse

edit 2: bon j'ai remis $(".gauche, .droite").height(fen_size._h()); sinon, pb lors de raffraichissement de la page via F5...

[DOM] Détection redimensionnement de la fenêtre windows via JQuery

jQuery

Discussions similaires

Partager

Partager