заменить содержимое div без изменения размера или прокрутки - PullRequest
Новая
       5

заменить содержимое div без изменения размера или прокрутки

0 голосов
/ 13 сентября 2010

Я пытаюсь написать некоторый код, который заменяет старый контент заполнителем при загрузке нового контента (через ajax). 

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

Во время цикла запроса-ответа ajax я хотел бы заменить содержимое целевого div на сообщение или изображение «loading».

Пока это просто ...

Однако в некоторых случаях цель маленькая, а в других - большая. Ни в том, ни в другом случае я не хочу, чтобы размер целевого элемента div изменился или появились полосы прокрутки. если загрузочное сообщение или изображение нужно обрезать, пусть будет так.

Подпись (id, класс, стиль) div 'target' должна оставаться неизменной на протяжении всего процесса, и я не могу установить ширину + высоту для целевого div.

Я не хочу полагаться на дополнительный код, выполняемый при получении нового контента.

как бы вы подошли к этому, используя только базовые javascript / dhtml и / или prototype-js.

спасибо, стр.

Ответы [ 2 ]

0 голосов
/ 13 сентября 2010 
// 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');
0 голосов
/ 13 сентября 2010

это лучшее, что я могу предложить сейчас: 

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

не стесняйтесь размещать лучшее решение!

...