Gestion du setTimeout

**zooffy** · 08/08/2012, 09h20

Bonjour à tous.

Le javascript n'est pas mon langage préféré et j'ai un peu de mal à finaliser mon menu.
Mon idée et d'avoir un menu contenu dans un div avec des div imbriqués pour ne pas utiliser de table.
J'ai un autre div qui doit se balader sur la barre de menu en fonction du survol de la souris. Et lorsque la souris n'est plus au dessus de la barre de menu, le div noir doit repartir au début, sur le premier menu.

J'arrive à faire bouger le div noir, mais si je bouge la souris un peu vite ou si je ne le laisse pas finir ses mouvements, il devient un peu "fou". Disons que je ne comprends pas ces arrêts.

Voici mon code actuel au complet. Je pense que je ne comprends pas l'application du clearTimeOut ou alors que j'ai loupé un détail fondamental.

Pouvez vous m'aider ?

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style media="all" type="text/css">
.FondMenu {
    position:relative;top:238px;left:30px;
 
    background-color:Aqua;
    background-repeat:repeat-x;
    background-position:center center;
    height:43px;
    /*padding-left:20px;
    padding-right:20px;*/
    background-image:url('/App_Themes/BlocPerso/Menu_base.png');
    z-index:100;
}
    .imgSlide {
    width:80px;
    height:43px;
}
 
.hlMenu {
    color:White;
    font-family:BigNoodleTitling;
    font-size:22px;
    text-decoration:none;
    margin-left:25px;
    margin-right:25px;
}
.divMenu{
    position:absolute;
    top:0px;
}
.divM1{
    left:0px;
    z-index:151;
}
.divM2{
    left:70px;
    z-index:152;
}
.divM3{
    left:140px;
    z-index:153;
}
.divM4{
    left:210px;
    z-index:154;
}
.divM5{
    left:280px;
    z-index:155;
}
.divM6{
    left:350px;
    z-index:156;
}
.divM7{
    left:420px;
    z-index:157;
}
.divMopen {
    border:solid 1px Red;
    height:200px;
    width:300px;
    display:none;
}    </style>
    <script language="javascript" type="text/javascript">
        var iTimer;
        function ouverturemenu(indexdiv) {
            clearTimeout(iTimer);
            document.getElementById("menu" + indexdiv).style.display = "block";
            switch (indexdiv) {
                case 1:
                    slidefondnoir(0);
                    break;
                case 2:
                    slidefondnoir(75);
                    break;
                case 3:
                    slidefondnoir(145);
                    break;
                case 4:
                    slidefondnoir(215);
                    break;
                case 5:
                    slidefondnoir(285);
                    break;
                case 6:
                    slidefondnoir(355);
                    break;
                case 7:
                    slidefondnoir(425);
                    break;
            }
        }
 
        function slidefondnoir(limite) {
            clearTimeout(iTimer);
            var posX = document.getElementById("imgSlide").offsetLeft;
            if (posX != limite) {
                if (posX > limite) {
                    posX--;
                }
                else {
                    posX++;
                }
                document.getElementById("imgSlide").style.left = posX + "px";
                iTimer = setTimeout(function() {
                    slidefondnoir(limite);
                }, 0);
            }
        }
        function retourfondnoir(indexdiv) {
            clearTimeout(iTimer);
            slidefondnoir(0);
            document.getElementById("menu" + indexdiv).style.display = "none";
        }
    </script>
</head>
<body>
<div id="dmenu" class="FondMenu">
        <div id="imgSlide" style="left:0px; height:43px;width:75px;position:relative;"><img src="App_Themes/BlocPerso/Menu_over.png" alt="" class="imgSlide"/></div>
        <div class="divMenu divM1" onmouseover="ouverturemenu(1);" onmouseout="retourfondnoir(1);">
            <a id="hlAccueil" class="hlMenu">Accueil</a>
            <div id="menu1" class="divMopen" onmouseout="document.getElementById('menu1').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM2" onmouseover="ouverturemenu(2);" onmouseout="retourfondnoir(2);">
            <a id="hlNews" class="hlMenu">News</a>
            <div id="menu2" class="divMopen" onmouseout="document.getElementById('menu2').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM3" onmouseover="ouverturemenu(3);" onmouseout="retourfondnoir(3);">
            <a id="hlDossier" class="hlMenu">Dossiers</a>
            <div id="menu3" class="divMopen" onmouseout="document.getElementById('menu3').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM4" onmouseover="ouverturemenu(4);" onmouseout="retourfondnoir(4);">
            <a id="hlVideo" class="hlMenu">Video</a>
            <div id="menu4" class="divMopen" onmouseout="document.getElementById('menu4').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM5" onmouseover="ouverturemenu(5);" onmouseout="retourfondnoir(5);">
            <a id="hlLives" class="hlMenu">Lives</a>
            <div id="menu5" class="divMopen" onmouseout="document.getElementById('menu5').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM6" onmouseover="ouverturemenu(6);" onmouseout="retourfondnoir(6);">
            <a id="hlForum" class="hlMenu">Forum</a>
            <div id="menu6" class="divMopen" onmouseout="document.getElementById('menu6').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM7" onmouseover="ouverturemenu(7);" onmouseout="retourfondnoir(7);">
            <a id="hlEvent" class="hlMenu">Event</a>
            <div id="menu7" class="divMopen" onmouseout="document.getElementById('menu7').style.display = 'none';">
 
            </div>
        </div>
