M
Mario
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 <br /> 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.title)
{
a.onmouseover=function()
{
nD=d.createElement('div');nD.className='tooltip';nD.id='tooltip';
b.appendChild(nD);tV=this.title;
nD.innerHTML=this.title.replace(/\|/g,"<br />");
this.title='';
}
a.onmousemove=function()
{
if(nDe=d.getElementById('tooltip'))
{
e=e||event;
with(nDe.style){left=e.clientX+b.scrollLeft+'px';top=e.clientY+b.scrollTop+'px';}
}
}
a.onmouseout=function()
{
if(nDe=d.getElementById('tooltip'))b.removeChild(nDe);
this.title=tV;
}
}
}
}
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<a href="#" title="Test| 123, abc.">Example</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
</body>
</html>
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 <br /> 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.title)
{
a.onmouseover=function()
{
nD=d.createElement('div');nD.className='tooltip';nD.id='tooltip';
b.appendChild(nD);tV=this.title;
nD.innerHTML=this.title.replace(/\|/g,"<br />");
this.title='';
}
a.onmousemove=function()
{
if(nDe=d.getElementById('tooltip'))
{
e=e||event;
with(nDe.style){left=e.clientX+b.scrollLeft+'px';top=e.clientY+b.scrollTop+'px';}
}
}
a.onmouseout=function()
{
if(nDe=d.getElementById('tooltip'))b.removeChild(nDe);
this.title=tV;
}
}
}
}
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<a href="#" title="Test| 123, abc.">Example</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
</body>
</html>