jQuery的ui定位不断变化 [英] jquery ui positioning keep changing

问题描述

我开发了一个小的工具提示插件。它在IE，Chrome工作正常。在Firefox中它是第一次正常工作。第二次，如果我刷新工具提示是奇怪的定位..不知道发生了什么事情。

这里是步骤

<首先将鼠标指向第一个输入框--tooltip将在输入框附近

1. 然后向下滚动到第二个输入框，然后将鼠标悬停在第二个输入框上 - 第二个输入框附近的工具提示。


2. 单击firefox中的刷新按钮，不滚动。


3. 现在将鼠标悬停在第一个输入框上。您将看不到提示。


4. 清除历史记录并返回您应该看到的工具提示靠近输入框。

- > firefox 3.6.24 / tryed更新到firefox 8仍然是同样的问题$ / b>

该代码是在
HTTP：/ /jsfiddle.net/HE8QN/

复制到桌面，并尝试在您的Firefox ...

感谢

解决方案

From jQueryUI - 位置

注意：jQuery UI不支持定位隐藏元素。 b

（其结果是，它以某种方式忽略了页面的滚动偏移量）

通过给它下面的CSS属性使它成为一个'隐形块'： display：block 和 visibility：hidden right在使用 position（）函数之前，如果需要的话删除它们。
$ b 检查 http://jsfiddle.net/frozenkoi/RmKyC/ 我添加了一个CSS类（ .hiddenTip ），我添加，然后在调用之前和之后删除 tip.position（{...}）（您可以将样式添加到 tip.css。 ... 或者其他）

你还有另外一个问题。您在页面加载时计算工具提示的位置。当项目重新排列时会发生什么？也许文本重排，因为窗口被调整大小或内容被插入或元素更改大小。工具提示仍然显示在旧的预先计算的位置。我想这就是@Eben Roux在他的回答中所说的。

在我的小提琴中点击demo page的H1，你会看到它是如何得到的除了工具提示之外，所有东西都向下移动。

编辑：更新的小提琴： http://jsfiddle.net/frozenkoi/wKTnC/ 基于@ coool的修改。请注意，我添加了！important 到 display 和 visibility 和一些其他的小调整。

I developed a small tooltip plugin. it is working fine in IE,Chrome. In firefox it is working fine the first time. second time if I refresh the tooltip is oddly positioned..not sure what is happening.

here are the steps

1. in firefox first point your mouse over the 1st input box --tooltip will be near the input box

   1. then scroll down to second input box and mouse over the second input box - tooltip near the 2nd input box.
   2. click on the refresh button in firefox without scrolling up.
   3. now mouse over the first input box .. you will not see the tooltip..
   4. clear the history and come back you should see the tooltip near the input box.

   -->firefox 3.6.24/tryed updating to firefox 8 still the same problem

the code is in http://jsfiddle.net/HE8QN/

copy to desktop and try in your firefox...

thanks

解决方案

From jQueryUI - Position

Note: jQuery UI does not support positioning hidden elements.

(And the result is that it somehow ignores the page's scroll offset)

You can sorta bypass it by making it an 'invisible block' by giving it the following CSS properties: display: block and visibility: hidden right before using the position() function and then removing them if nessesary.

Check http://jsfiddle.net/frozenkoi/RmKyC/ I added a CSS class (.hiddenTip) that I added and then removed right before and after thecall to tip.position({...}) (you could add the style as inline with tip.css. ... or whatever)

You have another problem also. You calculate the tooltip's position when the page loads. What happens when the items are rearranged? Maybe the text reflows because the window got resized or content is inserted or an element changes size. The tooltip is still shown in the old pre-calculated location. I think this is what @Eben Roux was talking about in his answer.

Click the H1 that says 'demo page' in my fiddle and you'll see how it gets a margin above it and everything moves down, except the tooltips.

EDIT: Updated fiddle: http://jsfiddle.net/frozenkoi/wKTnC/ bassed on @coool's modifications. Note that I added !important to display and visibility and some other small tweaks.

这篇关于jQuery的ui定位不断变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！