Tooltips script [strange problem]

Discussion in 'Javascript' started by Mario, May 3, 2005.

  1. Mario

    Mario Guest

    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>
    Mario, May 3, 2005
    #1
    1. Advertising

  2. Mario

    Jerome Bei Guest

    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
    Jerome Bei, May 3, 2005
    #2
    1. Advertising

  3. Mario

    RobG Guest

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

    --
    Rob
    RobG, May 3, 2005
    #3
  4. Mario

    Toby Miller Guest

    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
    Toby Miller, May 3, 2005
    #4
  5. Toby Miller <> wrote in message
    news:...
    > 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
    Stephen Chalmers, May 4, 2005
    #5
  6. Mario

    Zifud Guest

    Stephen Chalmers wrote:
    > Toby Miller <> wrote in message
    > news:...
    >
    >>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
    Zifud, May 4, 2005
    #6
  7. Mario

    Fred Oz Guest

    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
    Fred Oz, May 4, 2005
    #7
  8. Zifud <> wrote in message
    news:XfXde.1245$...
    > Stephen Chalmers wrote:
    > > Toby Miller <> wrote in message
    > > news:...
    > >
    > > 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
    Stephen Chalmers, May 4, 2005
    #8
  9. Mario

    Toby Miller Guest

    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).
    Toby Miller, May 4, 2005
    #9
  10. Mario

    VK Guest

    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.
    VK, May 5, 2005
    #10
  11. Mario

    Fred Oz Guest

    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
    Fred Oz, May 5, 2005
    #11
  12. Fred Oz <> 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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, May 5, 2005
    #12
  13. Mario

    VK Guest

    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.
    VK, May 5, 2005
    #13
  14. 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.
    Michael Winter, May 5, 2005
    #14
  15. Mario

    Randy Webb Guest

    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
    Randy Webb, May 6, 2005
    #15
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SPE - Stani's Python Editor
    Replies:
    1
    Views:
    273
    SPE - Stani's Python Editor
    Dec 21, 2005
  2. Frank
    Replies:
    2
    Views:
    497
    BootNic
    Dec 7, 2006
  3. RichardOnRails
    Replies:
    0
    Views:
    70
    RichardOnRails
    Jan 30, 2008
  4. Mario

    Tooltips script [strange problem]

    Mario, May 4, 2005, in forum: Javascript
    Replies:
    0
    Views:
    83
    Mario
    May 4, 2005
  5. Mario

    Tooltips script [strange problem]

    Mario, May 4, 2005, in forum: Javascript
    Replies:
    0
    Views:
    69
    Mario
    May 4, 2005
Loading...

Share This Page