Bonjour à tous,
J'ai fait deux petits div qui permette d'afficher un petit "chargement en cours" entre chaque page.
Le site de base est en asp.net, mais je ne pouvais pas le rajouter en code .net, pour diverses raisons que je n'exposerais pas ici.
Mon pb est au niveau css, maintenant, et js peut-être.
j'ai donc deux divs :
Code :
- <div id="fond_opaque" class="fond_opaque" style="display: none;"> </div>
- <div id="div_loading" class="div_loading" style="display: none;">
- <br /><br />
- Chargement en cours...<br /><br />
- <img src="../images/progress.gif" alt="Chargement en cours" />
- </div>
|
Pour ces deux divs, le css associé :
Code :
- .div_loading {position: absolute; width: 300px; font-size: 16px; border: 1px solid; color: #ee6f06; height: 100px; background: #FFFFFF; z-index: 100; font-weight: bold;}
- .fond_opaque {background-color:Gray; filter:alpha(opacity=60); opacity:0.6; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; margin: 0; padding: 0;}
|
Et pour les méthodes d'apparition, voici le js :
Code :
- function afficheLoading()
- {
- var divHeight;
- divHeight = window.innerHeight;
- divHeight = (divHeight)? divHeight: document.documentElement.clientHeight;
- divHeight = (divHeight)? divHeight: document.body.clientHeight;
- getElt('fond_opaque').style.height = divHeight+"px";
- posDiv();
- document.getElementById('fond_opaque').style.display = 'block';
- document.getElementById('div_loading').style.display = 'block';
- }
-
- function disableLoading()
- {
- document.getElementById('fond_opaque').style.display = 'none';
- document.getElementById('div_loading').style.display = 'none';
- }
-
- function getElt(strId){
- return document.getElementById(strId);
- }
- pageWidth = 0;pageHeight = 0;
- function getWindow(){
- pageWidth = window.innerWidth;
- pageWidth = (pageWidth)? pageWidth : document.documentElement.clientWidth;
- pageWidth = (pageWidth)? pageWidth: document.body.clientWidth;
- pageHeight = window.innerHeight;
- pageHeight = (pageHeight)? pageHeight: document.documentElement.clientHeight;
- pageHeight = (pageHeight)? pageHeight: document.body.clientHeight;
- }
- function posDiv(){
- getWindow();
- var myDiv = getElt('div_loading');
- var posLeft = (pageWidth-myDiv.offsetWidth)/2;
- myDiv.style.left = (posLeft<0)?0+"px":posLeft+"px";
- var posTop = (pageHeight-myDiv.offsetHeight)/2;
- myDiv.style.top = (posTop<0)?0+"px":posTop+"px";
- }
|
Alors le JS est un essai de divers trucs que j'ai trouvés sur le net.
Le pb à l'heure actuelle, c'est que le fond opaque, si la page possède un scroll, ne remplit pas la page. Il s'arrête à la taille de la hauteur de la fenêtre client, donc en bas ya plus de fond opaque...
Comment je pourrais faire donc, en js je suppose, pour dire à mon fond opaque de faire toute la page html en largeur et en hauteur ?
Autre souci, la fonction posDiv (et la getWindow associée) sert à positionner mon div au centre de la page (hauteur et largeur), mais elle ne marche pas. Elle est copiée d'internet, mais me semble juste.... Une idée ?
Merci d'avance
