使div的容器溢出來與marquee.js一起工作

我已經構建了一個隨機順序從數據庫加載歌曲的音樂播放器。我想在信息面板中顯示曲目信息。因爲我不知道藝術家/曲目名稱的長度，所以如果信息太大，我希望信息可以滾動以顯示字幕效果。我被告知瀏覽器的marquee標籤的實現是壞的，所以我有一個jquery插件爲我做了一個很好的平滑的方式（我假設auther知道爲什麼他們不好，並已經排序）。目前爲止這麼好。使div的容器溢出來與marquee.js一起工作

問題是，選取框無法解決它是否需要，因此我想在調用它之前運行檢查以查看是否有必要（即文本的長度是否保證）。

現在我敢肯定，這裏的問題是一個簡單的CSS之一，但我不能爲我的生命數字出來 - 你知道，當你已經在太長時間盯着的東西...

我我試圖做的是調用內部的div如果內部div的內容比外部div大，但無論我做什麼我似乎無法讓我的內部div水平伸展超出我的外部div除非我設置一個固定的寬度（這不是很有用，因爲我不知道內容的寬度）。

這裏是我的簡單的HTML（包裝中包含一些其他的東西飄來兩側）：

<div id="mplayerinfo_wrapper"><div id="mplayerinfo_trackinfo"><div id="ti_inner"></div></div></div>

這裏是我的簡單的CSS：

#mplayerinfo_wrapper{ 
    width:545px; 
    height:30px; 
    margin-top:32px; 
    display:inline-block; 
    float:left; 
} 

#mplayerinfo_trackinfo{ 
    height:30px; 
    width:238px; 
    display:inline-block; 
    overflow:hidden; 
    float:left; 
} 

#ti_inner{ 
    float:left; 
    height:30px; 
width:auto; 
}

我則希望使用jQuery獲得兩個元素的寬度，比較它們，如果內部比外部大，則像這樣啓動選取框：

var owidth=$('#mplayerinfo_trackinfo').width(); 
var iwidth=$('#ti_inner').width(); 
if(iwidth>owidth){$('#ti_inner').marquee();};

如果這不能通過CSS來解決，是否有用jQuery/JavaScript獲取內容寬度。有任何想法嗎？在此先感謝

來源

2012-02-17 WebweaverD

即使內部div中的內容大於外部div，內部div也只能獲得與其容器一樣大的內容。檢查內部div的文本長度並決定是否應該使用基於此的選取框可能更容易。 – 2012-02-17 21:48:31

這可能也有幫助 - http://stackoverflow.com/questions/143815/how-to-determine-using-javascript-if-html-element-has-overflowing-content – 2012-02-17 21:49:49

的ti_inner CSS需要有

white-space: nowrap;

，以防止格高度剛剛增加，

然後，我們可以檢查寬度，看是否需要一個大帳篷。

我更喜歡檢查外部mplayerinfo_trackinfo的scrollWidth和offsetWidth，而不是比較2個單獨的div的寬度，主要是這樣，margin和border，padding不會妨礙，但在本例中它並不真正物。

繼承人上的jsfiddle marquee if required

樣本對不起它在MooTools的，但我是新來的這一切網絡的東西我自己並沒有使用任何的JQuery但是從我讀過這應該是容易掉。

來源

2012-02-17 22:07:55 Dampsquid

它有 - 我有一種感覺，這是一個簡單的CSS問題 - 最優雅的解決方案1行2/3words - 謝謝 – WebweaverD 2012-02-17 22:36:39

您的CSS看起來適合你想要完成的。我會嘗試一下本作的比較：

 

    if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) { 
     $('#ti_inner').marquee(); 
    }

使用jQuery的inner和outer測量時，我有更好的結果。

來源

2012-02-17 21:46:16 Adam

由於您已經知道外部div的寬度，因此可能比較容易與該測量值進行比較，而不是動態詢問該寬度。我試着重新創建你的簡化程序，我碰到的問題是width（）函數只返回div的默認寬度，而不是由css修改的寬度。

來源

2012-02-17 22:04:29

對不起，我不完全明白。你是說，即使我可以讓內部的div溢出，我也無法使用.width（）來獲得它的寬度。另外，你建議我比較外部divs的寬度與什麼？ – WebweaverD 2012-02-17 22:24:58

使div的容器溢出來與marquee.js一起工作

回答

相關問題