使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一起工作

回答

相关问题