Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Tooltips script [strange problem]

Reply
Thread Tools

Tooltips script [strange problem]

 
 
Mario
Guest
Posts: n/a
 
      05-03-2005
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>
 
Reply With Quote
 
 
 
 
Jerome Bei
Guest
Posts: n/a
 
      05-03-2005
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
 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      05-03-2005
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
 
Reply With Quote
 
Toby Miller
Guest
Posts: n/a
 
      05-03-2005
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

 
Reply With Quote
 
Stephen Chalmers
Guest
Posts: n/a
 
      05-03-2005


Toby Miller <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) 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



 
Reply With Quote
 
Zifud
Guest
Posts: n/a
 
      05-04-2005
Stephen Chalmers wrote:
> Toby Miller <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) 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
 
Reply With Quote
 
Fred Oz
Guest
Posts: n/a
 
      05-04-2005
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
 
Reply With Quote
 
Stephen Chalmers
Guest
Posts: n/a
 
      05-04-2005
Zifud <(E-Mail Removed)> wrote in message
news:XfXde.1245$(E-Mail Removed)...
> Stephen Chalmers wrote:
> > Toby Miller <(E-Mail Removed)> wrote in message
> > news:(E-Mail Removed) 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



 
Reply With Quote
 
Toby Miller
Guest
Posts: n/a
 
      05-04-2005
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).

 
Reply With Quote
 
VK
Guest
Posts: n/a
 
      05-05-2005
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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
ToolTips and Tables -- how can I have tooltips on the cells of a column? Frank HTML 2 12-07-2006 10:05 PM
ANN: SPE 0.8.1.b IDE (realtime error underlining & script tooltips) SPE - Stani's Python Editor Python 1 12-21-2005 08:39 PM
Tooltips script [strange problem] Mario Javascript 0 05-04-2005 09:16 PM
Tooltips script [strange problem] Mario Javascript 0 05-04-2005 10:53 AM
Tooltips on datagrid titles Stevie_mac ASP .Net 2 07-25-2003 01:26 PM



Advertisments