Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre actif
    Mettre une div au-dessus de tout le reste
    Bonjour à tous.

    Je voudrai qu'un DIV s'affiche totalement au-dessus de tout le reste.
    Pour le moment, j'ai presque le fonctionnement voulu, mais la DIV s'affiche en haut de la page et fait descendre le reste.
    Le but est qu'elle se mettre au dessus de tout le reste et que je joue ensuite avec la transparence.
    Merci d'avance pour votre aide.

    Code html :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
    284
     
    <BODY onLoad=Window_onload();>
    	<DIV id="DIV_PATIENCE" class="alert alert-warning text-center Zindex" style="color:black;font-size:32px">
    		<BR/>
    		  <I id="mess01" class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:black;font-size:22px"></I>
    	  .......Veuillez patienter pendant le chargement de la page.......
    		  <I class="fa fa-spinner fa-pulse fa-3x fa-fw" style="color:black;font-size:22px"></I>
    		<BR/>
    		<div class="row">
    			<div class="col-md-2">
    			</div>
    			<div class="col-md-8">
    				<div id="DIV_MESS2" class="">
    					<DIV class="center alert alert-danger CentrageVertical Border HauteurMess2">
    						<br/>
    						<B><LABEL id="Lab_Patience"></LABEL></B>
    						<B><LABEL>Nombre de valeurs restant à traiter : </LABEL></B>
    						<B><LABEL id="Lab_Reste"></LABEL></B>
    					</DIV>
    				</div>
    			</div>
    			<div class="col-md-2">
    			</div>
    		</div>
    		&nbsp;
    	</DIV>
    	<DIV id="main">
    		<DIV id="div_titre" class="titre-page">- CONTROLES BDD MULTIVAC SG (GENERALE) -<BR/>
    		  <I class="fas fa-ambulance fa-1x" style="color:black"></I>
    			<SPAN id="DIV_VERSION"></SPAN>
    		  <I class="fas fa-database fa-1x" style="color:black"></I>
    		</DIV>
    		<BR/>
    		<DIV class="">
    			<DIV id="div_soustitre1"></DIV>
    			<BR/>
    			<DIV id="div_info1"></DIV>
    			<BR/>
    		</DIV>
    		<DIV id="DIV_ZS" class="col-md-12">(Zone de sélection)
    			<DIV class="alert alert-primary-bootstrap" id="DivSelection">
    				<DIV class="">
    					<BR/>
    					<DIV class="alert alert-info">
    						<SPAN class="">
    							<LABEL><B>Date début : </B></LABEL>
    							<INPUT class="" name="date_deb" id="date_deb" type="text";></INPUT>
    						</SPAN>
    						<SPAN class="" style="position:absolute;right:25px">
    							<LABEL><B>(Date fin : </B></LABEL>
    							<INPUT class="" name="date_fin" id="date_fin" type="text" disabled title="Saisie désactivée pour le moment..."></INPUT>
    							<LABEL><B> - Saisie désactivée pour le moment...)</B></LABEL>
    						</SPAN>
    					</DIV>
    					<div class="row">
    						<div class="col-md-5">
    							<DIV class="alert alert-info ModifHauteur">
    									<LABEL><B>Présélection :</B></LABEL>
    									<SELECT class="" id="filtre" onChange="OnChangeBlur_MajListeFic()" onFocus="Init()">
    										<OPTION value=""></OPTION>
    										<OPTION value="FILTRE_CDG">LFPG / CDG / PG</OPTION>
    										<OPTION value="FILTRE_ORY">LFPO / ORY / PO</OPTION>
    										<OPTION value="FILTRE_LBG">LFPB / LBG / PB</OPTION>
    										<OPTION value="FILTRE_CRNA">CRNA</OPTION>
    										<OPTION value="FILTRE_AUT">AUTRES</OPTION>
    									</SELECT>
    							</DIV>
    						</div>
    						<div class="col-md-2 alert alert-success center">
    							<label><b>OU</b></label>
    						</div>
    						<div class="col-md-5">
    							<DIV class="alert alert-info">
    								<LABEL><B>Recherche :</B></LABEL>
    								<INPUT class="" name="recherche" id="recherche" onBlur="OnChangeBlur_MajListeFic()"  onFocus="Init()"></INPUT>
    							</DIV>
    						</div>
    					</div>
    					<DIV class="row">
    						<DIV class="col-md-10">
    							<DIV class="alert alert-info">
    								<LABEL><B>Liste des Fichiers (29 + '###' + 89) - </B></LABEL> <LABEL id="nb_val_fic"> ()</LABEL> :<BR/>
    <!--							<SELECT class="" id="Liste_Proc" onChange="OnChange_Liste_Proc()">
    								</SELECT>
    -->
    								<SELECT class="" id="Liste_Proc" OnChange="TestPriorite()">
    								</SELECT>
    							</DIV>
    						</DIV>
    						<DIV class="col-md-2">
    							<DIV class="alert alert-info" title="Actif uniquement si on sélectionne ' TOUT ' dans la liste des fichiers à gauche.">
    								<LABEL><B>Priorité (105) : </B></LABEL><BR/>
    								<SELECT class="" id="Liste_Priorite" disabled title="Actif uniquement si on sélectionne ' TOUT ' dans la liste des fichiers à gauche.">
    									<OPTION value="*" selected="selected">*</OPTION>
    									<OPTION value="1">1</OPTION>
    									<OPTION value="2">2</OPTION>
    									<OPTION value="3">3</OPTION>
    									<OPTION value="4">4</OPTION>
    									<OPTION value="5">5</OPTION>
    									<OPTION value="6">6</OPTION>
    									<OPTION value="7">7</OPTION>
    									<OPTION value="8">8</OPTION>
    									<OPTION value="9">9</OPTION>
    									<OPTION value="10">10</OPTION>
    								</SELECT>
    							</DIV>
    						</DIV>
    					</DIV>
    					<div class="row center">
    						<div class="col-md-3">
    						</div>
    						<div class="col-md-6 center">
    							<button type="button" class="btn btn-outline-dark btn-lg btn-block" title="Lance la recherche..." onClick="OnClick_Liste_Proc()">GO</button>
    						</div>
    						<div class="col-md-3">
    						</div>
    					</div>
    				</DIV>
    				<br/>
    				<DIV class="col-md-12"><CENTER><I class="fa fa-arrow-down fa-5x" style="color:white"></I></CENTER></DIV>
    				<DIV class="">&nbsp;</DIV> <!-- Saut de ligne -->
    				<DIV class="col-md-12">
    					<DIV id="DIV_ZI_1" class="TexteBlanc">(Zone de résultats intermédiaires 1)
    						<DIV class="alert alert-warning"> 
    							<LABEL><B>Priorité (105) :</B></LABEL>
    							<LABEL class="" NAME="priorite" id="priorite"></LABEL>
    							<BR/>
    							<LABEL><B>Nom Fichier (29) :</B></LABEL>
    							<LABEL class="" NAME="nom_fic" id="nom_fic"></LABEL>
    							<BR/>
    							<LABEL><B>Sujet Email (89) :</B></LABEL>
    							<LABEL class="" NAME="sujet_email" id="sujet_email"></LABEL>
    							<BR/>
    							<LABEL><B>Message Email (90) :</B></LABEL>
    							<LABEL class="" NAME="msg_email" id="msg_email"></LABEL>
    							<BR/>
    							<LABEL><B>Catégorie (28) :</B></LABEL>
    							<!-- Retire la classe "wrapping" si les retours à la ligne te plaisent pas -->
    							<LABEL class="wrapping" NAME="categorie" id="categorie"></LABEL>
    							<BR/>
    							<LABEL><B>Type Fichier (30) :</B></LABEL>
    							<LABEL class="" NAME="type_fic" id="type_fic"></LABEL>
    							<BR/>
    							<LABEL><B>Dossier Stockage (98) :</B></LABEL>
    							<LABEL class="wrapping" NAME="dossier_stockage" id="dossier_stockage"></LABEL>
    							<LABEL> -> (PM_LIB_PARAMETRES) </LABEL>
    							<I><LABEL class="wrapping" NAME="ds_clair" id="ds_clair"></LABEL></I>
    							<BR/>
    							<LABEL><B>MacroVB (94) :</B></LABEL>
    							<LABEL class="" NAME="macrovb" id="macrovb"></LABEL>
    							<BR/>
    							<LABEL><B>Nota (116) :</B></LABEL>
    							<BR/>
    							<!-- Retire la classe "wrapping" si les retours à la ligne te plaisent pas -->
    							<LABEL class="wrapping" NAME="nota" id="nota"></LABEL>
    							<DIV class=""><HR align="center" width="50%" color="midnightblue" size="3"> </DIV> <!-- Saut de ligne -->
    							<BR/>
    							<LABEL><B>Nom Fichier recomposé avec Catégorie :</B></LABEL>
    							<LABEL class="" NAME="nom_fic_categ" id="nom_fic_categ"></LABEL>
    						</DIV>
    					</DIV>
    				</DIV>
    				<DIV class="col-md-12">
    					<DIV id="DIV_ZI_2" class="TexteBlanc">(Zone de résultats intermédiaires 2)
    						<DIV class="alert alert-success"> 
    							<LABEL id="label_v"><B>Vérification du fichier (Les dates et n° semaine sont calculées par rapport à la date début sélectionnée) (29) : </B></LABEL>
    							<BR/>
    							<LABEL id="label_verif"></LABEL>
    							<LABEL> -> </LABEL>
    							<I><LABEL class="" NAME="verif" id="verif"></LABEL></I>
    						</DIV>
    					</DIV>
    				</DIV>
    				<DIV class="col-md-12">
    					<DIV id="DIV_ZI_21" class="TexteBlanc">(Zone de résultats intermédiaires 2.1)
    						<DIV class="alert alert-success"> 
    							<DIV NAME="result_inter_1" id="result_inter_1" class="">
    								<TABLE id="table_result_inter_1" class="table table-statSAI">
    									<THEAD>
    										<TR>
    											<TH class="CentrageVerticalForce">P.</TH>
    											<TH class="CentrageVerticalForce">Fichier</TH>
    											<TH class="CentrageVerticalForce">MacroVB</TH>
    											<TH class="CentrageVerticalForce" title="Ouvre le fichier col 1 ou exécute la macro col 3">Ouv. / Exe.</TH>
    										</TR>
    									</THEAD>
    									<TBODY id="result_inter_1_Rows">
    									</TBODY>
    								</TABLE>
    							</DIV>
    						</DIV>
    					</DIV>
    				</DIV>
    			</DIV>		
    		</DIV>		
    		<DIV class="col-md-12"><CENTER><I class="fa fa-arrow-down fa-5x" style="color:white"></I></CENTER></DIV>
    		<DIV class="col-md-12">(Zone de résultats 1)
    			<DIV class="alert alert-info">
    				<LABEL id="label_dependances"><B>Liste des dépendances :</B></LABEL>
    				<BR/>
    				<LABEL>(Vérification de l'existance des fichiers 'nom complet' => passage de la ligne en fond rouge ou vert)</LABEL>
    				<LABEL>(Sélection d'une ligne => affichage des dépendances (META_DEPENDANCE_FICHIER_SRC_n) dans la table en dessous.</LABEL>
    				<DIV NAME="depend" id="depend">
    					<TABLE id="table_depend" class="table table-statSAI">
    						<THEAD>
    							<TR>
    								<TH id="DLTHC01" class="CentrageVerticalForce" title="Numéro du champs source concerné : META_FICHIER_SRC_n -> META_DEPENDANCE_FICHIER_SRC_n"></TH>
    								<TH id="DLTHC02" class="CentrageVerticalForce" title="Priorité">P.</TH>
    								<TH id="DLTHC03" class="CentrageVerticalForce">Fichier (29)</TH>
    								<TH id="DLTHC04" class="CentrageVerticalForce">Date</TH>
    								<TH id="DLTHC05" class="CentrageVerticalForce">Nom Complet (Avec dossier + date + catégorie)</TH>
    								<TH id="DLTHC06" class="CentrageVerticalForce">Ouv.</TH>
    							</TR>
    						</THEAD>
    						<TBODY id="dependRows">
    						</TBODY>
    					</TABLE>
    				</DIV>
    			</DIV>
    		</DIV>
    		<DIV class="col-md-12"><CENTER><I class="fa fa-arrow-down fa-5x" style="color:white"></I></CENTER></DIV>
    		<DIV class="col-md-12">(Zone de résultats 2)
    			<DIV class="alert alert-info">
    				<LABEL id="label_caracteristiques"><B>Cractaéristiques -> META_DEPENDANCE_FICHIER_SRC_n pour </B></LABEL><I><LABEL id="label_caract"></LABEL></I>
    				<BR/>
    				<LABEL>(Sélection d'une ligne => relance du traitement après validation)</LABEL>
    				<DIV NAME="caract" id="caract">
    					<TABLE id="table_caract" class="table table-statSAI">
    						<THEAD>
    							<TR>
    								<TH class="Table_Caract_Col1 CentrageVerticalForce" title="Priorité">P.</TH>
    								<TH class="CentrageVerticalForce">Périodicité</TH>
    								<TH class="CentrageVerticalForce">Type</TH>
    								<TH class="CentrageVerticalForce">Lang.</TH>
    								<TH class="CentrageVerticalForce">Module</TH>
    								<TH class="Table_Caract_Col6 CentrageVerticalForce">Catégorie</TH>
    							</TR>
    						</THEAD>
    						<TBODY id="caractRows">
    						</TBODY>
    					</TABLE>
    				</DIV>
    			</DIV>
    		</DIV>
    		<DIV class="col-md-12"><HR align="center" width="50%" color="midnightblue" size="3"> </DIV> <!-- Saut de ligne -->
     
    		<DIV class="col-md-12">(La suite, si besoin...)
    			<DIV class="alert alert-secondary"> 
    			</DIV>
    		</DIV>
    		<DIV class="">
    			<DIV id="div_soustitre2"></DIV>
    			<DIV id="div_info2"></DIV>
    		</DIV>
    		<BR/>
    	</DIV>
    <!-- les <BR/> permettent de faire descendre la grosse ligne blanche-->
        <FOOTER class="footer">
    		<DIV class="">
    			<DIV id="div_info_fotter">...</DIV>
    		</DIV>
        </FOOTER>
     
    	<SCRIPT type="text/javascript">
                    function Window_onload() {
                            let WUrl = window.location.pathname;
                            let WDevel = "(Impossible de détecter DEVEL dans l'url)";
     
                            if (WUrl.indexOf("DEVEL") == -1)
                            {
                                    WDevel = "";
                            }
                            else
                            {
                                    WDevel = " (DEVEL)";
                            }
                            
                            document.getElementById('DIV_VERSION').innerHTML = " " + G_VERSION + WDevel + " ";
                            ControlesBdd_Multivac_SG();
    //                      document.getElementById("DIV_PATIENCE").style.display = "none";
                            AffPatience("OFF", "NON", 0, 0, 0, 0, "default")
    }
            </SCRIPT>					
    </BODY>


    Code css :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
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
     
    /*------------------------------------------------------------------------------------------------------------------------------*/
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
     
    body {
    	color:#fff; /* Couleur du text de la page */
    	background-color: #88ABD9;
    	font-family: arial;
    	font-size: 12px;
    /*	font-weight: 400;*/
    	text-rendering: optimizeLegibility;
    }
     
    .Zindex {
    	position:relative;
    	z-index: 99;
    }
     
    .CentrageVertical { /* Permet de centrer un élément verticlament dans la page */
      margin-top: 250px; /* au lieu de '50vh' poussé de la moitié de hauteur de viewport */
      transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
    }
     
    .Border {
    	border: medium solid #6D071A;
    }
     
    .HauteurMess2 {
    	height: 250px;
    }
     
    .PointeurWait {
    	cursor: wait;
    }
     
    .PointeurDefault {
    	cursor: default;
    }
     
    .LargeurBouton250 {
    	width: 250px;
    }
     
    .ModifHauteur {
    	height: 49px !important;
    }
     
    .TaillePolice {
    	font-size : 17px;
    }
     
    .AlignVertical {
    /*	vertical-align: middle;*/
    	position: relative;
    	margin: auto;
    }
     
    .center {
    	text-align: center;
    }
     
    .alert-primary-bootstrap {
      color: #004085;
      background-color: #346FAD;
      border-color: #346FAD;
    }
     
    .Opacity033 {
    	opacity: 0.33;
    }
     
    .FondRouge {
      background-color: red !important;
      color: white;
    }
     
    .FondVert {
      background-color: green !important;
      color: white;
    }
     
    .FondNoir {
      background-color: black !important;
      color: white;
    }
     
    .FondGris {
    	background-color: grey !important;
    	color: white;
    }
     
    .FondBleu {
      background-color: blue !important;
      color: white;
    }
     
    .FondBordeau {
      background-color: brown !important;
      color: white;
    }
     
    .FondViolet {
      background-color: purple !important;
      color: white;
    }
     
    .TexteBlanc {
    	color:white;
    }
     
    .TexteNoir {
    	color:black;
    }
     
    .TexteRouge {
    	color:red;
    }
     
    .Table_Largeur_Col1 {
    	width: 10px;
    }
    .Table_Largeur_Col2 {
    	width: 10px;
    }
    .Table_Largeur_Col3 {
    	width: 400px;
    }
    .Table_Largeur_Col4 {
    	width: 30px;
    }
    .Table_Largeur_Col5 {
    	width: 500px;
    }
    .Table_Largeur_Col6 {
    	width: 20px;
    }
     
    .Table_Caract_Col6 {
    	width: 50%;
    }
     
    div.table-title {
    	display: block;
    	margin: auto;
    	max-width: 600px;
    	padding:5px;
    	width: 100%;
    }
     
    div.div_info {
    	display: block;
    	margin: auto;
    	max-width: 100%;
    	padding:15px;
    	width: 100%;
    }
     
    .BlancSurFondBleuFonce {
    	color: white;
    	background-color: #0062cc;
    }
    .NoirSurBlanc {
    	color: #000;
    	background-color: #fff;
    }
    .BlancSurNoir {
    	color: #fff;
    	background-color: #000;
    }
     
    .table-title h3 {
       color: #fafafa;
       font-size: 20px;
       font-weight: 400;
       font-style:normal;
       font-family: "Roboto", helvetica, arial, sans-serif;
       text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
       text-transform:uppercase;
    }
     
    th.THcursorpointer {
    	cursor: pointer;
    	background-color: #346FAD;
    	color: #ffffff;
    	text-align: center;
    	padding:10px;
    }
     
    /*** Table Styles **/
    th.table-ControlesBdd
    {
    	font-family: "Roboto", helvetica, arial, sans-serif;
    	font-size: 17px;
    /*	font-weight: normal;*/
    	background-color: #346FAD;
    	color: #ffffff;
    	text-align: center;
    }
     
    th.LargeurCol:first-child {
      width: 35%;
    }
     
    .table-Data-Source {
      background: white;
      border-radius:3px;
      border-collapse: collapse;
      border-bottom:3px solid #343a45;
      border-right: 3px solid #343a45;
      border-top:3px solid #343a45;
      border-left: 3px solid #343a45;
      height: 320px;
      margin: auto;
    /*  max-width: 600px; */
    /*  padding:5px;*/
      width: 95%;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      animation: float 5s infinite;
       font-style:normal;
    /*   font-family: "Roboto", helvetica, arial, sans-serif;*/
       text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
       text-transform:uppercase;
    }
     
    th {
      color:#D5DDE5;
      background:#1b1e24;
      border-bottom:4px solid #9ea7af;
      border-right: 1px solid #343a45;
    /*  font-size:17px;*/
    /*  font-weight: 400;*/
    	padding-top:5px;
    	padding-bottom:5px;
     
      text-align:left;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      vertical-align:middle;
    }
     
    th:first-child {
      border-top-left-radius:3px;
    }
     
    th:last-child {
      border-top-right-radius:3px;
      border-right:none;
    }
     
    tr {
      border-top: 1px solid #C1C3D1;
      border-bottom-: 1px solid #C1C3D1;
      color:#666B85;
    /*  font-size:15px;*/
    /*  font-weight:normal;*/
      text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
    }
     
    tr.table-Data-Source-hover:hover td {
      background:#4E5066;
      color:#FFFFFF;
      border-top: 1px solid #22262e;
    }
     
    tr:first-child {
      border-top:none;
    }
     
    tr:last-child {
      border-bottom:none;
    }
     
    tr.table-Data-Source-hover:nth-child(odd):hover td {
      background:#4E5066;
    }
     
    tr:nth-child(odd) td {
      background:#EBEBEB;
    }
     
     
     
    tr:last-child td:first-child {
      border-bottom-left-radius:3px;
    }
     
    tr:last-child td:last-child {
      border-bottom-right-radius:3px;
    }
     
    table.table-statSAI tr td
    {
    	font-family: arial;
    	font-size: 12px;
    }
     
    table.table-statSAI tr:hover td
    {
    	cursor: pointer;
    	background-color: #767676;
    	color: white;
    }
     
     
    .CentrageVerticalForce {
      vertical-align:middle !important;
    }
     
    /* th */
    /* { */
    	/* vertical-align:middle !important; */
    /* } */
     
    /*td:first-child {
    	width:150px;
    }
    */
    td:last-child {
      border-right: 0px;
    }
     
    th.text-left {
      text-align: left;
    }
     
    th.text-center {
      text-align: center;
    }
     
    th.text-right {
      text-align: right;
    }
     
    td.text-left {
      text-align: left;
    }
     
    td.text-center {
      text-align: center;
    }
     
    td.text-right {
      text-align: right;
    }
     
    td.text-bold {
    	font-weight: bold;
    }
     
    td.cursorpointer {
    	cursor: pointer;
    }
     
    label
    {
    	margin-bottom: 0rem !important;
    }
     
    .wrapping
    {
    	display: inline-block;
    	max-width: 100%;
    	overflow-wrap: break-word;
    	word-wrap: break-word;
    	word-break: break-all;
    	word-break: break-word;
    	hyphens: auto;
    	line-break: strict;
    	white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
        white-space: pre-wrap;      /* current browsers */
    	text-align: left;
    }


    Code javascript :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
     
    Le code qui affiche ou non la div en question : 
     
    let G_WIDTH_DIV_PATIENCE = document.getElementById("DIV_ZS").offsetWidth;
    let G_HEIGHT_DIV_PATIENCE = screen.height - 310;
    let G_TOP_DIV_PATIENCE = -50;
    let G_LEFT_DIV_PATIENCE = 10;
     
    		AffPatience("ON", "OUI", G_TOP_DIV_PATIENCE, G_LEFT_DIV_PATIENCE, G_WIDTH_DIV_PATIENCE, G_HEIGHT_DIV_PATIENCE, "default");
    ...
    ...
    ...
     
     
    function AffPatience(P_OnOff, P_Mess2, P_X, P_Y, P_Width, P_Height, P_Cursor) {
    	window.top.window.scrollTo(0,0); // Permet de remonter en haut de l'écran
     
    	P_Width = P_Width + "px";
    	P_Height = P_Height + "px";
    	P_X = P_X + "px";
    	P_Y = P_Y + "px";
     
    	if (P_OnOff == "ON")
    	{
    		document.getElementById("DIV_PATIENCE").style.display = "block";
    	}
    	if (P_OnOff == "OFF")
    	{
    		document.getElementById("DIV_PATIENCE").style.display = "none";
    	}


    PS : je sais que certaines balises sont en majuscules, mais c'est " historique " ; je ne le fais plus
    Zeb'...

  2. #2
    Modérateur

    Bonjour,
    le classique reste classique :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="load-info">
      <!-- du code -->
    </div>
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .load-info {
      z-index: 1000;     /* c'est souvent suffisant */
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(255,255,255,.5);
    }

  3. #3
    Membre actif
    Bon, ben je dois merdouiller quelque part, car ça ne fonctionne pas : la DIV se met en haut de la page, mais s'insert toujours au-dessus mais pas par dessus.

    Voila ce que j'ai fait :
    Code html :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
    	<DIV id="DIV_PATIENCE" class="alert alert-warning text-center load-info" style="color:black;font-size:32px">
    		<BR/>
    		  <I id="mess01" class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:black;font-size:22px"></I>
    	  .......Veuillez patienter pendant le chargement de la page.......
    		  <I class="fa fa-spinner fa-pulse fa-3x fa-fw" style="color:black;font-size:22px"></I>
    		<BR/>
    		<div class="row">
    			<div class="col-md-2">
    			</div>
    			<div class="col-md-8">
    				<div id="DIV_MESS2" class="">
    					<DIV class="center alert alert-danger CentrageVertical Border HauteurMess2">
    						<br/>
    						<B><LABEL id="Lab_Patience"></LABEL></B>
    						<B><LABEL>Nombre de valeurs restant à traiter : </LABEL></B>
    						<B><LABEL id="Lab_Reste"></LABEL></B>
    					</DIV>
    				</div>
    			</div>
    			<div class="col-md-2">
    			</div>
    		</div>
    		&nbsp;
    	</DIV>
    	<DIV id="main">
    		<DIV id="div_titre" class="titre-page">- CONTROLES BDD MULTIVAC SG (GENERALE) -<BR/>
    		  <I class="fas fa-ambulance fa-1x" style="color:black"></I>
    			<SPAN id="DIV_VERSION"></SPAN>
    		  <I class="fas fa-database fa-1x" style="color:black"></I>
    		</DIV>
    		<BR/>
    		<DIV class="">
    			<DIV id="div_soustitre1"></DIV>
    			<BR/>
    			<DIV id="div_info1"></DIV>
    			<BR/>
    		</DIV>
    		<DIV id="DIV_ZS" class="col-md-12">(Zone de sélection)
    			<DIV class="alert alert-primary-bootstrap" id="DivSelection">
    				<DIV class="">
    					<BR/>
    					<DIV class="alert alert-info">
    						<SPAN class="">
    							<LABEL><B>Date début : </B></LABEL>
    							<INPUT class="" name="date_deb" id="date_deb" type="text";></INPUT>
    						</SPAN>
    						<SPAN class="" style="position:absolute;right:25px">
    							<LABEL><B>(Date fin : </B></LABEL>
    							<INPUT class="" name="date_fin" id="date_fin" type="text" disabled title="Saisie désactivée pour le moment..."></INPUT>
    							<LABEL><B> - Saisie désactivée pour le moment...)</B></LABEL>
    						</SPAN>
    					</DIV>
    					<div class="row">
    						<div class="col-md-5">
    							<DIV class="alert alert-info ModifHauteur">
    									<LABEL><B>Présélection :</B></LABEL>
    									<SELECT class="" id="filtre" onChange="OnChangeBlur_MajListeFic()" onFocus="Init()">
    										<OPTION value=""></OPTION>
    										<OPTION value="FILTRE_CDG">LFPG / CDG / PG</OPTION>
    										<OPTION value="FILTRE_ORY">LFPO / ORY / PO</OPTION>
    										<OPTION value="FILTRE_LBG">LFPB / LBG / PB</OPTION>
    										<OPTION value="FILTRE_CRNA">CRNA</OPTION>
    										<OPTION value="FILTRE_AUT">AUTRES</OPTION>
    									</SELECT>
    							</DIV>
    						</div>
    						<div class="col-md-2 alert alert-success center">
    							<label><b>OU</b></label>
    						</div>
    						<div class="col-md-5">
    							<DIV class="alert alert-info">
    								<LABEL><B>Recherche :</B></LABEL>
    								<INPUT class="" name="recherche" id="recherche" onBlur="OnChangeBlur_MajListeFic()"  onFocus="Init()"></INPUT>
    							</DIV>
    						</div>
    					</div>
    					<DIV class="row">
    						<DIV class="col-md-10">
    							<DIV class="alert alert-info">
    								<LABEL><B>Liste des Fichiers (29 + '###' + 89) - </B></LABEL> <LABEL id="nb_val_fic"> ()</LABEL> :<BR/>
    <!--							<SELECT class="" id="Liste_Proc" onChange="OnChange_Liste_Proc()">
    								</SELECT>
    -->
    								<SELECT class="" id="Liste_Proc" OnChange="TestPriorite()">
    								</SELECT>
    							</DIV>
    						</DIV>
    						<DIV class="col-md-2">
    							<DIV class="alert alert-info" title="Actif uniquement si on sélectionne ' TOUT ' dans la liste des fichiers à gauche.">
    								<LABEL><B>Priorité (105) : </B></LABEL><BR/>
    								<SELECT class="" id="Liste_Priorite" disabled title="Actif uniquement si on sélectionne ' TOUT ' dans la liste des fichiers à gauche.">
    									<OPTION value="*" selected="selected">*</OPTION>
    									<OPTION value="1">1</OPTION>
    									<OPTION value="2">2</OPTION>
    									<OPTION value="3">3</OPTION>
    									<OPTION value="4">4</OPTION>
    									<OPTION value="5">5</OPTION>
    									<OPTION value="6">6</OPTION>
    									<OPTION value="7">7</OPTION>
    									<OPTION value="8">8</OPTION>
    									<OPTION value="9">9</OPTION>
    									<OPTION value="10">10</OPTION>
    								</SELECT>
    							</DIV>
    						</DIV>
    					</DIV>
    					<div class="row center">
    						<div class="col-md-3">
    						</div>
    						<div class="col-md-6 center">
    							<button type="button" class="btn btn-outline-dark btn-lg btn-block" title="Lance la recherche..." onClick="OnClick_Liste_Proc()">GO</button>
    						</div>
    						<div class="col-md-3">
    						</div>
    					</div>
    				</DIV>
    				<br/>
    				<DIV id="DIV_FL_1" class="col-md-12"><CENTER><I class="fa fa-arrow-down fa-5x" style="color:white"></I></CENTER></DIV>
    				<DIV class="">&nbsp;</DIV> <!-- Saut de ligne -->
    				<DIV class="col-md-12">
    					<DIV id="DIV_ZI_1" class="TexteBlanc">(Zone de résultats intermédiaires 1)
    						<DIV class="alert alert-warning"> 
    							<LABEL><B>Priorité (105) :</B></LABEL>
    							<LABEL class="" NAME="priorite" id="priorite"></LABEL>
    							<BR/>
    							<LABEL><B>Nom Fichier (29) :</B></LABEL>
    							<LABEL class="" NAME="nom_fic" id="nom_fic"></LABEL>
    							<BR/>
    							<LABEL><B>Sujet Email (89) :</B></LABEL>
    							<LABEL class="" NAME="sujet_email" id="sujet_email"></LABEL>
    							<BR/>
    							<LABEL><B>Message Email (90) :</B></LABEL>
    							<LABEL class="" NAME="msg_email" id="msg_email"></LABEL>
    							<BR/>
    							<LABEL><B>Catégorie (28) :</B></LABEL>
    							<!-- Retire la classe "wrapping" si les retours à la ligne te plaisent pas -->
    							<LABEL class="wrapping" NAME="categorie" id="categorie"></LABEL>
    							<BR/>
    							<LABEL><B>Type Fichier (30) :</B></LABEL>
    							<LABEL class="" NAME="type_fic" id="type_fic"></LABEL>
    							<BR/>
    							<LABEL><B>Dossier Stockage (98) :</B></LABEL>
    							<LABEL class="wrapping" NAME="dossier_stockage" id="dossier_stockage"></LABEL>
    							<LABEL> -> (PM_LIB_PARAMETRES) </LABEL>
    							<I><LABEL class="wrapping" NAME="ds_clair" id="ds_clair"></LABEL></I>
    							<BR/>
    							<LABEL><B>MacroVB (94) :</B></LABEL>
    							<LABEL class="" NAME="macrovb" id="macrovb"></LABEL>
    							<BR/>
    							<LABEL><B>Nota (116) :</B></LABEL>
    							<BR/>
    							<!-- Retire la classe "wrapping" si les retours à la ligne te plaisent pas -->
    							<LABEL class="wrapping" NAME="nota" id="nota"></LABEL>
    							<DIV class=""><HR align="center" width="50%" color="midnightblue" size="3"> </DIV> <!-- Saut de ligne -->
    							<BR/>
    							<LABEL><B>Nom Fichier recomposé avec Catégorie :</B></LABEL>
    							<LABEL class="" NAME="nom_fic_categ" id="nom_fic_categ"></LABEL>
    						</DIV>
    					</DIV>
    				</DIV>
    				<DIV class="col-md-12">
    					<DIV id="DIV_ZI_2" class="TexteBlanc">(Zone de résultats intermédiaires 2)
    						<DIV class="alert alert-success"> 
    							<LABEL id="label_v"><B>Vérification du fichier (Les dates et n° semaine sont calculées par rapport à la date début sélectionnée) (29) : </B></LABEL>
    							<BR/>
    							<LABEL id="label_verif"></LABEL>
    							<LABEL> -> </LABEL>
    							<I><LABEL class="" NAME="verif" id="verif"></LABEL></I>
    						</DIV>
    					</DIV>
    				</DIV>
    				<DIV class="col-md-12">
    					<DIV id="DIV_ZI_21" class="TexteBlanc">(Zone de résultats intermédiaires 2.1)
    						<DIV class="alert alert-success"> 
    							<DIV NAME="result_inter_1" id="result_inter_1" class="">
    								<TABLE id="table_result_inter_1" class="table table-statSAI">
    									<THEAD>
    										<TR>
    											<TH class="CentrageVerticalForce">P.</TH>
    											<TH class="CentrageVerticalForce">Fichier</TH>
    											<TH class="CentrageVerticalForce">MacroVB</TH>
    											<TH class="CentrageVerticalForce" title="Ouvre le fichier col 1 ou exécute la macro col 3">Ouv. / Exe.</TH>
    										</TR>
    									</THEAD>
    									<TBODY id="result_inter_1_Rows">
    									</TBODY>
    								</TABLE>
    							</DIV>
    						</DIV>
    					</DIV>
    				</DIV>
    			</DIV>		
    		</DIV>		
    		<DIV  id="DIV_FL_2" class="col-md-12"><CENTER><I class="fa fa-arrow-down fa-5x" style="color:white"></I></CENTER></DIV>
    		<DIV class="col-md-12">(Zone de résultats 1)
    			<DIV class="alert alert-info">
    				<LABEL id="label_dependances"><B>Liste des dépendances :</B></LABEL>
    				<BR/>
    				<LABEL>(Vérification de l'existance des fichiers 'nom complet' => passage de la ligne en fond rouge ou vert)</LABEL>
    				<LABEL>(Sélection d'une ligne => affichage des dépendances (META_DEPENDANCE_FICHIER_SRC_n) dans la table en dessous.</LABEL>
    				<DIV NAME="depend" id="depend">
    					<TABLE id="table_depend" class="table table-statSAI">
    						<THEAD>
    							<TR>
    								<TH id="DLTHC01" class="CentrageVerticalForce" title="Numéro du champs source concerné : META_FICHIER_SRC_n -> META_DEPENDANCE_FICHIER_SRC_n"></TH>
    								<TH id="DLTHC02" class="CentrageVerticalForce" title="Priorité">P.</TH>
    								<TH id="DLTHC03" class="CentrageVerticalForce">Fichier (29)</TH>
    								<TH id="DLTHC04" class="CentrageVerticalForce">Date</TH>
    								<TH id="DLTHC05" class="CentrageVerticalForce">Nom Complet (Avec dossier + date + catégorie)</TH>
    								<TH id="DLTHC06" class="CentrageVerticalForce">Ouv.</TH>
    							</TR>
    						</THEAD>
    						<TBODY id="dependRows">
    						</TBODY>
    					</TABLE>
    				</DIV>
    			</DIV>
    		</DIV>
    		<DIV id="DIV_FL_3" class="col-md-12"><CENTER><I class="fa fa-arrow-down fa-5x" style="color:white"></I></CENTER></DIV>
    		<DIV class="col-md-12">(Zone de résultats 2)
    			<DIV class="alert alert-info">
    				<LABEL id="label_caracteristiques"><B>Cractaéristiques -> META_DEPENDANCE_FICHIER_SRC_n pour </B></LABEL><I><LABEL id="label_caract"></LABEL></I>
    				<BR/>
    				<LABEL>(Sélection d'une ligne => relance du traitement après validation)</LABEL>
    				<DIV NAME="caract" id="caract">
    					<TABLE id="table_caract" class="table table-statSAI">
    						<THEAD>
    							<TR>
    								<TH class="Table_Caract_Col1 CentrageVerticalForce" title="Priorité">P.</TH>
    								<TH class="CentrageVerticalForce">Périodicité</TH>
    								<TH class="CentrageVerticalForce">Type</TH>
    								<TH class="CentrageVerticalForce">Lang.</TH>
    								<TH class="CentrageVerticalForce">Module</TH>
    								<TH class="Table_Caract_Col6 CentrageVerticalForce">Catégorie</TH>
    							</TR>
    						</THEAD>
    						<TBODY id="caractRows">
    						</TBODY>
    					</TABLE>
    				</DIV>
    			</DIV>
    		</DIV>
    		<DIV class="col-md-12"><HR align="center" width="50%" color="midnightblue" size="3"> </DIV> <!-- Saut de ligne -->
     
    		<DIV class="col-md-12">(La suite, si besoin...)
    			<DIV class="alert alert-secondary"> 
    			</DIV>
    		</DIV>
    		<DIV class="">
    			<DIV id="div_soustitre2"></DIV>
    			<DIV id="div_info2"></DIV>
    		</DIV>
    		<BR/>
    	</DIV>


    La fonction qui permet d'afficher cette div et son appel (elle est en cours de développement) :
    Code javascript :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
    AffPatience("ON", "OUI", G_TOP_DIV_PATIENCE, G_LEFT_DIV_PATIENCE, G_WIDTH_DIV_PATIENCE, G_HEIGHT_DIV_PATIENCE, "default");
     
    function AffPatience(P_OnOff, P_Mess2, P_X, P_Y, P_Width, P_Height, P_Cursor) {
    	window.top.window.scrollTo(0,0); // Permet de remonter en haut de l'écran
     
    	P_Width = P_Width + "px";
    	P_Height = P_Height + "px";
    	P_X = P_X + "px";
    	P_Y = P_Y + "px";
     
    	if (P_OnOff == "ON")
    	{
    		document.getElementById("DIV_PATIENCE").style.display = "block";
    	}
    	if (P_OnOff == "OFF")
    	{
    		document.getElementById("DIV_PATIENCE").style.display = "none";
    	}
    	if (P_Mess2 == "OUI")
    	{
    		document.getElementById("DIV_MESS2").style.display = "block";
    	}
    	if (P_Mess2 == "NON")
    	{
    		document.getElementById("DIV_MESS2").style.display = "none";
    	}
    	if (P_X != 0 || "0px")
    	{
    		document.getElementById("DIV_PATIENCE").style.top = P_X;
    	}
    	if (P_Y != 0 || "0px")
    	{
    		document.getElementById("DIV_PATIENCE").style.left = P_Y;
    	}
    	if (P_Width != 0)
    	{
    		document.getElementById("DIV_PATIENCE").style.width = P_Width;
    	}
    	if (P_Height != 0)
    	{
    		document.getElementById("DIV_PATIENCE").style.height = P_Height;
    	}
    	if (P_Cursor == "wait")
    	{
    		document.body.classList.add("PointeurWait");
    	}
    	if (P_Cursor == "default")
    	{
    		document.body.classList.add("PointeurDefault");
    	}
    }
    Zeb'...

  4. #4
    Membre actif
    Bon, bon, bon, ça fonctionne impec, c'est moi qui faisait des bêtises.
    Merci encore.

    par contre, je viens de me rendre compte que l'utilisateur pouvait scroller (avec la souris) vers le bas pendant le chargement ; est-ce qu'il y a un moyen de le désactiver pendant le chargement puis de le réactiver, avec changement de la souris en wait ?

    Edit : je me réponds pour donner ce que j'ai trouvé et qui fonctionne :

    Interdiction du scroll :
    Code javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    $('body').addClass('stop-scrolling');

    Autorisation du scroll
    Code javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    $('body').removeClass('stop-scrolling');


    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .stop-scrolling {
      height: 100%;
      overflow: hidden;
    }


    Il ne me reste plus qu'à trouver le moyen de forcer le pointeur de la souris en "wait" pendant le chargement de ma page.
    Zeb'...

  5. #5

  6. #6
    Membre actif
    Oui, c'est ce que j'ai fait, mais je dois passer à côté de quelque chose :

    Code css :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    .PointeurWait {
    	cursor: wait;
    }
     
    .PointeurDefault {
    	cursor: default;
    }


    Code javascript :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
     
    AffPatience("ON", "OUI", G_TOP_DIV_PATIENCE, G_LEFT_DIV_PATIENCE, G_WIDTH_DIV_PATIENCE, G_HEIGHT_DIV_PATIENCE, "wait");
     
     
     
    function AffPatience(P_OnOff, P_Mess2, P_X, P_Y, P_Width, P_Height, P_Cursor) {
    	window.top.window.scrollTo(0,0); // Permet de remonter en haut de l'écran
     
    	P_Width = P_Width + "px";
    	P_Height = P_Height + "px";
    	P_X = P_X + "px";
    	P_Y = P_Y + "px";
     
    	if (P_OnOff == "ON")
    	{
    		$('body').addClass('stop-scrolling');
    		document.getElementById("DIV_PATIENCE").style.display = "block";
    	}
    	if (P_OnOff == "OFF")
    	{
    		$('body').removeClass('stop-scrolling');
    		document.getElementById("DIV_PATIENCE").style.display = "none";
    	}
    	if (P_Mess2 == "OUI")
    	{
    		document.getElementById("DIV_MESS2").style.display = "block";
    	}
    	if (P_Mess2 == "NON")
    	{
    		document.getElementById("DIV_MESS2").style.display = "none";
    	}
    	if (P_X != 0 || "0px")
    	{
    		document.getElementById("DIV_PATIENCE").style.top = P_X;
    	}
    	if (P_Y != 0 || "0px")
    	{
    		document.getElementById("DIV_PATIENCE").style.left = P_Y;
    	}
    	if (P_Width != 0)
    	{
    		document.getElementById("DIV_PATIENCE").style.width = P_Width;
    	}
    	if (P_Height != 0)
    	{
    		document.getElementById("DIV_PATIENCE").style.height = P_Height;
    	}
    	if (P_Cursor == "wait")
    	{
    		document.body.classList.add("PointeurWait");
    	}
    	if (P_Cursor == "default")
    	{
    		document.body.classList.add("PointeurDefault");
    	}
    }
    Zeb'...

  7. #7
    Modérateur

    Le cursor:wait est à mettre sur l'élément qui est en premier plan et qui couvre l'écarn et est à retirer quand les données sont chargées.

  8. #8
    Membre actif
    C'est pas ce que je fais dans la fonction ???
    DIV_PATIENCE est bien la DIV qui est au-dessus de tous le reste, d'ailleurs grâce à ton aide

    D'après le débogage, je passe bien par le test if (P_Cursor == "wait") mais le curseur n'est pas modifié et garde son dernier aspect (celui du clic sur un bouton).
    Zeb'...

  9. #9
    Modérateur

    C'est pas ce que je fais dans la fonction ???
    A vrai dire je n'ai pas regardé car faire cela en JavaScript n'a pas grand sens.

    Voir code sur discussion : Centrage de div sur la page

  10. #10
    Membre actif
    Mon souci de div au-dessus des autres étant résolu (merci à toi) et histoire de s'y retrouver mieux, j'ai crée un autre sujet, juste pour le problème de pointeur.

    https://www.developpez.net/forums/d2.../#post11604125
    Zeb'...

###raw>template_hook.ano_emploi###