工具提示脚本[奇怪的问题] [英] Tooltips script [strange problem]

查看：47 发布时间：2019/6/5 10:24:03 javascript

本文介绍了工具提示脚本[奇怪的问题]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我写了一个工具提示脚本。我注意到小了

使用IE浏览器时出现的问题。

如果网站足够长，可以显示滚动条并且我们移动鼠标

指示符<链接上的
然后滚动跳转。一秒又回到

之前的位置。

我还没有在其他剧本中看到它。我不知道出了什么问题...

我附上我的脚本 索引以滚动

外观。

< html>

< head>

< meta http-equiv =" Content-Type" content =" text / html;

charset = iso-8859-2" />

< style type =" text / css">

body

{

text-align：center;

}

..tooltip

{

border-width：1px;

border-style：dashed;

border-color：＃696969;

position：absolute;

margin-top：25px;

背景：＃E5E5E5;

颜色：＃000000;

填充：2px;

}

< / style>

< script type =" text / javascript">

/ **************************************** ********** ********************

*

工具提示脚本v .1.0

版权所有（c）2005 Mariusz''Vir''Grabczynski

免费用于非商业用途

/>
[请保留此评论]

Parametrs（在''title''属性中）：

| - 新线[应该直接放在单词后面 - 没有空格]

************************ ****************************** ********************

* /

onload = function（d，b，a，nD，nDe，tV，e）

{

d = document; b = d.body; a = b.getElementsByTagName（''a''）;

for（i = 0; i< a.length; i ++）

{

if（a [i] .title）

{

a [i] .onmouseover = function（）

{

nD = d.createElement（''div''）; nD.className =''tooltip''; n D.id =''tooltip'';

b.appendChild（nD）; tV = this.title;

nD.innerHTML = this.title.replace（/ \ | / g，" "）;

this.title ='''';

}

a [i] .onmousemove = function（）

{

if（nDe = d.getElementById（''tooltip''））

{

e = e || event;

with（nDe.style）{left = e.clientX + b.scrollLeft +''px''; t op = e.clientY + b.scrollTop +''px' ';}
}

}

a [i] .onmouseout = function（）

{

if （nDe = d.getElementById（''tooltip''））b.removeChild（n De）;

this.title = tV;

}

}

}

}

< / script>

< / head>

< body>

 

 

 

 

 

 

 

< a href ="＃"标题= QUOT;试验| 123，abc。">示例< / a>

 ; ;

 ; 

 ; 

 ; 

 

 

< / body>

< / html>

解决方案

这种行为似乎是因为元素被渲染成DOM作为身体的最后一个孩子进入DOM元素。

甚至设置nD.style.display =" none" ;;在鼠标悬停事件中和

nDe.style.display ="" ;;在mousemove事件中具有相同的效果...

我猜你将不得不忍受它，当IE渲染一个新对象时

DOM，页面滚动到那个位置一秒......

- 杰罗姆

Mario写道：
我写了一个工具提示脚本。我注意到小了使用IE浏览器时出现问题。
如果网站足够长，可以显示滚动条，我们会在链接上移动鼠标
指示符，然后滚动跳转 ;一秒钟然后回到之前的位置。
我还没有在其他剧本中看到它。我不知道出了什么问题...
我附上了我的脚本 索引是为了滚动
外观。

不知道你的错误究竟是什么，但下面是一个版本

有点工作。 scrollTop不是您要寻找的偏移量，

''tip''显示位于元素上方，取决于滚动的
页面。

以下几个提示。

[...]< script type =" text / javascript">

/ ************************************************** ********************
*
工具提示脚本v.1.0

版权所有（c）2005 Mariusz'' Vir''Grabczynski

免费用于非商业用途

[请保留此评论完整]

参数（在''title''属性中）：

| - 新线[应直接放在文字后面 - 没有空间]

**************************** ********************** ********************
* /

为什么压缩代码，只是在评论上浪费了太多空间？对于

，为了在这里发布，清楚地阻止和空间你的代码使

易于阅读和玩耍。

我已修改声明以识别此

组的贡献并纠正（众多）拼写错误。

onload = function（d，b，a，nD， nDe，tV，e）
{

[...]

}
a [i] .onmousemove = function（）
{
if（nDe = d.getElementById（''tooltip''））
{
e = e || event;

这似乎是为了让脚本在Geko

浏览器中运行，但它并没有定义''e''开头。另外，对我来说IE

给出了错误，除非我使用''window.event''：

a [i] .onmousemove = function（e）{

...

e = e || window.event;

...

with（nDe.style）{left = e.clientX + b.scrollLeft +''px''; t op = e。 clientY + b.scrollTop +''px'';}
}
}

[...]

< / head>
< body>
 < / div>

将更加简单地完成工作。

[...]

< a href ="＃"标题= QUOT;试验| 123，abc。">示例< / a>

我最初怀疑使用href ="＃"是你的问题，但它没有出现
。您打算将其用作实际链接吗？如果没有，

添加一个返回false的onclick函数，并使用非JS浏览器的链接做一些有用的事情

。

[...]

下面部分修复的代码：

<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"

" http：//www.w3.org/TR/html4/strict.dtd">

< title> LI play< / title>

< meta http-equiv =" Content-Type"

content =" text / html; charset = ISO-8859-2">

< style type =" text / css">

body

{text-align：center; }

..tooltip

{border-width：1px;边框样式：虚线; border-color：＃696969;

position：absolute;边距：25像素;背景：＃E5E5E5;

颜色：＃000000;填充：2px;

}

< / style>

< script type =" text / javascript">

/ *工具提示脚本v.1.0

版权所有（c）2005 Mariusz''Vir''Grabczynski

免费用于非商业用途

由匿名贡献者修改以修复许多脚本错误。

[请保留此评论完整]

参数（在''中title''属性）：

| - 新行[应该直接放在单词

- 没有空格]

* /

window.onload = function（d，b， a，nD，nDe，tV，e）{

d =文件;

b = d.body;

a = b.getElementsByTagName（'' a''）;

for（i = 0; i< a.length; i ++）{

if（a [i] .title）{

a [i] .onmouseover = function（）{

nD = d.createElement（''div''）;

nD.className =''tooltip '';

nD.id =''tooltip'';

b.appendChild（nD）;

tV = this.title;

nD.innerHTML = this.title.replace（/ \ | / g，" "）;

this.title =''' ';

}

a [i] .onmousemove = function（e）{

if（nDe = d.getElementById（''tooltip'） '））{

e = e || window.event;

with（nDe.style）{

left = e.clientX + b.scrollLeft +''px'';

top = e.clientY + b.scrollTop +''px'';

}

}

}

a [i] .onmouseout = function（）{

if（nDe = d.getElementById（''tooltip''））{

b.removeChild（nDe） ;

}

this.title = tV;

}

//取消导航 - 如果不需要删除

a [i] .onclick = function（）{alert（''hi''）; return false;};

} 
}

}

