Tooltips script [strange problem]

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>
 
J

Jerome Bei

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
 
R

RobG

Mario said:
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.

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.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.onmousemove=function(e) {
...
e = e || window.event;
...
with(nDe.style){left=e.clientX+b.scrollLeft+'px';top=e.clientY+b.scrollTop+'px';}
}
}
[...]

</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br

Ditch the pseudo-XHTML breaks, just use a single div with inline
style to create the space:

<div style="height: 500px;"></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.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(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.onmouseout=function() {
if ( nDe = d.getElementById('tooltip') ) {
b.removeChild(nDe);
}
this.title = tV;
}

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

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

Toby Miller

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
 
S

Stephen Chalmers

Toby Miller said:
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)
Presumably having first tested for: typeof document.body!='undefined'

What if document.documentElement.scrollTop happens to have a value of zero?
 
Z

Zifud

Stephen said:
Presumably having first tested for: typeof document.body!='undefined'

I'm curious. This is designed to run after the page is loaded, in
what context is it possible that document.body will be undefined?
What if document.documentElement.scrollTop happens to have a value of zero?

The expression will result in a value of zero being added. Do you
think that will cause a problem?
 
F

Fred Oz

Mario said:
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.

Save yourself some grief - have a browse here:

<URL:http://www.walterzorn.com/tooltip/tooltip_e.htm>
 
S

Stephen Chalmers

Zifud said:
I'm curious. This is designed to run after the page is loaded, in
what context is it possible that document.body will be undefined?

In the context of a browser that doesn't support it.(NN4)
zero?

The expression will result in a value of zero being added. Do you
think that will cause a problem?

My point is that in that test, if document.documentElement.scrollTop is
defined but has a value of zero, it will be the value of
document.body.scrollTop that is evaluated.
 
T

Toby Miller

I put together some examples of how you can get proper mouse and page
info. I think this is fairly cross-browser, but I've only tested in
IE5.5, IE6, NS7, Firefox1 and Safari1.2. Here are my test pages:

http://www.tobymiller.com/js/infotest_with_doctype.htm
http://www.tobymiller.com/js/infotest_without_doctype.htm

The file that's of particular interest in the test is:

http://www.tobymiller.com/js/common.js

Look for the functions "mouseinfo" and "pageinfo". Hopefully this can
prevent some folks from going through some of the headaches that I had
to.

-tm


p.s. Netscape 4 and IE 4 together only make up approximately 0.0075% of
users on the internet so I have stopped supporting those browsers
entirely (one source:
http://www.upsdell.com/BrowserNews/stat_trends.htm).
 
V

VK

The real problem is that the "#" anchor is traditionally equal to the
very top of the page in IE. Whoever tought you to use "a href='#'" for
false links - spit in his face for sleeping for the last 10 years.

<a href="javascript:void(0)" onclick=..."

and there are much better ways, but this one is to start with.
 
F

Fred Oz

VK said:
The real problem is that the "#" anchor is traditionally equal to the
very top of the page in IE. Whoever tought you to use "a href='#'" for
false links - spit in his face for sleeping for the last 10 years.

<a href="javascript:void(0)" onclick=..."

and there are much better ways, but this one is to start with.

I have no idea what "the real problem" you refer to is or to whom
your reply is directed.

For the record: precisely how does href="#" affect
onmouseover/move/out intrinsic events?
 
L

Lasse Reichstein Nielsen

Fred Oz said:
For the record: precisely how does href="#" affect
onmouseover/move/out intrinsic events?

It doesn't. Unless the code of these intrinsic events refer to the
href-attributes of course.

/L
 
V

VK

Hello - I got you guys here - see the OP: ;-) -
I wrote a tooltips script. I've noticed "small" problem occuring ...
etc...etc...

My "<a href="#">" explanation IMHO solves perfectly this VERY OLD
"little" problem.
 
M

Michael Winter

On 05/05/2005 19:30, VK wrote:

[snip]
My "<a href="#">" explanation IMHO solves perfectly this VERY OLD
"little" problem.

Use of the javascript pseudo-scheme is not a good solution, and
certainly nothing like a perfect solution. The FAQ reflects this fact.

Mike
 
R

Randy Webb

VK said:
The real problem is that the "#" anchor is traditionally equal to the
very top of the page in IE. Whoever tought you to use "a href='#'" for
false links - spit in his face for sleeping for the last 10 years.

And then spit in your for sleeping that same time?
<a href="javascript:void(0)" onclick=..."

Thats *worse*. But if you had bothered reading this groups FAQ then you
would know that. You would also know to quote what you are replying to.

http://jibbering.com/faq/#FAQ4_24

and there are much better ways, but this one is to start with.

Its not even a good place to start, much less to ever use.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,905
Latest member
Kristy_Poole

Latest Threads

Top