问题标签 [outerwidth]

这是对错误关闭的问题的重做：jQuery 1.8 outer Height/Width not working

我遇到了同样的问题。现在返回 jQuery 对象而不是数字outerWidth。outerHeight

我们使用的是 2012 年 1 月 10 日发布的 jQuery UI 1.8.17。它不是一个超级旧的版本，所以我感觉其他人会看到这个。由于一些糟糕的 jQuery ui 插件，我们被锁定在这个版本中，因此目前无法选择升级。

如果我找到解决方案，我会回答这个问题。

这是一个演示问题的小提琴http://jsfiddle.net/delvarworld/yxDHu/（在“管理资源”中添加了 jQuery UI 版本）

更新：这是因为 jQuery UI 中的这一行：

在 jQuery 1.8.2 中错误地触发了这种情况：

因为即使size未定义，检查也是针对arguments.length. chainable 在这里应该是假的。你可以传入 undefined ，它仍然会使参数成为长度为 1 的对象。有人需要阅读他们的 JS ;)

我在 div 中有一个导航栏（顶部菜单）。如果菜单的宽度大于外部 div 的宽度，我必须隐藏其余的菜单元素。不幸overflow:hidden的是我不能用于 div 。所以我使用 .outerWidth()函数来计算 div 的总宽度和每个 elment(li) 的宽度，并隐藏溢出元素。所以我的问题是它在firefox（19.0），IE（8）中工作正常！，但不是在chrome中。在 chrome 中，所有元素都是隐藏的。当我改变时问题解决了

$(document).ready(function() {});到$(window).load(function() {});

但是随后，总 ul 显示了几分之一秒，然后它被隐藏（IE，FF 它仍然可以正常工作）。有没有更好的解决方案？或者任何不同的逻辑。

样本

http://jsfiddle.net/RSA3X/4/

我的类似情况

我正在尝试在 Jquery 中创建以下内容，我要做的是仅当视口比 .container div 大时才将格式应用于 div。我已经写了以下内容，但我不确定我是否做得正确，因为我的 Jquery 不是那么好。

..................................................... ..

我在这里创建了一个 js fiddle，它现在似乎正在工作。

http://jsfiddle.net/QgyPN/

我正在将 div 设置为更宽，在动画之后我想将以下列表的宽度设置为与新动画 div 的宽度完全相同，并将其移动到它的下方。

奇怪的是，在调整大小时，它只会调整到一个很小的宽度，一旦再次单击，它将在一毫秒内保持所需的大小。这可能不清楚。

这是一个小提琴

所以，我希望列表看起来是整个图像+名称栏的宽度，我想将它完全移动到它下面。

谢谢！

Edit 1 (reduced the problem to a jsfiddle):

I removed some unnecessary detail of the original problem.

I am trying to center a popup in the window. Because of how it will be used in the original context, the popup's width will be dynamic. Its only contents will be text, but it won't be known how long that text will be. In most cases it will fit on one line, but if the text is longer and the user has a lower screen resolution, it may need to occupy 2 lines, and I would like to keep all the text on the screen. The text is static in the jsfiddle, so that is obviously not what is causing the issue. I'm just clarifying in case anyone is wondering why I haven't tried setting a width for the popup. I'm using jquery to get the width using outerWidth() and $(window).resize() to trigger the centering function when the browser window is resized.

It works fine as long as the popup's width is smaller than the element containing it. I would like for the popup to just take the full width of its container if it is made small enough that the text has to go to two lines. As you will see in the video below, if you make a large adjustment in the browser window size, the width isn't always being reported correctly, which is causing the element to have a space on the left side instead of being centered. In other words, outerWidth() is reporting a width different than what is being rendered by the browser.

See this video for a demonstration of the problem: http://youtu.be/Tnq6nrrDKvw

This is happening for me in Firefox, Chrome, IE, Opera, and Safari. Perhaps it is a problem with jquery's outerWidth function. Or perhaps I don't understand something about how it is supposed to work. Is there another method to accomplish what I'm trying to do?

Here is the javascript, nothing too complicated:

The only important css is that the popup has position: fixed and no set width or height. If I set the width of the popup, it sticks along the left side like it should, but the text extends beyond the right boundary. I would like to keep all the text on the screen and have it take the full width and jump some text down to the next line if needed. When the width gets low enough for that to happen, I just want the notice to occupy the entire width of the viewing area.

http://jsfiddle.net/dnag/qHjVG/5/

Edit 2 (the solution):

This is the solution I ended up using thanks to the help I got.

http://jsfiddle.net/dnag/qHjVG/44/

Instead of repositioning the popups, the popups are left with an auto width and display: inline-block. They are contained inside a div with fixed positioning. When the window is resized, the containing div is resized and repositioned. You can specify how much horiziontal space you want outside of the popups when the windows is reduced by changing the number in the function. There might be a way to do this with css only, but I'm just happy to have something functional at the moment.

在 HTML 中，我创建了标题，我想使用绝对位置将其水平居中（因为它必须落在另一个元素上）。

我将使用以下代码document ready

虽然我记录<h1>它输出 232px（在这种情况下），而实际输出应该是 242px。outerWidth 仅在使用以下 PHP 代码执行的标题中不正确：

上面显示的相同 jQuery 代码在window resize. 当浏览器调整大小时，outerWidth 的结果也会被记录，而且，正确！

因此，我将尝试通过添加$(window).resize();到来创建某种 hack document ready，但这不起作用。

在这个 Stack Overflow 问题中，我发现window load必须使用 PHP 之后运行 jQuery。但是在窗口加载中添加$(window).resize();或完整的 jQuery 替换代码都不起作用..

HTML

CSS

jQuery

问题

如果我调整窗口大小，则元素不会居中，因为outerWidth() 和outerHeight() 是错误的。

刷新后问题消失。

火狐上的测试结果

默认值：元素大小 - 670x134（好）

768x1024：元素大小 - 198x254（错误）- 670x134（刷新后良好）

360x640：元素大小 - 198x254（错误）- 360x182（刷新后良好）

问题

知道为什么会出现此问题以及如何解决吗？

笔记

我不希望元素具有固定的宽度或高度。

我正在尝试计算子菜单相对于子菜单的总宽度。以下代码仅在第一个子菜单中正常工作，第二个子菜单需要在宽度上手动 +1 才能使其工作，否则最后一项将被向下推。

正确的例子：

错误的例子：

宽度 +1

除了背景颜色之外，奇数和偶数项目之间没有任何其他区别。

我发现以下类似的问题无法解决我的问题： Calculate total width of Children with jQuery

我有一个水平滚动的图像库。包含所有图像的<div>其宽度是通过汇总所有子项的outerWidths 动态生成的。

以下是画廊的设置方式：

的宽度categoryImageArea是使用以下函数生成的：

当我的浏览器窗口最大化（1900 x 1280）时，效果很好：

但是，当我的浏览器窗口大小减半时，它不起作用。（对不起，截图很难看——最后两个被推到下一行）。

我很困惑为什么会这样，所以我将 JQuerychange()函数（上图）alert设置为 的值，width因为它在这两种情况下都向它添加了值。真奇怪。

• 大视口（好）：0 > 984 > 1969 > 2953 > 3937 > 4921
• 半视口（坏）：0 > 656 > 1312 > 1968 > 2624 > 3280

所以我的问题是：到底是什么让$(element).outerWidth(true) SO 的价值因为我的浏览器视口不同而不同？

作为参考，应用的样式categoryImage是：

我试图通过计算父元素和子元素的宽度和高度差异以及使用差异作为边距或填充来在其父元素中横向和垂直居中。

我正在使用这个公式计算必要的空间：

然后，我使用一个函数循环一个方向数组，该函数允许我使用函数参数更改应用于子元素的 css。基本上，该功能允许我选择是否要使用边距或填充。

问题

虽然我的代码返回顶部、右侧、左侧和底部的预期值，但它不使用填充来实现吗？知道是什么原因造成的吗？

HTML

CSS

JAVASCRIPT

CODEPEN 链接-链接