Найти высоту элемента, содержащего текст

0

У меня есть ящик с фиксированной шириной (800 пикселей), который заполняется содержимым из nicEdit.

Мне нужно знать высоту содержимого, которое помещается в поле, если я подсчитаю количество строк, которые он не будет работать с длинными текстами или с изображениями или разными размерами шрифтов...

Мне нужно найти высоту, чтобы установить поле с высотой, которая не будет отображать полосы прокрутки и не будет превышать содержание.

<div style="width: 800px; overflow: hidden"><?= $contentbyuser; ?></div>

Эта "страница" будет показана в iFrame с таким кодом, как:

<iframe style="width: 800px;height:???px;" src="page.php"></iframe>

Как я могу найти высоту для установки в iframe с помощью javascript и/или jQuery?

Теги:

2 ответа

1
Лучший ответ

Вы можете создать фиктивный элемент, вставить в него HTML, а затем проверить его высоту.

//create dummy
var $dummy = $('<div />').css({ position : 'absolute', left : -9999, width : 800 }).html(randomTextandImages);

//add dummy to the DOM
$("body").append($dummy);

//get the height of the dummy
var theHeight = $dummy.height();

//at this point we can remove the dummy from the DOM
$dummy.remove();

//set the height of the iframe
$("iframe").height(theHeight);

Имейте в виду, что фиктивный элемент должен иметь тот же CSS, который применяется к нему как ваш обычный контейнер, чтобы он отображал то же самое. Свойства шрифта особенно важны (например, размер шрифта, размер шрифта, высота строки и т.д.).

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

Кроме того, я не могу вспомнить, была ли у меня проблема с этим в прошлом, но если вы получаете высоту ноль, тогда код, который получает высоту манекена, должен быть помещен в короткий тайм-аут, поэтому манекен может сделать до получения высоты.

  • 0
    Пробую, спасибо.
0

Задайте высоту div для автоматической настройки на основе содержимого. Тогда вы можете сделать это в своем JavaScript:

$("div").html(randomTextandImages);
var height = $('div').height();        // Give this to whoever will be using the iframe

Ещё вопросы

Сообщество Overcoder
Наверх
Меню