Javascript / xhtml - reveal total content width in div with overflow: hidden
I am writing a javascript based photo gallery with horizontal scrolling thumbnail.
→ My current work in progress is here <<
I would like the miniature pane to stop scrolling when it gets to the last thumbnail. To do this, I need to find the full width of the div content - preferably without adding the width of all thumbnails and margins.
I put a warning in my window.onload function so that I can test different element sizing functions in different browsers. it currently shows scrollWidth which is reported as 1540px from IE and 920px from FireFox, Safari, Opera, etc.
The 1540 value is correct for my purposes, can anyone tell me how to get this value in FireFox, etc.
source to share
I think you are looking for "offsetWidth". For cross-browser there is either scrolling [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;
source to share
You can scroll server side images and add their width. (In php you can use getImagesize()
for this). Then you can get the full width of the whole image passed to javascript. For example:
$total_width=0;
foreach ($images as $image)
{
$info=getimagesize($image['file_path'];
$total_width=$total_width + $info[0];
}
In javascript:
<script type="text/javascript">
var total_width=<?=$total_width;?>;
</script>
source to share
What you need to do is find the last image element in the div, get its X position relative to its container, add its width, and possibly add its horizontal margins if any.
Pseudo-code:
total_width = (last_image.x - container.x) + last_image.width + last_image.left_margin + last_image.right_margin
This would be pretty easy to accomplish with jQuery as it specifically has built-in functions for getting .last (), getting relative positioning, and fetching fields.
source to share