Scot Schlinger

Scot,

> JS: attached (the function in question is getmouseposition which is
> called from method tooltip)

This is your problem:
var ie5 = (document.getElementById && document.all);
var ns6 = (document.getElementById && !document.all);
var ua = navigator.userAgent.toLowerCase();
var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);

That sniffer is complete nonsense. Please remove it.

I have documented how to calculate the mouse position after a mouse event
here:
http://www.howtocreate.co.uk/tutorials/javascript/eventinfo
See the section called "Detecting the mouse coordinates when it moves over
a positioned element".

Hope this helps.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Scot,

> In order to make this script work, don't I need some type of "sniffer?"

Normally I would say "no, absolutely not". Most scripts should never, ever
use sniffers, and if you start out by relying on them, you are heading in
the wrong direction. Sniffers are generally a big pile of rubbish, asking
for trouble, since they make ridiculous and inaccurate assumptions about
browser capabilities (as you can see by the fact that yours is not working).
What you should do is detect a browser's _capabilities_ as use them
accordingly.

However, in the case of mouse position, it is a mess, and unfortunately
there are some (older) browsers that get it wrong. It is one of the only
places where a sniffer is actually needed, but it needs to be done carefully
so it uses a capability detect first, then detects only the browsers that
get it wrong, and fixes them, without harming the browsers that get it
right. That is what my script does.

As it happens the three browsers that got it wrong have all been replaced
with versions that get it right, so in theory the sniffer I use could
potentially be removed now (I only keep it for the few remaining users of
the older versions of those browsers).

> If so, should I use the one on this page
> http://www.howtocreate.co.uk/tutorials/javascript/dhtml of your site?

Yes. Use my script for getting the mouse position, not the one you are
currently using.

Something like this should work (I did a few quick tests with your page, and
it seemed to work just fine):

function getmouseposition(e) {
  if( !e ) { e = window.event; }
  if( !e || !document.getElementById ) { return; }
  var xcoord, ycoord;
  if( typeof( e.pageX ) == 'number' ) {
    xcoord = e.pageX; ycoord = e.pageY;
  } else if( typeof( e.clientX ) == 'number' ) {
    xcoord = e.clientX; ycoord = e.clientY;
    var badOldBrowser = (
     window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) ||
     ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 )
     || ( navigator.vendor == 'KDE' );
    if( !badOldBrowser ) {
      if( document.body &&
        ( document.body.scrollLeft || document.body.scrollTop ) ) {
        xcoord += document.body.scrollLeft;
        ycoord += document.body.scrollTop;
      } else if( document.documentElement && (
        document.documentElement.scrollLeft ||
        document.documentElement.scrollTop ) ) {
        xcoord += document.documentElement.scrollLeft;
        ycoord += document.documentElement.scrollTop;
      }
    }
  } else { return; }
  global_kitID.style.left = (xcoord+offsetx) + 'px';
  global_kitID.style.top = (ycoord+offsety) + 'px';
}

But please, read the page where I explain how this script works, it will
help you to understand why I am doing what I do in this script.

Scot,

> Now I am onto another project, but I don't know if the scripts I have
> found on the web are quite what I am looking for and/or if they are the
> best way to do things.

I generally do not like to make any recommendations about anyone else's
scripts. The one you were looking at works, and the markup it uses is not
too ugly. It is up to you to decide if it fits in with your site and your
needs.

Scot,

> Is this true for every browser?

Those should work in all browsers that support DOM:
http://www.howtocreate.co.uk/tutorials/javascript/domintroduction

Scot,

> document.getElementById('<id>').style.borderbottomcolor = '#fff';

1. I assume you are not actually putting the < and > characters in.

2. As with everything in JavaScript, it is case sensitive. See what you
wrote in your last email, you got it right there :)

> I don't see any difference on the screen in ff 1.05 and ie 6.x.

Please include results for Opera in any future communication of this
kind.

Scot,

> document.getElementById('<id>').style.borderBottomColor = '#fff';

Yep. But...

You told it not to display the bottom border:
border-bottom: none;
The border that you see is produced by the box underneath it. So you are
changing the colour, but the size of the border is still none. Try this
instead:

document.getElementById('<id>').style.borderBottom = '1px solid #fff';

Note that you could simplify this:
<a href="javascript:showTips('link_1');" id="link_1"
  onmouseover="changeColor(document.getElementById('link_1'));">1 - 10</a>
To this:
<a href="javascript:showTips('link_1');" id="link_1"
  onmouseover="changeColor(this);">1 - 10</a>
Since it is inside the event handler for that element, the word 'this' is a
reference to the element itself.

Scot,

> You don't happen to have a book out, do you?

By way of explanation;
http://www.howtocreate.co.uk/aboutsite.html#saveprint

> Is there a way within that unordered list that I can look at the selected
> id and turn them off more "dynamically" in case I have to add, subtract,
> or change the id value of a tab?

Sure, just use a better condition in your 'for' loop than 'j <= 5'. Try
getting a reference to an element, and continue if it worked:

function changeBackgroundColor() {
 for( var j = 1, el; el = document.getElementById('link_'+j); j++ ) {
  el.style.background = '#dde';
 }
}

> I was wondering why my tabs cause the page to scroll back to the top
> if you scroll down the page and then click on a link?

Typically happens if you are using # as your link href, but forgetting to
return false in the onclick event handler.

In your case, you say this:
return showTips(...)
But showTips does not return any value, so you are returning undefined
instead of false. Put 'return false' at the end of your showTips
function.

Scot,

> I was looking on your site, but couldn't find the following on your site:
> if javascript is enabled by the client or not.

http://www.howtocreate.co.uk/tutorials/javascript/incorporate
<noscript>

Scot,

The page has what you need. Just use the <noscript> tag, as shown on that
page. You can put your message in there, and it will show up if they have
JavaScript disabled.