Loading page avec lightbox

Loading page avec lightbox - HTML/CSS - Programmation

Marsh Posté le 07-10-2008 à 14:52:48    

Bonjour ,  
 un problème auquel je ne trouve pas de solution :  
 
j'ai un fichier Javascript "lightbox" qui est le suivant :

Code :
  1. *--------------------------------------------------------------------------*/
  2. /* Lightbox  
  3. * This is a script for creating modal dialog windows (like the ones your operating
  4. * system uses)
  5. *  
  6. */
  8. var Lightbox = {
  9. /* hideAll - closes all open lightbox windows */
  10. hideAll: function(){
  11.  lboxes = document.getElementsByClassName('lbox')
  12.  lboxes.each(function(box){
  13.    Element.hide(box)
  14.   }
  15.  )
  16.  if ($('overlay')){
  17.   Element.remove('overlay');
  18.   }
  19. }
  20. }
  21. Lightbox.base = Class.create();
  22. Lightbox.base.prototype = {
  24. initialize: function(element, options){
  25.  //start by hiding all lightboxes
  26.  Lightbox.hideAll();
  28.  this.element = $(element);
  29.  this.options = Object.extend({
  30.   lightboxClassName : 'lightbox',
  31.   closeOnOverlayClick : false,
  32.   externalControl : false
  33.  }, options || {} )
  35.  //create the overlay
  36.  new Insertion.Before(this.element, "<div id='overlay' style='display:none;'></div>" );
  38. Element.addClassName(this.element, this.options.lightboxClassName)
  40.  //also add a default lbox class to the lightbox div so we can find and close all lightboxes if we need to
  41.  Element.addClassName(this.element, 'lbox')
  43.  //Tip: make sure the path to the close.gif image below is correct for your setup
  44.  closer = '<img id="close" src="http://blog.feedmarker.com/wp-content/themes/feedmarker/lightbox/images/close.gif" alt="Close" title="Close this window" />'
  46.  //insert the closer image into the div
  47.  new Insertion.Top(this.element, closer);
  49.  Event.observe($('close'), 'click', this.hideBox.bindAsEventListener(this) );
  51.  if (this.options.closeOnOverlayClick){
  52.   Event.observe($('overlay'), 'click', this.hideBox.bindAsEventListener(this) );
  53.  }
  54.  if (this.options.externalControl){
  55.   Event.observe($(this.options.externalControl), 'click', this.hideBox.bindAsEventListener(this) );
  56.  }
  58.  this.showBox();
  59. },
  61. showBox : function(){
  62.  //show the overlay
  63.    Element.show('overlay');
  65.  //center the lightbox
  66.    this.center();
  67.  
  68.     //show the lightbox
  69.    Element.show(this.element);
  70.    return false;
  71. },
  73. hideBox : function(evt){
  74.  Element.removeClassName(this.element, this.options.lightboxClassName)
  75.  Element.hide(this.element);
  76.  //remove the overlay element from the DOM completely
  77.  Element.remove('overlay');
  78.  return false;
  79. },
  81. center : function(){
  82.  var my_width  = 0;
  83.  var my_height = 0;
  85.  if ( typeof( window.innerWidth ) == 'number' ){
  86.   my_width  = window.innerWidth;
  87.   my_height = window.innerHeight;
  88.  }else if ( document.documentElement &&
  89.     ( document.documentElement.clientWidth ||
  90.       document.documentElement.clientHeight ) ){
  91.   my_width  = document.documentElement.clientWidth;
  92.   my_height = document.documentElement.clientHeight;
  93.  }
  94.  else if ( document.body &&
  95.    ( document.body.clientWidth || document.body.clientHeight ) ){
  96.   my_width  = document.body.clientWidth;
  97.   my_height = document.body.clientHeight;
  98.  }
  100.  this.element.style.position = 'absolute';
  101.  this.element.style.zIndex   = 99;
  103.  var scrollY = 0;
  105.  if ( document.documentElement && document.documentElement.scrollTop ){
  106.   scrollY = document.documentElement.scrollTop;
  107.  }else if ( document.body && document.body.scrollTop ){
  108.   scrollY = document.body.scrollTop;
  109.  }else if ( window.pageYOffset ){
  110.   scrollY = window.pageYOffset;
  111.  }else if ( window.scrollY ){
  112.   scrollY = window.scrollY;
  113.  }
  115.  var elementDimensions = Element.getDimensions(this.element);
  117.  var setX = ( my_width  - elementDimensions.width  ) / 2;
  118.  var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;
  120.  setX = ( setX < 0 ) ? 0 : setX;
  121.  setY = ( setY < 0 ) ? 0 : setY;
  123.  this.element.style.left = setX + "px";
  124.  this.element.style.top  = setY + "px";
  126. }
  129. }


 
 et j'aimerai utilisé ce script pour qu'il s'affiche pendant le loading des requet XMLHTTPREQUEST :
 
 donc j'ai creer un div avec mon contenu image + text  
 