</div>
</body>
</html>

J'ai fais en sorte de n'utiliser aucune image dans mon exemple pour que vous puissiez directement faire un copier coller de la bête dans une page HTML vide.

**Bovino** · 08/08/2012, 09h27

j'ai loupé un détail fondamental

en effet

Pour pouvoir annuler un timer, il faut préciser duquel il s'agit, c'est-à-dire qu'il faut affecter le setTimeout() à une variable et préciser cette variable dans le clearTimeout().

Code :

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

1
2
var timer = setTimeout(callback, 25);
clearTimeout(timer);

**zooffy** · 08/08/2012, 10h49

Merci pour ton aide.

ça marche un peu mieux, effectivement. Mais ça reste un peu flou lors des changements de menu rapide. Parfois le bloc noir se bloque pas sur le bon menu, comme si la "limite" que j'envoi n'était pas prise en compte.

Et puis le retour sur le menu "accueil" ne se fait pas.
J'ai mis à jour mon code dans le message de base.

**NoSmoking** · 09/08/2012, 11h36

Bonjour,
plusieurs maladresses dans ton code

Et puis le retour sur le menu "accueil" ne se fait pas.

d'un autre côté la fonction callback n'existant pas il peut y avoir des erreurs

Code :

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

var timer = setTimeout(callback, 25); // qu'est callback ???

javascript est inutile d'autant que javascrpt n'existe pas

Code :

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

<div class="divMenu divM1" onmouseover="slidefondnoir(0);" onmouseout="retourfondnoir(1);">

Dans la fonction retourfondnoir(indexdiv), tu ne te sers pas du paramètre indexdiv, quoiqu'il arrive il ne correspond qu'à un décalage donc pas trop saisie à quoi il sert!

Dans la function slidefondnoir(limite), il te faut killer le timer avant toute chose, cela évites les problèmes de "réentrance", il te faut donc avoir une variable globale timer.

Toujours dans la fonction slidefondnoir(limite), il te faut gérer la position avant de relancer la fonction.
Il est plus judicieux de récupérer la position via un offsetLeft que de passer par le style.left

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
var iTimer;
function slidefondnoir(limite){
  clearTimeout(iTimer);
  var posX = document.getElementById("imgSlide").offsetLeft;
  if( posX != limite){
    if( posX > limite){
      posX--;
    }
    else{
      posX++;
    }
    document.getElementById("imgSlide").style.left = posX + "px";
    iTimer = setTimeout( function(){
        slidefondnoir(limite);
      },0);
   }
}

**zooffy** · 10/08/2012, 08h27

Merci pour ton aide.

Je vais intégrer tout cela.
Pour le callback, ça fait partie du code que Bovino m'a proposé et comme 'jai pas vu de parenthèse dérrière j'ai pris ça pour un mot clé du langage.

Le paramettre indexdiv sert pour une autre fonction qui arrivera après.

Pour le reste, je vais bien m'imprégner de la chose pour mieux comprendre.

**zooffy** · 10/08/2012, 09h47

Je viens de finir l'intégration des corrections, c'est parfait.

Merci beaucoup pour ce coup de main magistral.

Bon week-end.

**zooffy** · 10/08/2012, 11h47

Je suis allé un peu vite en besogne.
Au moment de l'intégration dans ma page finale qui est en ASP.NET ça marche plus du tout.

Le bloc noir se barre sur la droite et ne revient jamais et vu l'ascenseur du bas, je vois qu'il part à l'infini.

