replace content of div without changing size or scrolling

Question

Hi all,

I'm trying to write some code which replaces old content with a placeholder while new content is loaded (via ajax).

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

During the ajax request-response cycle, i'd like to replace the content of the target div with a 'loading' message or image.

So far, this is simple ...

However in some cases the target is small, and others the target is large. In neither case do I want the target div's size to change or scrollbars to appear. if the loading message or image needs to be clipped so be it.

The signature (id, class, style) of the 'target' div must remain the same throughout the process and I cannot set a width+height on the target div.

i do not want to rely on additional code being executed when the new content is received.

how would you approach this, using basic javascript/dhtml and/or prototype-js only.

thanks, p.

Answer 1

this is the best i can come up with for now:

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>";
}

feel free to post a better solution!

Answer 2

// 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');