Javascript/xhtml - 發現與溢出div的內容的總寬度：隱藏

我正在寫一個基於javascript的照片庫與水平滾動縮略圖欄。Javascript/xhtml - 發現與溢出div的內容的總寬度：隱藏

>> My current work-in-progress is here <<

我想將縮略圖欄停止當它到達最後一個縮略圖滾動。爲此，我需要查找div內容的總寬度 - 最好不要加上所有縮略圖圖像和邊距的寬度。

我已經在我的window.onload函數中放置了一個提醒，這樣我就可以在不同的瀏覽器中測試各種元素的尺寸函數。目前它顯示了scrollWidth的值，它由IE瀏覽器報告爲1540px，由FireFox，Safari，Opera等報告爲920px。

值1540對我來說是正確的，誰能告訴我如何獲取這個值在FireFox等

來源

2009-01-08 Noel Walters

BTW它在Chrome返回1540太 – 2009-01-08 19:04:15

也許你只是引用了錯誤的元素。

document.getElementById('thumb_window').scrollWidth

在IE6和firefox 2的頁面上給我1540.那是你在找什麼？

順便說一句，在IE6中，縮略圖延伸過了正確的滾動條。

來源

2009-01-08 18:43:13

我認爲你正在尋找「offsetWidth」。對於跨瀏覽器體驗，可以滾動[寬度/高度]或偏移[寬度/高度]，以較大者爲準。

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

來源

2009-01-08 18:40:54

在Firefox 2都scrollWidth和offsetWidth是920對於他正在alert（）ing（「thumb_slide」）的元素。 – 2009-01-08 18:49:29

在IE7中它們都返回1540 – 2009-01-08 18:54:50

document.getElementById（'thumb_window'）。scrollWidth在IE6和firefox 2中返回1540.你的IE7說什麼？ – 2009-01-08 18:58:21

-1

你應該做的是找到在div的最後一個圖像元素，X位置相對其到達其容器中，加入它的寬度，也許需要添加其水平的利潤率，如果有任何。

僞代碼：

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

這將是相當容易的使用JQuery，因爲它具體地具有內置在功能用於獲取。去年（完成），獲得相對定位，並取餘量寬度。

來源

2009-01-08 18:41:14 Soviut

您可以在服務器端循環顯示圖像並將其寬度相加。（在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>

來源

2009-01-08 18:43:44

-1

這裏是一個小表： -

 
      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

來源

2009-01-08 19:33:49

Javascript/xhtml - 發現與溢出div的內容的總寬度：隱藏

回答

相關問題