471,338 Members | 1,063 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,338 software developers and data experts.

Tooltips script [strange problem]

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[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,"<br />");
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>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<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>
Jul 23 '05 #1
14 1548
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
Jul 23 '05 #2
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 <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[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>
<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[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,"<br>");
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>
<p><a href="#" title="Test| 123, abc.">Example</a></p>
<div style="height: 500px; background-color: tan;">spacer 2</div>
</body>
</html>

--
Rob
Jul 23 '05 #3
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

Jul 23 '05 #4


Toby Miller <tm*****@tobymiller.com> wrote in message
news:11*********************@g14g2000cwa.googlegro ups.com...
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?

--
Stephen Chalmers

Jul 23 '05 #5
Stephen Chalmers wrote:
Toby Miller <tm*****@tobymiller.com> wrote in message
news:11*********************@g14g2000cwa.googlegro ups.com...
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'


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?

--
Stephen Chalmers

--
Zif
Jul 23 '05 #6
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 <br /> index in order to scroll
appearance.


Save yourself some grief - have a browse here:

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

--
Fred
Jul 23 '05 #7
Zifud <Zi***@hotmail.com> wrote in message
news:Xf*****************@news.optus.net.au...
Stephen Chalmers wrote:
Toby Miller <tm*****@tobymiller.com> wrote in message
news:11*********************@g14g2000cwa.googlegro ups.com...

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?


In the context of a browser that doesn't support it.(NN4)
((document.documentElement && document.documentElement.scrollTop) ?
document.documentElement.scrollTop : document.body.scrollTop) 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?


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.

--
Stephen Chalmers

Jul 23 '05 #8
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/infotes...ut_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).

Jul 23 '05 #9
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.

Jul 23 '05 #10
VK wrote:
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?
--
Fred
Jul 23 '05 #11
Fred Oz <oz****@iinet.net.auau> writes:
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #12
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.

Jul 23 '05 #13
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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #14
VK wrote:
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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by David Ei | last post: by
3 posts views Thread by David Hayes | last post: by
3 posts views Thread by Wayne | last post: by
4 posts views Thread by Jeff Beem | last post: by
11 posts views Thread by Rich Grise | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.