Code :
  1. echo "<div id='lightbox' style='display:none'>Loading...</div>" ;


 
 le problème ce situe ici ::::

 
j'arrive a afficher le div pendant le téléchargement de donné mais j'arrive pas a l'enlevé :s a la fin de la requette :
 

Code :
  1. var xhr_obj = null;
  3. if(window.XMLHttpRequest)  //Firefox
  4. {
  5.     xhr_obj = new XMLHttpRequest();
  6. }
  8. else if(window.ActiveXObject) // Internet Explorer
  9. {
  10.     try {
  11.  xhr_obj= new ActiveXObject("Msxml2.XMLHTTP" );
  12.  }
  13. catch (e) {
  14.  xhr_obj = new ActiveXObject("Microsoft.XMLHTTP" );
  15.  }
  17. }
  18.   else {
  19.     alert("Votre navigateur ne supporte pas les objets XMLHttpRequest" );
  20.     return;
  21. }
  23. /*
  24. */
  25. var data     = null;
  26. var server = document.getElementById("lsserver" ).value ;
  27. var feature = document.getElementById("feature" ).value ;
  28. data = page+"?server="+server+"&feature="+feature+"&id="+id+"&timestamp=" + timestamp+""+args ;
  30. var load = new Lightbox.base(document.getElementById("lightbox" )).showBox() ;
  31. xhr_obj.open("GET", data, true);  // Mode synchone
  33. /**/
  35.    xhr_obj.onreadystatechange = function()
  36. {
  38.  if (xhr_obj.readyState == 4) {
  39.  load.hideBox();
  40.   if (xhr_obj.status ==200) {
  41.    if( id.search('update') !=-1 || id == 'os' || id =='CCVersion' || id== 'replicasGR' || id== 'replicasServer' || id=='triggersName' || id== 'triggersVob' || id == 'oploglimitvalue')
  42.    {
  43.     document.getElementById('divTab').innerHTML = xhr_obj.responseText;
  44.     }
  45.   }
  46.   else {
  47.    alert("Problem: " + xhr_obj.statusText);
  48.   }
  49.  }
  50.  }
  51. xhr_obj.send(null);
  55. }

Reply

Marsh Posté le 07-10-2008 à 14:52:48   

Reply

Marsh Posté le 07-10-2008 à 19:17:14    

Code :
  1. var xhr_obj = null;
  3. if(window.XMLHttpRequest)  //Firefox
  4. {
  5.     xhr_obj = new XMLHttpRequest();
  6. }
  8. else if(window.ActiveXObject) // Internet Explorer
  9. {
  10.     try {
  11.  xhr_obj= new ActiveXObject("Msxml2.XMLHTTP" );
  12.  }
  13. catch (e) {
  14.  xhr_obj = new ActiveXObject("Microsoft.XMLHTTP" );
  15.  }
  17. }
  18.   else {
  19.     alert("Votre navigateur ne supporte pas les objets XMLHttpRequest" );
  20.     return;
  21. }
  23. /*
  24. */
  25. var data     = null;
  26. var server = document.getElementById("lsserver" ).value ;
  27. var feature = document.getElementById("feature" ).value ;
  28. data = page+"?server="+server+"&feature="+feature+"&id="+id+"&timestamp=" + timestamp+""+args ;
  30. var load = new Lightbox.base(document.getElementById("lightbox" ));
  31.         load.showBox() ;
  32. xhr_obj.open("GET", data, true);  // Mode synchone
  34. /**/
  36.    xhr_obj.onreadystatechange = function()
  37. {
  39.  if (xhr_obj.readyState == 4) {
  40.  load.hideBox();
  41.   if (xhr_obj.status ==200) {
  42.    if( id.search('update') !=-1 || id == 'os' || id =='CCVersion' || id== 'replicasGR' || id== 'replicasServer' || id=='triggersName' || id== 'triggersVob' || id == 'oploglimitvalue')
  43.    {
  44.     document.getElementById('divTab').innerHTML = xhr_obj.responseText;
  45.     }
  46.   }
  47.   else {
  48.    alert("Problem: " + xhr_obj.statusText);
  49.   }
  50.  }
  51.  }
  52. xhr_obj.send(null);
  56. }


 
Essaye ca car attribué une fonction a une variable :D c'est pas top :D
imagine dans ton schema ca fait  
Lightbox.base(document.getElementById("lightbox" )).showBox().hideBox()
 
Cherche l'erreur :D [:czajczynski]  


---------------
Recette cookeo Recette de cuisine
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed