Javascript / xhtml - обнаружение общей ширины содержимого в div с переполнением: скрыто

Question

Я пишу фотогалерею на основе JavaScript с горизонтально прокручиваемой панелью миниатюр.

>> Моя текущая незавершенная работа здесь << </a>

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

Я поместил предупреждение в мою функцию window.onload, чтобы я мог протестировать различные функции измерения элементов в разных браузерах. в настоящее время он показывает значение scrollWidth, которое в IE составляет 1540 пикселей, а в FireFox, Safari, Opera и т. д. - 920 пикселей.

Значение 1540 является правильным для моих целей. Может кто-нибудь сказать мне, как получить это значение в FireFox и т. Д.

Answer 1

Возможно, вы просто ссылаетесь на неправильный элемент.

document.getElementById('thumb_window').scrollWidth

дает мне 1540 на этой странице в IE6 и Firefox 2. Это то, что вы ищете?

Кстати, в IE6 эскизы простираются далеко за правую прокрутку.

Answer 2

Вот маленький столик: -

             thumb_window             thumb_slide
             scrollWidth offsetWidth  scrollWidth offsetWidth
IE7          1540        920          1540        1540
FF 3.05      1540        920          920         920
Opera 9.5    1540        920          920         920
Safari 3.2   1540        920          1540        920
Chrome 1.0   1540        920          1540        920

Answer 3

Вы можете просматривать изображения на стороне сервера и увеличивать их ширину. (В php вы можете использовать функцию getImagesize() для этого). Тогда вы можете иметь общую ширину всего изображения, переданного в JavaScript. Например:

$total_width=0;
foreach ($images as $image)
{
   $info=getimagesize($image['file_path'];
   $total_width=$total_width +  $info[0];
}

В JavaScript:

<script type="text/javascript">
var total_width=<?=$total_width;?>;
</script>

Answer 4

Что вам нужно сделать, это найти последний элемент изображения в div, получить его позицию X относительно его контейнера, добавить его ширину и, возможно, добавить его горизонтальные поля, если он есть.

Псевдо-код:

total_width = (last_image.x - container.x) + last_image.width + last_image.left_margin + last_image.right_margin

Это было бы довольно легко сделать с помощью JQuery , поскольку он специально имеет встроенную функциональность для получения .last (), относительного позиционирования и получения ширины полей.

Answer 5

Я думаю, что вы ищете "offsetWidth". Для кросс-браузерного режима можно использовать прокрутку [Ширина / Высота] или смещение [Ширина / Высота], в зависимости от того, что больше.

var elemWidth = (elem.offsetWidth > elem.scrollWidth) ? elem.offsetWidth : elem.scrollWidth;
var elemHeight = (elem.offsetHeight > elem.scrollHeight) ? elem.offsetHeight : elem.scrollHeight;