Je ne comprends pas pourquoi cela fait ça. Je poste le code interprété car je pense qu'un souci doit apparaitre avec les éléments généré par le serveur, mais je n'y comprends rien.

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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
 
</title>
    <style media="all" type="text/css">
    .FondMenu {
    position:relative;top:238px;left:30px;
 
 
    background-repeat:repeat-x;
    background-position:center center;
    height:43px;
    padding-left:20px;
    padding-right:20px;
    background-image:url('/App_Themes/BlocPerso/Menu_base.png');
 
 
    z-index:100;
}
.zFondMenu:hover {
    background-repeat:repeat-x;
    background-position:center center;
    height:43px;
    padding-left:20px;
    padding-right:20px;
    background-image:url('/App_Themes/BlocPerso/Menu_over.png');
}
.hlMenu {
    color:White;
    font-family:BigNoodleTitling;
    font-size:22px;
    text-decoration:none;
 
 
    margin-left:25px;
    margin-right:25px;
 
}
.imgSlide {
    width:70px;
    height:43px;
    /*display:none;
    position:absolute;
    top:0px;
    left:0px;
    z-index:101;*/
}
.divMenu{
    position:absolute;
    top:0px;
}
.divM1{
    left:0px;
    z-index:151;
}
.divM2{
    left:70px;
    z-index:152;
}
.divM3{
    left:140px;
    z-index:153;
}
.divM4{
    left:210px;
    z-index:154;
}
.divM5{
    left:280px;
    z-index:155;
}
.divM6{
    left:350px;
    z-index:156;
}
.divM7{
    left:420px;
    z-index:157;
}
.divMopen {
    border:solid 1px Red;
    height:200px;
    width:300px;
    display:none;
}
</style>
<script language="javascript" type="text/javascript">
    var iTimer;
    function ouverturemenu(indexdiv) {
        clearTimeout(iTimer);
        switch (indexdiv) {
            case 1:
                slidefondnoir(0);
                document.getElementById("menu1").style.display = "block";
                break;
            case 2:
                slidefondnoir(75);
                document.getElementById("menu2").style.display = "block";
                break;
            case 3:
                slidefondnoir(145);
                document.getElementById("menu3").style.display = "block";
                break;
            case 4:
                slidefondnoir(215);
                document.getElementById("menu4").style.display = "block";
                break;
            case 5:
                slidefondnoir(285);
                document.getElementById("menu5").style.display = "block";
                break;
            case 6:
                slidefondnoir(355);
                document.getElementById("menu6").style.display = "block";
                break;
            case 7:
                slidefondnoir(425);
                document.getElementById("menu7").style.display = "block";
                break;
        }
    }
 
    function slidefondnoir(limite) {
        clearTimeout(iTimer);
        var posX = document.getElementById("imgSlide").offsetLeft;
        if (posX != limite) {
            if (posX > limite) {
                posX--;
            }
            else {
                posX++;
            }
            document.getElementById("imgSlide").style.left = posX + "px";
            iTimer = setTimeout(function() {
                slidefondnoir(limite);
            }, 0);
        }
    }
    function retourfondnoir(indexdiv) {
        clearTimeout(iTimer);
        slidefondnoir(0);
        switch (indexdiv) {
            case 1:
                document.getElementById("menu1").style.display = "none";
                break;
            case 2:
                document.getElementById("menu2").style.display = "none";
                break;
            case 3:
                document.getElementById("menu3").style.display = "none";
                break;
            case 4:
                document.getElementById("menu4").style.display = "none";
                break;
            case 5:
                document.getElementById("menu5").style.display = "none";
                break;
            case 6:
                document.getElementById("menu6").style.display = "none";
                break;
            case 7:
                document.getElementById("menu7").style.display = "none";
                break;
        }
    }
    </script>
</head>
<body>
    <form name="form1" method="post" action="testchat.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTIwMjY4NjgzNzcPZBYCAgMPZBYOAgMPDxYCHgRUZXh0BQdBY2N1ZWlsZGQCBQ8PFgIfAAUETmV3c2RkAgcPDxYCHwAFCERvc3NpZXJzZGQCCQ8PFgIfAAUFVmlkZW9kZAILDw8WAh8ABQVMaXZlc2RkAg0PDxYCHwAFBUZvcnVtZGQCDw8PFgIfAAUFRXZlbnRkZGSQXpfNaN71s6YioHFFKchSzRvkSA==" />
