Actualisation de la fenêtre

**Antoniom** · 13/03/2014, 08h41

Bonjour à touts !

J'ai plusieurs petits problèmes avec une div qui est poussée vers le bas en cliquant sur un bouton.

Le mieux est de voir le fichier joint, tout est expliqué dedans.

Il faut réduire la fenêtre pour voir le petit bouton s'afficher.

Par avance, un grand merci !

Antonio.

**Spartacusply** · 13/03/2014, 23h28

Salut, toute petite modif au niveau de la fonction resize, et tes 3 problèmes sont corrigés (la résolution du premier implique la résolution des deux autres

) :

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
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Document sans nom</title>
 
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script type="text/javascript">
 
            jQuery(function() {
 
                $("#sousmenu").hide();
                $("#btnclick").hide();
 
                function size() {
                    var tailleFenetre = $(this).width();
 
                    if (tailleFenetre > 700) {
                        $("#btnclick").hide();
                        $("#sousmenu").hide();
                        $("#conteneur").stop().animate({marginTop: 10}, 'fast');
                    }
                    else {
                        $("#btnclick").show();
                    }
                }
                size();
 
                $(window).resize(function(e) {
                    size();
                });
 
                $("#btnclick").click(function() {
 
                    $("#btnclick").removeClass("img-btn-retour");
 
                    var txt = $("#btnclick").val()
 
                    if (txt == "Ouvrir") {
                        $("#conteneur").stop().animate({marginTop: 210}, 'fast');
                        $("#sousmenu").slideToggle('fast');
                        $("#btnclick").val("Fermer");
                        $("#btnclick").addClass("img-btn-retour");
                        return false;
                    }
                    else if (txt == "Fermer") {
                        $("#conteneur").stop().animate({marginTop: 10}, 'fast');
                        $("#sousmenu").slideToggle('fast');
                        $("#btnclick").val("Ouvrir");
                        $("#btnclick").removeClass("img-btn-retour");
                        return false;
                    }
 
                });
 
            });
 
        </script>
 
        <style type="text/css">
 
            html, body {
                width:100%;
                margin:0;
                padding:0;
            }
            #nav {
                width:72%;
                height:50px;
                background-color:skyblue;
                margin:0 auto;
                text-align:center;
            }
            .img-btn {
                width:35px;
                height:35px;
                margin-top:10px;
                text-indent:-999px;
                background-color:skyblue;
                background-image:url(descendre.png);
                background-repeat:no-repeat;
                border:none;
                cursor:pointer;
                opacity:.5;
                transition:all .4s ease-out;
                -moz-transition:all .4s ease-out;
                -ms-transition:all .4s ease-out;
                -o-transition:all .4s ease-out;
                -webkit-transition:all .4s ease-out;
            }
            .img-btn:hover {
                opacity:1;
            }
            .img-btn-retour {
                background-repeat:no-repeat;
                background-image:url(monter.png);
            }
            #menu, #sousmenu {
                list-style:none;
                padding:0;
            }
            #menu li {
                height:50px;
                width:100px;
                margin:0 auto;
                line-height:46px;
            }
            #menu li a {
                display:block;
                color:black;
                text-decoration:none;
            }
            #sousmenu li {
                background-color:pink;
            }
            #sousmenu li:hover {
                background-color:skyblue;
            }
            #conteneur {
                width:70%;
                height:auto;
                margin:10px auto;
                padding:1%;
                background-color:pink;
            }
            #block {
                width:96%;
                margin:1%;
                padding:1%;
                background-color:skyblue;
            }
            .cadre {
                padding:1%;
                border:1px solid black;
            }
        </style>
 
    </head>
 
    <body>
 
        <nav id="nav">
            <ul id="menu">
                <li>
                    <form>
                        <input class="img-btn" id="btnclick" type="button" value="Ouvrir"/>
                    </form>
                    <ul id="sousmenu">
                        <li><a href="#">Sous-menu 1</a></li>
                        <li><a href="#">Sous-menu 2</a></li>
                        <li><a href="#">Sous-menu 3</a></li>
                        <li><a href="#">Sous-menu 4</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
 
        <div id="conteneur">
 
            <div id="block">
 
                <p><h3>Bonjour !</h3>
 
                <p>Réduisez la fenetre à moins de 700px, la petite flèche du menu s'affichera et disparaîtra à nouveau si la fenêtre est plus grande que 700px. Ça c'est ok.</p>
 
                <p class="cadre">Problème n° 1.<br/>
                    Si la fenêtre est plus petite que 700px, la flèche est donc affichée, et qu'on actualise, la flèche disparaît et <strong>il faudrait qu'elle reste affichée et que le menu se referme</strong></p>
 
                <p class="cadre">Problème n° 2.<br/>
                    Si le menu est ouvert, donc la fenêtre plus petite que 700px, et qu'on actualise, la flêche disparaît bien, la div remonte bien, mais tout s'inverse !
                </p>
 
                <p class="cadre">Problème n° 3<br/>
                    Il faudrait, <strong>de toutes manières</strong>, que le menu se referme du moment qu'on a réduit la fenêtre.
                </p>
 
                <p>Bref, je n'arrive pas à gérer la chose sans bug selon la taille de la fenêtre, alors si une bonne âme veut bien m'aider, ça serait sympa.</p>
 
                <p>Par avance, un grand merci et une bonne journée à tous !</p>
 
                <p>Antonio.</p>
 
            </div>
 
        </div>
 
    </body>
</html>

**Antoniom** · 14/03/2014, 06h01

Slt Spartacusply, bonjour tout le monde !

D'abord, merci infiniment pour ta réponse !

Je n'avais pas pensé à ajouter puis supprimer une classe dans la chose

...

Manquait (je suppose que tu as fais exprès

) un addClass et un removeClass dans la fonction size() que tu as fait...

Comme tel, si on agrandissait la fenêtre sans refermer le menu, puis, sans actualiser, on réduisait à nouveau la fenêtre, la flèche restait en position à fermer et tout s'inversait encore.

Je l'ai modifié comme suit et tout marche comme je le souhaite !

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
 
function size() {
 
    var tailleFenetre = $(this).width();
 
    if (tailleFenetre > 700) {
        $("#btnclick").hide();
        $("#sousmenu").hide();
        $("#btnclick").addClass("img-btn-retour");
        $("#btnclick").val("Fermer");
        $("#conteneur").stop().animate({marginTop: 10}, 'fast');
    }
    else {
        $("#btnclick").removeClass("img-btn-retour");
        $("#btnclick").val("Ouvrir");
        $("#btnclick").show();
    }
 
}

Merci encore pour tes lumières et te souhaite une super bonne journée et à tous !

Actualisation de la fenêtre

jQuery

Vue hybride

Discussions similaires

Partager

Partager