Loading page avec lightbox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Loading page avec lightbox

onlymed

Bonjour ,
un problème auquel je ne trouve pas de solution :

j'ai un fichier Javascript "lightbox" qui est le suivant :

Code :

*--------------------------------------------------------------------------*/
/* Lightbox
* This is a script for creating modal dialog windows (like the ones your operating
* system uses)
*
*/
var Lightbox = {
/* hideAll - closes all open lightbox windows */
hideAll: function(){
lboxes = document.getElementsByClassName('lbox')
lboxes.each(function(box){
Element.hide(box)
}
)
if ($('overlay')){
Element.remove('overlay');
}
}
}
Lightbox.base = Class.create();
Lightbox.base.prototype = {
initialize: function(element, options){
//start by hiding all lightboxes
Lightbox.hideAll();
this.element = $(element);
this.options = Object.extend({
lightboxClassName : 'lightbox',
closeOnOverlayClick : false,
externalControl : false
}, options || {} )
//create the overlay
new Insertion.Before(this.element, "<div id='overlay' style='display:none;'></div>" );
Element.addClassName(this.element, this.options.lightboxClassName)
//also add a default lbox class to the lightbox div so we can find and close all lightboxes if we need to
Element.addClassName(this.element, 'lbox')
//Tip: make sure the path to the close.gif image below is correct for your setup
closer = '<img id="close" src="http://blog.feedmarker.com/wp-content/themes/feedmarker/lightbox/images/close.gif" alt="Close" title="Close this window" />'
//insert the closer image into the div
new Insertion.Top(this.element, closer);
Event.observe($('close'), 'click', this.hideBox.bindAsEventListener(this) );
if (this.options.closeOnOverlayClick){
Event.observe($('overlay'), 'click', this.hideBox.bindAsEventListener(this) );
}
if (this.options.externalControl){
Event.observe($(this.options.externalControl), 'click', this.hideBox.bindAsEventListener(this) );
}
this.showBox();
},
showBox : function(){
//show the overlay
Element.show('overlay');
//center the lightbox
this.center();
//show the lightbox
Element.show(this.element);
return false;
},
hideBox : function(evt){
Element.removeClassName(this.element, this.options.lightboxClassName)
Element.hide(this.element);
//remove the overlay element from the DOM completely
Element.remove('overlay');
return false;
},
center : function(){
var my_width = 0;
var my_height = 0;
if ( typeof( window.innerWidth ) == 'number' ){
my_width = window.innerWidth;
my_height = window.innerHeight;
}else if ( document.documentElement &&
( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ){
my_width = document.documentElement.clientWidth;
my_height = document.documentElement.clientHeight;
}
else if ( document.body &&
( document.body.clientWidth || document.body.clientHeight ) ){
my_width = document.body.clientWidth;
my_height = document.body.clientHeight;
}
this.element.style.position = 'absolute';
this.element.style.zIndex = 99;
var scrollY = 0;
if ( document.documentElement && document.documentElement.scrollTop ){
scrollY = document.documentElement.scrollTop;
}else if ( document.body && document.body.scrollTop ){
scrollY = document.body.scrollTop;
}else if ( window.pageYOffset ){
scrollY = window.pageYOffset;
}else if ( window.scrollY ){
scrollY = window.scrollY;
}
var elementDimensions = Element.getDimensions(this.element);
var setX = ( my_width - elementDimensions.width ) / 2;
var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;
setX = ( setX < 0 ) ? 0 : setX;
setY = ( setY < 0 ) ? 0 : setY;
this.element.style.left = setX + "px";
this.element.style.top = setY + "px";
}
}

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 :

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 :

var xhr_obj = null;
if(window.XMLHttpRequest) //Firefox
{
xhr_obj = new XMLHttpRequest();
}
else if(window.ActiveXObject) // Internet Explorer
{
try {
xhr_obj= new ActiveXObject("Msxml2.XMLHTTP" );
}
catch (e) {
xhr_obj = new ActiveXObject("Microsoft.XMLHTTP" );
}
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHttpRequest" );
return;
}
/*
*/
var data = null;
var server = document.getElementById("lsserver" ).value ;
var feature = document.getElementById("feature" ).value ;
data = page+"?server="+server+"&feature="+feature+"&id="+id+"&timestamp=" + timestamp+""+args ;
var load = new Lightbox.base(document.getElementById("lightbox" )).showBox() ;
xhr_obj.open("GET", data, true); // Mode synchone
/**/
xhr_obj.onreadystatechange = function()
{
if (xhr_obj.readyState == 4) {
load.hideBox();
if (xhr_obj.status ==200) {
if( id.search('update') !=-1 || id == 'os' || id =='CCVersion' || id== 'replicasGR' || id== 'replicasServer' || id=='triggersName' || id== 'triggersVob' || id == 'oploglimitvalue')
{
document.getElementById('divTab').innerHTML = xhr_obj.responseText;
}
}
else {
alert("Problem: " + xhr_obj.statusText);
}
}
}
xhr_obj.send(null);
}

Publicité

ionik

Code :

var xhr_obj = null;
if(window.XMLHttpRequest) //Firefox
{
xhr_obj = new XMLHttpRequest();
}
else if(window.ActiveXObject) // Internet Explorer
{
try {
xhr_obj= new ActiveXObject("Msxml2.XMLHTTP" );
}
catch (e) {
xhr_obj = new ActiveXObject("Microsoft.XMLHTTP" );
}
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHttpRequest" );
return;
}
/*
*/
var data = null;
var server = document.getElementById("lsserver" ).value ;
var feature = document.getElementById("feature" ).value ;
data = page+"?server="+server+"&feature="+feature+"&id="+id+"&timestamp=" + timestamp+""+args ;
var load = new Lightbox.base(document.getElementById("lightbox" ));
load.showBox() ;
xhr_obj.open("GET", data, true); // Mode synchone
/**/
xhr_obj.onreadystatechange = function()
{
if (xhr_obj.readyState == 4) {
load.hideBox();
if (xhr_obj.status ==200) {
if( id.search('update') !=-1 || id == 'os' || id =='CCVersion' || id== 'replicasGR' || id== 'replicasServer' || id=='triggersName' || id== 'triggersVob' || id == 'oploglimitvalue')
{
document.getElementById('divTab').innerHTML = xhr_obj.responseText;
}
}
else {
alert("Problem: " + xhr_obj.statusText);
}
}
}
xhr_obj.send(null);
}

Essaye ca car attribué une fonction a une variable c'est pas top
imagine dans ton schema ca fait
Lightbox.base(document.getElementById("lightbox" )).showBox().hideBox()

Cherche l'erreur [:czajczynski]

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

FORUM HardWare.fr

Programmation

HTML/CSS

Loading page avec lightbox

Sujets relatifs
Apparition popup sur page d'accueil se fermant au bout de 3ou 4 sec	Adaptation page site composé d'image avec du texte à écran hte résol.
[???] Besoin d'aide pour mettre un fichier PDF en ligne (page web)	Recherche sur une page web
extraire les liens d'une page web html	[résolu]requete http en php, recuperer le code source d'une page web
Mise à jour page suite à évènement serveur	créer un lien vers l'explorer windows dans une page web...
[HTML ou javascript ?] rester à la meme hauteur de page	cradre qui s'adapte au contenu d'une page ?
Plus de sujets relatifs à : Loading page avec lightbox

Page générée en 0.108 secondes