</div>
 
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/WebResource.axd?d=6ua72B85K24Z1dhvRfn4Kuk1CVVXn2v6WNdsTNHWH4pfdMkrxrU5_v62HlGCiDnVyelp97CwvKvTupo_pwWz_ymfP141&amp;t=634604460479085897" type="text/javascript"></script>
 
 
<script type="text/javascript">
//<![CDATA[
var __cultureInfo = '{"name":"fr-FR","numberFormat":{"CurrencyDecimalDigits":2,"CurrencyDecimalSeparator":",","IsReadOnly":true,"CurrencyGroupSizes":[3],"NumberGroupSizes":[3],"PercentGroupSizes":[3],"CurrencyGroupSeparator":"*","CurrencySymbol":"€","NaNSymbol":"Non Numérique","CurrencyNegativePattern":8,"NumberNegativePattern":1,"PercentPositivePattern":0,"PercentNegativePattern":0,"NegativeInfinitySymbol":"-Infini","NegativeSign":"-","NumberDecimalDigits":2,"NumberDecimalSeparator":",","NumberGroupSeparator":"*","CurrencyPositivePattern":3,"PositiveInfinitySymbol":"+Infini","PositiveSign":"+","PercentDecimalDigits":2,"PercentDecimalSeparator":",","PercentGroupSeparator":"*","PercentSymbol":"%","PerMilleSymbol":"‰","NativeDigits":["0","1","2","3","4","5","6","7","8","9"],"DigitSubstitution":1},"dateTimeFormat":{"AMDesignator":"","Calendar":{"MinSupportedDateTime":"\/Date(-62135596800000)\/","MaxSupportedDateTime":"\/Date(253402297199999)\/","AlgorithmType":1,"CalendarType":1,"Eras":[1],"TwoDigitYearMax":2029,"IsReadOnly":true},"DateSeparator":"/","FirstDayOfWeek":1,"CalendarWeekRule":0,"FullDateTimePattern":"dddd d MMMM yyyy HH:mm:ss","LongDatePattern":"dddd d MMMM yyyy","LongTimePattern":"HH:mm:ss","MonthDayPattern":"d MMMM","PMDesignator":"","RFC1123Pattern":"ddd, dd MMM yyyy HH\u0027:\u0027mm\u0027:\u0027ss \u0027GMT\u0027","ShortDatePattern":"dd/MM/yyyy","ShortTimePattern":"HH:mm","SortableDateTimePattern":"yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss","TimeSeparator":":","UniversalSortableDateTimePattern":"yyyy\u0027-\u0027MM\u0027-\u0027dd HH\u0027:\u0027mm\u0027:\u0027ss\u0027Z\u0027","YearMonthPattern":"MMMM yyyy","AbbreviatedDayNames":["dim.","lun.","mar.","mer.","jeu.","ven.","sam."],"ShortestDayNames":["di","lu","ma","me","je","ve","sa"],"DayNames":["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"],"AbbreviatedMonthNames":["janv.","févr.","mars","avr.","mai","juin","juil.","août","sept.","oct.","nov.","déc.",""],"MonthNames":["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre",""],"IsReadOnly":true,"NativeCalendarName":"calendrier grégorien","AbbreviatedMonthGenitiveNames":["janv.","févr.","mars","avr.","mai","juin","juil.","août","sept.","oct.","nov.","déc.",""],"MonthGenitiveNames":["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre",""]}}';//]]>
</script>
 
<script src="/ScriptResource.axd?d=igpxY3YwsBCbx0qaEQoUqWp2hjaOIEfGM77K-4GEtUpeVZTy5cxQxRH4oCR7Ne4Xfc_rZe2xVq8TgzQKOJdv3YO2OZnJWFUgiFDEoTlNiNoeY2J-2t_KrYiw3IF4MXkyi3NT_VltUmc08_rIUXhoHgpqoVi70iCSw6xZMVJGSyGvRwlE0&amp;t=ffffffffb868b5f4" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Échec du chargement de l\u0027infrastructure ASP.NET Ajax côté client.');
//]]>
</script>
 
<script src="/ScriptResource.axd?d=Q338t2Z1BRnTijWFLbaHY_CYUtwjiCKPtPJ9Z9M2s3qvwap3kdJn3L6Y1tlwLdIvuRF_GYeyn0-t8CkXfXtRtCVKo9QDDdZijJs3cFe09fUm4BFkYzwEUN4ZXXI5LLgOXNNmeWVGARo5YtkHg5jHmynilu3XsOY6oQCXwUp3yLqsAFwE0&amp;t=ffffffffb868b5f4" type="text/javascript"></script>
    <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('SM$smGene', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
 
    <script type="text/javascript" src="/scripts/global.js"></script>
	<script type="text/javascript" src="/scripts/Silverlight.js"></script>
    <div id="DivUpdate" class="divProgress">
    Patientez ...
    <img id="SM_imgWait2" src="App_Themes/wait.gif" style="border-width:0px;" />
    </div>
    <div id="dmenu" class="FondMenu">
        <div id="imgSlide" style="left:0px; height:43px;width:75px;position:relative;"><img src="App_Themes/BlocPerso/Menu_over.png" alt="" class="imgSlide"/></div>
        <div class="divMenu divM1" onmouseover="ouverturemenu(1);" onmouseout="retourfondnoir(1);">
            <a id="hlAccueil" class="hlMenu">Accueil</a>
            <div id="menu1" class="divMopen" onmouseout="document.getElementById('menu1').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM2" onmouseover="ouverturemenu(2);" onmouseout="retourfondnoir(2);">
            <a id="hlNews" class="hlMenu">News</a>
            <div id="menu2" class="divMopen" onmouseout="document.getElementById('menu2').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM3" onmouseover="ouverturemenu(3);" onmouseout="retourfondnoir(3);">
            <a id="hlDossier" class="hlMenu">Dossiers</a>
            <div id="menu3" class="divMopen" onmouseout="document.getElementById('menu3').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM4" onmouseover="ouverturemenu(4);" onmouseout="retourfondnoir(4);">
            <a id="hlVideo" class="hlMenu">Video</a>
            <div id="menu4" class="divMopen" onmouseout="document.getElementById('menu4').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM5" onmouseover="ouverturemenu(5);" onmouseout="retourfondnoir(5);">
            <a id="hlLives" class="hlMenu">Lives</a>
            <div id="menu5" class="divMopen" onmouseout="document.getElementById('menu5').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM6" onmouseover="ouverturemenu(6);" onmouseout="retourfondnoir(6);">
            <a id="hlForum" class="hlMenu">Forum</a>
            <div id="menu6" class="divMopen" onmouseout="document.getElementById('menu6').style.display = 'none';">
 
            </div>
        </div>
        <div class="divMenu divM7" onmouseover="ouverturemenu(7);" onmouseout="retourfondnoir(7);">
            <a id="hlEvent" class="hlMenu">Event</a>
            <div id="menu7" class="divMopen" onmouseout="document.getElementById('menu7').style.display = 'none';">
 
            </div>
        </div>
 
 
</div>
 
 
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
</form>
</body>
</html>

**NoSmoking** · 10/08/2012, 13h13

faut être vicieux

Code :

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

<div id="imgSlide" style="left:0px; height:43px;width:75px;position:relative;">

pourquoi position:relative ????

Concernant le code j'ai comme l'impression que tout cela est factorisable!
exemple

Code :

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

document.getElementById("menu1").style.display = "block";

n'est rien d'autre que

Code :

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

document.getElementById("menu" +indexdiv).style.display = "block";

**zooffy** · 10/08/2012, 13h53

Alors le position:relative je l'ai mis pour le positionnement du truc dans la globalité de la page. Est ce vraiment dérangeant ?

La factorisation, je l'ai faite, c'est bon, ça marche mais ça ne règle pas le problème. ça va juste m'éviter des lignes de code, c'est super cool, j'y avais pas pensé, merci beucaoup.

Par contre en jouant à supprimer des lignes et en remettre pour isoler le problème j'ai découvert un truc bizarre. Dans ma CssClass que voici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.FondMenu {
    position:relative;top:238px;left:30px;
 
    background-color:Aqua;
    background-repeat:repeat-x;
    background-position:center center;
    height:43px;
    /*padding-left:20px;
    padding-right:20px;*/
    background-image:url('/App_Themes/BlocPerso/Menu_base.png');
    z-index:100;
}

J'ai viré les padding (comme on peut le voir avec les marques de commentaire et là, ça marche, le bloc noir ne se barre plus et tout marche impec.
Par contre, je ne comprends pas du tout pourquoi ces padding le font devenir fou. Et j'ai fais des essais dans IE et dans Chrome pour écarter une incompatibilité de navigateur et ça fait pareil dans le deux.

Si tu vois d'où ça peut venir, je suis preneur de l'explication et de l'éventuelle solution car (je n'ai pas encore réintégré) je pense que dans le montage global de ma page, j'en ai besoins.

