BlueDigit Posted August 2, 2010 Share Posted August 2, 2010 I've gotten this tooltip to work just like I want it to—in Opera 10.53 and Internet Explorer 6, with the latter probably being more of a bad sign than a good one. Unfortunately, it bugs out in Firefox 3.0 and 3.6, K-Melon 1.5.3, and Flock 3.0, and I've got no idea why. If I remove the scroll-detection model block, then ‹asdf› appears, but only in its normal position, not where the cursor is. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <title>test</title><script type="text/javascript"><!--var tooltip = function(a, b, c, d) { // ‹a› is the element id. // ‹b› is the display type. // ‹c› determines whether we're setting new text to be displayed or not. // ‹d› is either a number used to select from the genericText array // or a string of text. // If the browser is Internet Explorer, use its window scroll-detection model. if (navigator . appName == "Microsoft Internet Explorer") { var vertical = event . clientY + document . body . scrollTop; var horizontal = event . clientX + document . body . scrollLeft; } else if (navigator . appName != "Microsoft Internet Explorer") { var vertical = event . clientY + window . pageYOffset; var horizontal = event . clientX + window . pageXOffset; } var genericText = new Array();/* DESCRIPTION */ genericText[0] = "Explanation 1.";/* DESCRIPTION */ genericText[1] = "Explanation 2."/* DESCRIPTION */ genericText[2] = "Explanation 3." if (c == 0 || c == 1) { document . getElementById (a) . style . display = b; document . getElementById (a) . style . top = vertical + "px"; document . getElementById (a) . style . left = horizontal + 15 + "px"; if (c == 0) { document . getElementById (a) . innerHTML = d; } else if (c == 1) { document . getElementById (a) . innerHTML = genericText[d]; } } else if (c == 2) { document . getElementById (a) . style . top = vertical + "px"; document . getElementById (a) . style . left = horizontal + 15 + "px"; } else { alert ('lol error\n\n\ncheck dat script yo'); } }//--></script><style type="text/css">body { padding: 0px; margin: 0px; }div#asdf { display: none; float: right; position: absolute; background-color: #FF0000; }</style></head><body><span onmouseover="tooltip('asdf', 'inline', 1, 0);" onmousemove="tooltip('asdf', 'inline', 2, 0);" onmouseout="tooltip('asdf', 'none', 0, '');">TEST</span><div id="asdf">huh</div></body> Edit: fixed the doctype and added + "px" to the end of the parts controlling ‹asdf›'s top and left properties, but still no dice. Link to comment Share on other sites More sharing options...
BlueDigit Posted August 7, 2010 Author Share Posted August 7, 2010 Hello hello? Anybody willing to try and help? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 7, 2010 Share Posted August 7, 2010 try adding event to function variables passedvar tooltip = function(event, a, b, c, d)<span onmouseOver="tooltip(event,'asdf', 'inline', 1, 0);" onmouseMove="tooltip(event,'asdf', 'inline', 2, 0);" onmouseOut="tooltip(event,'asdf', 'none', 0, '');">TEST</span> Link to comment Share on other sites More sharing options...
BlueDigit Posted August 7, 2010 Author Share Posted August 7, 2010 Hey, that made it workwait, why did that make it work? If I'm reading the script right, it's basically making an in-script variable called event, which contains a JavaScript reference to event, so that in-script references to event are referencing the JavaScript event, which is basically what it should have been doing in the first place.Tangent aside, I'm grateful for the help. It works in all the browsers I mentioned. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 7, 2010 Share Posted August 7, 2010 it was looking for the 'event' variable to refer to, 'event' refers to any action that has occurred be it onmouseover, onclick, onmouseout etc, on this event the variable is sent to the function so it has a reference to and can now process the rest of the code with this variable.var vertical = event.clientY + document.body.scrollTop;var horizontal = event.clientX + document.body.scrollLeft; Link to comment Share on other sites More sharing options...
dsonesuk Posted August 7, 2010 Share Posted August 7, 2010 Another note, you should never ever use navigator.appName, or navigator.userAgent to detect which browser the user is using, as it can give misleading results, best option is to identify which method the browser is using 'window.event' or just 'event' then you can use below instead, in javascript only.var tooltip = function(e, a, b, c, d){if (!e){var e = window.event;}if (e){var vertical = e.clientY + document.body.scrollTop;var horizontal = e.clientX + document.body.scrollLeft;}else{var vertical = e.clientY + window.pageYOffset;var horizontal = e.clientX + window.pageXOffset;}rest of code....}EDIT: just usingvar vertical = e.clientY + document.body.scrollTop;var horizontal = e.clientX + document.body.scrollLeft;seems to work for all Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.