473,407 Members | 2,312 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,407 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 1761
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: David Ei | last post by:
I'm working on a C# Windows Forms application that is leaking memory. I've been using the SciTech NetMem Profiler 2 (A really great tool, BTW) to track down leaks. I've found one related to...
3
by: David Hayes | last post by:
I've made tooltips work in Firefox*, but tooltip doesn't appear at the specified location until the SECOND time that the user passes the mouse over the location with the mouseover event. What I...
3
by: Wayne | last post by:
Is anybody aware of other software conflicting with Access and disabling the tool tips. I've had this problem in the past and now have it again after rebuilding my desktop and notebook. Both fail...
4
by: Cesario | last post by:
I'm trying to display formatted multi-line text in tooltips. It seems that the newline character works fine whereas the 'tab' character is causing problems and can't display properly. More...
4
by: Jeff Beem | last post by:
I have a class that inherits from TreeView. The treeview has tooltips for the nodes but they're showing up behind the form. Has anyone seen this? Are there any known fixes? Thanks in advance,...
9
by: timnels | last post by:
I have an issue where I have a user control that is launched into a floating form. At some point later, I allow the user to "unfloat" the user control by reparenting it on a split container in...
11
by: Rich Grise | last post by:
I've got a photo gallery on my client's website, and it has been suggested that, rather than show the whole thing full-size on one page (about 9 full- page images), I should put a thumbnails page...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.