< / script>

< / head>

< body>

< div style =" height：500px; background-color：tan;"> spacer 1< / div>

< a href ="＃"标题= QUOT;试验| 123，abc。">示例< / a>

< div style =" height：500px; background-color：tan;"> spacer 2< / div>

< / body>

< / html>

-

Rob

问题是你最有可能在怪异模式下使用IE6所以你

不能仅仅依靠document.body来获取顶部滚动位置。

替换它：

b .scrollTop

：
（（document.documentElement&& document.documentElement.scrollTop）？

document.documentElement.scrollTop：document.body.scrollTop）

欢呼=）

-tm

I wrote a tooltips script. I''ve noticed "small" problem occuring while
using the IE browser.
If a site is long enough for a scroll to appear and we move the mouse
indicator
on the link then the scroll "jumps" for a second and goes back to the
previous position.
I haven''t seen it in other scripts. I have no idea what is wrong...
I enclose my script full of index in order to scroll
appearance.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-2" />
<style type="text/css">

body
{
text-align:center;
}

..tooltip
{
border-width:1px;
border-style:dashed;
border-color:#696969;
position:absolute;
margin-top:25px;
background:#E5E5E5;
color:#000000;
padding:2px;
}

</style>
<script type="text/javascript">

/ ************************************************** ********************
*
Tooltips script v.1.0

Copyrights (c) 2005 Mariusz ''Vir'' Grabczynski

free for non-commercial use

[please leave this comment intact]

Parametrs (in ''title'' attributes):

| - new line [should be placed directly after words - whithout space]

************************************************** ********************
*/

