remplacer le contenu de div sans changer la taille ou le défilement

Question

J'essaye d'écrire du code qui remplace l'ancien contenu par un espace réservé pendant que le nouveau contenu est chargé (via ajax).

<div id="target"> 
... 
</div> 

Au cours du cycle ajax demande-réponse, je voudrais remplacer le contenu de la div cible avec un message « chargement » ou l'image.

Jusqu'à présent, c'est simple ...

Cependant, dans certains cas, la cible est faible, et d'autres la cible est grande. Dans les deux cas, je ne veux pas que la taille de la cible soit modifiée ou que les barres de défilement apparaissent. si le message ou l'image de chargement doit être découpé, soyez-le.

La signature (id, classe, style) de la div 'target' doit rester la même tout au long du processus et je ne peux pas définir une largeur + hauteur sur la div cible. Je ne veux pas compter sur le code supplémentaire en cours d'exécution lors de la réception du nouveau contenu

Comment aborderiez-vous cela, en utilisant javascript/dhtml de base et/ou prototype-js seulement.

merci, p.

Answer 1

// prototype 
Object.prototype.updateFixedSizeHtml = function(html) 
{ 
    this.innerHTML = "<div style='width:" + this.clientWidth + "px;height:" + this.clientHeight + "px;overflow:hidden;display:block;padding:0;border:0;margin:0'>" + html + "</div>"; 
} 
// usage 
document.getElementById('target').updateFixedSizeHtml('New Content'); 

Answer 2

c'est le meilleur que je peux trouver pour l'instant:

function loading(id, content) 
{ 
    var elem = $(id); 
    if (!elem) 
     return; 

    var dim = elem.getDimensions(); 
    var width = dim.width - parseInt(elem.getStyle("padding-left")) - parseInt(elem.getStyle("padding-right")); 
    var height = dim.height - parseInt(elem.getStyle("padding-top")) - parseInt(elem.getStyle("padding-bottom")); 

    elem.innerHTML = "<div style=\"position:relative; overflow:hidden; padding:0; margin:0; border:0; width:" + width + "px; height:" + height + "px;\">" /* */ 
      + content + "</div>"; 
} 

ne hésitez pas à poster une meilleure solution!