Динамическое изменение размера CFWINDOW для соответствия содержанию - PullRequest
Новая
       21

Динамическое изменение размера CFWINDOW для соответствия содержанию

0 голосов
/ 09 июня 2010

В настоящее время я работаю над сайтом, который использует много объектов cfwindow, и мне было интересно, если кто-нибудь знает способ динамического изменения размера окна, чтобы весь контент помещался без необходимости использования полос прокрутки.

Я пытался использовать конфигурацию overflow = visible, но, похоже, это не имеет значения.

Заранее спасибо за любые советы.

1 Ответ

2 голосов
/ 09 июня 2010

Ну, это своего рода классическая задача при использовании всплывающих окон для отображения изображений.Это было сделано путем измерения размера изображения и изменения размера появившегося окна с помощью window.resizeBy(w,h).Это все еще применимый метод, я думаю.

Второй аналогичный параметр - вычисление необходимого размера на стороне сервера и передача атрибутов cfwindow width и height.Скажем, вы можете захватить содержимое в cfcontent и проверить его длину в символах.

Обратите внимание, что оба этих метода не надежны при работе с текстовым содержимым, потому что рендеринг шрифтов может действительно отличатьсядля пользователей.Таким образом, резервирование некоторой дополнительной высоты может быть полезным.

Другой сложный способ - проверить наличие полос прокрутки для уже открытого окна.Есть атрибут scrollHeight, который вы можете сравнить с clientHeight и увеличить высоту.Возможно, в некоторых браузерах это может привести к неприятным эффектам «прыжка», но это должно сработать.

Я заинтересовался и попробовал быстрый тест последнего метода.Сначала появляется всплывающее окно с w / h = 200 и этим текстом ответа (слова выше) в качестве содержимого.Затем я сделал это во всплывающем окне: 

<script type="text/javascript">
window.onload = function() {

    // check the size before resize
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight =  " + document.body.scrollHeight);

    if (window.innerHeight < document.body.scrollHeight) {
        // here's where we can play with resize steps and other specific trickery
        // now we're trying to expand size a bit
        window.resizeBy(window.innerWidth + 50, window.innerHeight + 50);
    }

    // check the size after resize
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight =  " + document.body.scrollHeight);

}
</script>

Предупреждение № 1: 

Window Width = 200
Window Height = 200
ScrollHeight =  783

Предупреждение № 2: 

Window Width = 450
Window Height = 450
ScrollHeight =  358

Обратите внимание, что яЯ не уверен на 100% (и не могу проверить прямо сейчас), что атрибуты window.innerWidth/Height будут работать в IE - вы должны учитывать также document.documentElement.clientWidth/Height атрибуты.

Надеюсь, это поможет.

...