onload=function(d,b,a,nD,nDe,tV,e)
{
d=document;b=d.body;a=b.getElementsByTagName(''a'');
for(i=0;i<a.length;i++)
{
if(a[i].title)
{
a[i].onmouseover=function()
{
nD=d.createElement(''div'');nD.className=''tooltip'';n D.id=''tooltip'';
b.appendChild(nD);tV=this.title;
nD.innerHTML=this.title.replace(/\|/g," ");
this.title='''';
}
a[i].onmousemove=function()
{
if(nDe=d.getElementById(''tooltip''))
{
e=e||event;
with(nDe.style){left=e.clientX+b.scrollLeft+''px'';t op=e.clientY+b.scrollTop+''px'';}
}
}
a[i].onmouseout=function()
{
if(nDe=d.getElementById(''tooltip''))b.removeChild(n De);
this.title=tV;
}
}
}
}

</script>
</head>
<body>
 
 
 
 
 
 
 
<a href="#" title="Test| 123, abc.">Example</a>
 
 
 
 
 
 
</body>
</html>

解决方案

This behaviour seems to be due to the fact that the element is rendered
into the DOM as last child of the body element.

Even setting nD.style.display="none"; in the mouseover event and
nDe.style.display=""; in the mousemove event has the same effect...

I guess you''ll have to live with it, when IE renders a new object into
the DOM, the page scrolls to that position for a second ...

--Jerome

Mario wrote:
I wrote a tooltips script. I''ve noticed "small" problem occuring while
using the IE browser.
If a site is long enough for a scroll to appear and we move the mouse
indicator
on the link then the scroll "jumps" for a second and goes back to the
previous position.
I haven''t seen it in other scripts. I have no idea what is wrong...
I enclose my script full of index in order to scroll
appearance.

Don''t know exactly what your error was, but below is a version that
kinda works. scrollTop is not the offset you are looking for, the
''tip'' appears displaced higher above your element depending on the
page has been scrolled.

A couple of tips below too.
[...] <script type="text/javascript">

/ ************************************************** ********************
*
Tooltips script v.1.0

Copyrights (c) 2005 Mariusz ''Vir'' Grabczynski

free for non-commercial use

[please leave this comment intact]

Parametrs (in ''title'' attributes):

| - new line [should be placed directly after words - whithout space]

************************************************** ********************
*/
Why compress the code, only to waste so much space on comments? For
the sake of posting here, clearly block and space your code to make
it easy to read and play with.

I have modified the statement to recognise the contribution of this
group and corrected the (numerous) spelling errors.

onload=function(d,b,a,nD,nDe,tV,e)
{
[...]
}
a[i].onmousemove=function()
{
if(nDe=d.getElementById(''tooltip''))
{
e=e||event;
This appears to be an attempt to make the script work in Geko
browsers, but it doesn''t define ''e'' to start with. Also, for me IE
gave an error unless I used ''window.event'' :

a[i].onmousemove=function(e) {
...
e = e || window.event;
...
with(nDe.style){left=e.clientX+b.scrollLeft+''px'';t op=e.clientY+b.scrollTop+''px'';}
}
}
[...]
</head>
<body>
 </div>

will do the job much more simply.

[...]
<a href="#" title="Test| 123, abc.">Example</a>

I initially suspected that using href="#" was your problem, but it
appears not. Do you intend to use this as an actual link? If not,
add an onclick function that returns false and do something useful
with the link for non-JS browsers.

[...]

Partially fixed code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<title> LI play </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-2">
<style type="text/css">

body
{ text-align:center; }

..tooltip
{ border-width:1px; border-style:dashed; border-color:#696969;
position:absolute; margin-top:25px; background:#E5E5E5;
color:#000000; padding:2px;
}
</style>
<script type="text/javascript">
/* Tooltips script v.1.0
Copyrights (c) 2005 Mariusz ''Vir'' Grabczynski
free for non-commercial use

Modified by anonymous contributors to fix numerous script errors.
[please leave this comment intact]

Parameters (in ''title'' attributes):
| - new line [should be placed directly after words
- without space]
*/
window.onload = function ( d, b, a, nD, nDe, tV, e){
d = document;
b = d.body;
a = b.getElementsByTagName(''a'');
for ( i=0; i<a.length; i++) {
if ( a[i].title ) {
a[i].onmouseover = function() {
nD = d.createElement(''div'');
nD.className = ''tooltip'';
nD.id = ''tooltip'';
b.appendChild(nD);
tV = this.title;
nD.innerHTML= this.title.replace(/\|/g," ");
this.title='''';
}
a[i].onmousemove=function(e) {
if ( nDe = d.getElementById(''tooltip'') ) {
e = e || window.event;
with ( nDe.style ) {
left = e.clientX + b.scrollLeft + ''px'';
top = e.clientY + b.scrollTop + ''px'';
}
}
}
a[i].onmouseout=function() {
if ( nDe = d.getElementById(''tooltip'') ) {
b.removeChild(nDe);
}
this.title = tV;
}

// Cancel navigation - remove if not required
a[i].onclick = function() {alert(''hi'');return false;};

}
}
}
</script>
</head>
<body>
<div style="height: 500px; background-color: tan;">spacer 1</div>
<a href="#" title="Test| 123, abc.">Example</a>
<div style="height: 500px; background-color: tan;">spacer 2</div>
</body>
</html>

--
Rob

The problem is that you''re most likely using IE6 in quirks mode so you
can''t rely solely on document.body to grab the top scroll position.

replace this:

b.scrollTop

with this:

((document.documentElement && document.documentElement.scrollTop) ?
document.documentElement.scrollTop : document.body.scrollTop)

cheers =)

-tm

这篇关于工具提示脚本[奇怪的问题]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

工具提示脚本[奇怪的问题] [英] Tooltips script [strange problem]

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

工具提示脚本[奇怪的问题] [英] Tooltips script [strange problem]

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