Merci pour tout, c'est un plaisir de travailler avec toi.

**NoSmoking** · 10/08/2012, 15h26

Un élément que l'on déplace sur une page doit être hors flux, donc en position:absolute, c'est plus propre.

Pour ton code il serait quand même préférable que tu récupéres les positions de tes éléments plutôt que de tout mettre en dur et cela facilite le codage. De plus tu pourras avoir une feuille de style beaucoup plus "light" en plaçant les DIVs bout à bout.

Dans ta fonction ouverturemenu, il te suffit de passer en paramètre l'objet qui vient d'être survolé, avec le mot clé this par exemple, et de récupérer sa position.

Code :

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

1
2
3
function ouverturemenu( obj, indexdiv){
  var position_a_atteindre = obj.offsetLeft;
}

avec un appel à la fonction

Code html :

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

<div class="divMenu divM1" onmouseover="ouverturemenu( this,1);" onmouseout="retourfondnoir(1);">

sachant que tu peux te passer du 2éme paramètres facilement, mais bon.

Il y a d'autre axe d'amélioration mais c'est une autre histoire.

**zooffy** · 10/08/2012, 15h58

Merci pour tous ses conseils, je vais les intégrer. C'est super gentil.

Mais reste le souci des padding, que je ne comprends toujours pas.

Et un autre truc qui vient d'apparaitre et là, je suis sur mon céans : sur FireFox le déplacement est trois fois plus lent que les deux autres navigateurs.

Et vu que le délai du setTimeout est à 0, je vois pas comment l'accèréler.....

**NoSmoking** · 10/08/2012, 16h23

Mais reste le souci des padding, que je ne comprends toujours pas.

pas regardé ce soucis

Et un autre truc qui vient d'apparaitre et là, je suis sur mon céans : sur FireFox le déplacement est trois fois plus lent que les deux autres navigateurs.

il ne faut pas ce leurrer le delay = 0; ne veut pas dire grand chose, cela laisse simplement au moteur de rendu le temps de reprendre la main. Fait des essais en mettant plutôt 10, certains navigateurs sont plus rapide que d'autre dans le "redrawing".

Pour accélérer réellement le mouvement il te faudrait passer par un pas d'incrémentation, MAIS ATTENTION ta méthode de vérification aux bornes ne convient plus dans ce cas.

**zooffy** · 10/08/2012, 18h55

J'ai mis le délai à 1 et ça équilibre les vitesses entre les navigateurs. C'est un poil lent, mais ça fait pas trop mal.

Et puis je regarde comment je peux virer les DIV qui encadre le sous menu et le lien parce que je m'aperçois que le calage des menus doit se faire en ligne horizontale et se tasser avec un peu de padding pour faire respirer.
Reste à voir si cela ne va pas poser de souci supplémentaire ces padding.

Je posterais mon code final en début de message pour la postérité.

Merci et bon week-end.

**NoSmoking** · 10/08/2012, 19h25

Je te fournis une "optimisation" rapide de tes fonctions

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
var iTimer, oSlide=null;
function ouverturemenu( obj, indexdiv){
  var posX = obj.offsetLeft;
  var oMenu = document.getElementById('menu' +indexdiv);
  posX = (posX >>1)*2;  // position paire
  if( oMenu){
    oMenu.style.display = 'block';
    slidefondnoir( posX);
  }
}
function slidefondnoir(limite) {
  clearTimeout(iTimer);
  oSlide = oSlide || document.getElementById('imgSlide');
  var posX = oSlide.offsetLeft;
  if( posX != limite) {
    if (posX > limite) {
      posX -=2;
    }
    else {
      posX +=2;
    }
    oSlide.style.left = posX +'px';
    iTimer = setTimeout(function() {
        slidefondnoir(limite);
      }, 10);
  }
}
function retourfondnoir(indexdiv) {
  var oMenu = document.getElementById('menu' +indexdiv);
  if( oMenu){
    oMenu.style.display = 'none';
    slidefondnoir( 0);
  }
}

dans la fonction slidefondnoir(), le pas est de 2, la position étant rendue paire dans la fonction ouverturemenu().

Il y a encore matière à faire, alors bon jeu...

**zooffy** · 11/08/2012, 08h14

Merci beaucoup, c'est très gentil.
Je vais implémenter cela.

Bon week-end.

Gestion du setTimeout

JavaScript

Discussions similaires

Partager

Partager