Javascript/xhtml - discovering the total width of content in div with overflow:hidden

Question

I'm writing a javascript based photo gallery with a horizontally scrollable thumbnail bar.

>> My current work in progress is here <<

I would like the thumbnail bar to stop scrolling when it gets to the last thumbnail. To do this I need to find the total width of the contents of the div - preferably without adding up the widths of all the thumbnail images and margins.

I've put an alert in my window.onload function so I can test the various element dimension functions in different browsers. currently it's showing the value of scrollWidth, witch is reported as 1540px by IE and 920px by FireFox, Safari, Opera, etc.

The value 1540 is the correct one for my purposes, Can anyone tell me how to obtain this value in FireFox, etc.

Answer 1

I think you're looking for "offsetWidth". For a cross-browser experience its either scroll[Width/Height] or offset[Width/Height], whichever is greater.

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

Answer 2

What you should do is find the last image element in the div, get its X position relative to its container, add its width, and perhaps add its horizontal margins if it has any.

Pseudo-code:

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

This would be fairly easy to accomplish using JQuery since it specifically has built in functionality for getting .last(), getting relative positioning, and fetching margin widths.

Answer 3

Maybe you're just referencing the wrong element.

document.getElementById('thumb_window').scrollWidth

is giving me 1540 on that page in both IE6 and firefox 2. Is that what you're looking for?

BTW in IE6 the thumbnails extend way past the right scroller.

Answer 4

You can loop through the images on server-side and add up their width. (In php you can use the getImagesize() function to do this). Then you can have the total width of all the image passed on to javascript. E.g:

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

In the javascript:

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

Answer 5

OK it seems I need to use the scrollWidth of the containing div (thumb_window). Returns the same answer (1540) in all the browsers I've got installed.

More detail to follow.

Thanks everybody - what a marvellous site!

Answer 6

Here is a little table:-

             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