Tooltips script [strange problem]

**Jerome Bei** · Jul 23 '05, 07:35 PM

Re: Tooltips script [strange problem]

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.displa y="none"; in the mouseover event and
nDe.style.displ ay=""; 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

**RobG** · Jul 23 '05, 07:35 PM

Re: Tooltips script [strange problem]

Mario wrote:[color=blue]
> 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.
>[/color]

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.

[...][color=blue]
> <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]
>
> *************** *************** *************** *************** **********
> */[/color]

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.
[color=blue]
>
> onload=function (d,b,a,nD,nDe,t V,e)
> {[/color]

[...]
[color=blue]
> }
> a[i].onmousemove=fu nction()
> {
> if(nDe=d.getEle mentById('toolt ip'))
> {
> e=e||event;[/color]

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=fu nction(e) {
...
e = e || window.event;
...
[color=blue]
> with(nDe.style) {left=e.clientX +b.scrollLeft+' px';top=e.clien tY+b.scrollTop+ 'px';}
> }
> }[/color]

[...]
[color=blue]
> </head>
> <body>
> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br[/color]

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.

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

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:absolu te; margin-top:25px; background:#E5E 5E5;
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.getElementsBy TagName('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(n D);
tV = this.title;
nD.innerHTML= this.title.repl ace(/\|/g,"<br>");
this.title='';
}
a[i].onmousemove=fu nction(e) {
if ( nDe = d.getElementByI d('tooltip') ) {
e = e || window.event;
with ( nDe.style ) {
left = e.clientX + b.scrollLeft + 'px';
top = e.clientY + b.scrollTop + 'px';
}
}
}
a[i].onmouseout=fun ction() {
if ( nDe = d.getElementByI d('tooltip') ) {
b.removeChild(n De);
}
this.title = tV;
}

// Cancel navigation - remove if not required
a[i].onclick = function() {alert('hi');re turn 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

**Toby Miller** · Jul 23 '05, 07:36 PM

Re: Tooltips script [strange problem]

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.docu mentElement && document.docume ntElement.scrol lTop) ?
document.docume ntElement.scrol lTop : document.body.s crollTop)

cheers =)

-tm

**Stephen Chalmers** · Jul 23 '05, 07:36 PM

Re: Tooltips script [strange problem]

Toby Miller <tmiller@tobymi ller.com> wrote in message
news:1115147917 .174670.65460@g 14g2000cwa.goog legroups.com...[color=blue]
> 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.docu mentElement && document.docume ntElement.scrol lTop) ?
> document.docume ntElement.scrol lTop : document.body.s crollTop)
>[/color]
Presumably having first tested for: typeof document.body!= 'undefined'

What if document.docume ntElement.scrol lTop happens to have a value of zero?

--
Stephen Chalmers

**Zifud** · Jul 23 '05, 07:36 PM

Re: Tooltips script [strange problem]

Stephen Chalmers wrote:[color=blue]
> Toby Miller <tmiller@tobymi ller.com> wrote in message
> news:1115147917 .174670.65460@g 14g2000cwa.goog legroups.com...
>[color=green]
>>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.do cumentElement && document.docume ntElement.scrol lTop) ?
>>document.docu mentElement.scr ollTop : document.body.s crollTop)
>>[/color]
>
> Presumably having first tested for: typeof document.body!= 'undefined'[/color]

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?
[color=blue]
>
> What if document.docume ntElement.scrol lTop happens to have a value of zero?[/color]

The expression will result in a value of zero being added. Do you
think that will cause a problem?
[color=blue]
>
> --
> Stephen Chalmers
>
>
>[/color]

--
Zif

**Fred Oz** · Jul 23 '05, 07:36 PM

Re: Tooltips script [strange problem]

Mario wrote:[color=blue]
> 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.
>[/color]

Save yourself some grief - have a browse here:

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

--
Fred

**Stephen Chalmers** · Jul 23 '05, 07:37 PM

Re: Tooltips script [strange problem]

Zifud <Zifud@hotmail. com> wrote in message
news:XfXde.1245 $Zn.64839@news. optus.net.au...[color=blue]
> Stephen Chalmers wrote:[color=green]
> > Toby Miller <tmiller@tobymi ller.com> wrote in message
> > news:1115147917 .174670.65460@g 14g2000cwa.goog legroups.com...
> >
> > Presumably having first tested for: typeof document.body!= 'undefined'[/color]
>
> 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?[/color]

In the context of a browser that doesn't support it.(NN4)
[color=blue][color=green]
>>((document.do cumentElement && document.docume ntElement.scrol lTop) ?
>>document.docu mentElement.scr ollTop : document.body.s crollTop)[/color][/color]
[color=blue][color=green]
> > What if document.docume ntElement.scrol lTop happens to have a value of[/color][/color]
zero?[color=blue]
>
> The expression will result in a value of zero being added. Do you
> think that will cause a problem?[/color]

My point is that in that test, if document.docume ntElement.scrol lTop is
defined but has a value of zero, it will be the value of
document.body.s crollTop that is evaluated.

--
Stephen Chalmers

**Toby Miller** · Jul 23 '05, 07:37 PM

Re: Tooltips script [strange problem]

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:

tobymiller.com

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

tobymiller.com

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

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

tobymiller.com

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).

VK · Jul 23 '05, 07:38 PM

Re: Tooltips script [strange problem]

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="javascrip t:void(0)" onclick=..."

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

**Fred Oz** · Jul 23 '05, 07:38 PM

Re: Tooltips script [strange problem]

VK wrote:[color=blue]
> 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="javascrip t:void(0)" onclick=..."
>
> and there are much better ways, but this one is to start with.
>[/color]

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

**Lasse Reichstein Nielsen** · Jul 23 '05, 07:38 PM

Re: Tooltips script [strange problem]

Fred Oz <ozfred@iinet.n et.auau> writes:
[color=blue]
> For the record: precisely how does href="#" affect
> onmouseover/move/out intrinsic events?[/color]

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

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

VK · Jul 23 '05, 07:39 PM

Re: Tooltips script [strange problem]

Hello - I got you guys here - see the OP: ;-) -
[color=blue]
> I wrote a tooltips script. I've noticed "small" problem occuring ...[/color]
etc...etc...

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

**Michael Winter** · Jul 23 '05, 07:39 PM

Re: Tooltips script [strange problem]

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

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

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.

**Randy Webb** · Jul 23 '05, 07:40 PM

Re: Tooltips script [strange problem]

VK wrote:
[color=blue]
> 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.[/color]

And then spit in your for sleeping that same time?
[color=blue]
> <a href="javascrip t:void(0)" onclick=..."[/color]

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

[color=blue]
> and there are much better ways, but this one is to start with.[/color]

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

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

Tooltips script [strange problem]

Tooltips script [strange problem]

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment