By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,795 Members | 1,235 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,795 IT Pros & Developers. It's quick & easy.

Tooltip or simple test script not work

P: 18
Okay... So this is my first project and I want to be able to make a tool tip appear with the basket contents whenever you hover over a link using the onmousehover='javascriptFunction()'. I have acquried (and modified) some javascript code, but it did not work... So I attempted to create a simple alert() function to test and that did not work either... This is my test codee:

Expand|Select|Wrap|Line Numbers
  1. // tooltip.js
  2. function displayAlert()
  3. {
  4.     alert("Test Alert!");
  5. }
  6.  
And now my HTML code

[html]
<html>
<head>
<script src="tooltip.js"></script>
</head>

<body>
<a href="#" onmouseover='displayAlert()'>Test Link!</a>
</body>
</html>
[/html]

That does not work at all... In case you're wondering, the following is my code which I want to run...

Expand|Select|Wrap|Line Numbers
  1. // tooltip.js
  2. <!--
  3. var dom   = ( document.getElementById ) ? true : false;
  4. var ns5   = ( !document.all && dom || window.opera ) ? true: false;
  5. var ie5   = ( (navigator.userAgent.indexOf( "MSIE" ) > -1 ) && dom) ? true : false;
  6. var ie4   = ( document.all && !dom) ? true : false;
  7. var nodyn = ( !ns5 && !ie4 && !ie5 && !dom ) ? true : false;
  8.  
  9. var origWidth, origHeight;
  10. var tooltip, tipcss;
  11. var timeOutOne, timeOutTwo;
  12. var tipOn = false;
  13. var mouseX, mouseY;
  14.  
  15. if (nodyn)
  16. {
  17.     event = "nope" 
  18.  
  19. function initTip() 
  20. {
  21.     document.write("initTip...")
  22.     if (nodyn) 
  23.         return;
  24.     tooltip = (ie4) ? document.all['tipDiv']: (ie5||ns5)? document.getElementById( 'tipDiv' ): null;
  25.     tipcss  = tooltip.style;
  26.     if ( ie4 || ie5 || ns5) 
  27.     {
  28.         tipcss.width           = "160px";
  29.         tipcss.fontFamily      = "Verdana, arial, helvetica, sans-serif";
  30.         tipcss.fontSize        = "8pt";
  31.         tipcss.color           = "#000000";
  32.         tipcss.backgroundColor = "#FF4400";
  33.         tipcss.borderColor     = "#000000";
  34.         tipcss.borderWidth     = "3px";
  35.         tipcss.padding         = "5px";
  36.         tipcss.borderStyle     = "ridge";
  37.     }
  38.     document.onmousemove = trackMouse;
  39. }
  40. window.onload = initTip;
  41.  
  42.  
  43. function displayAlert()
  44. {
  45.     alert("Test Alert");    
  46. }
  47.  
  48. function doToolTip( eventObject, arrayDetails = "", background = "" ) 
  49. {
  50.     // Array =>
  51.     //      [<number>] =>
  52.     //          ['Name']  = name of product
  53.     //          ['Price'] = price of product
  54.  
  55.     document.write("Doing the tool tip");
  56.  
  57.     if (!tooltip)
  58.         return;
  59.  
  60.     if (timeOutOne) 
  61.         clearTimeout( timeOutOne );
  62.  
  63.     if (timeOutTwo)
  64.         clearTimeout( timeOutTwo );
  65.  
  66.     tipOn = true;
  67.  
  68.     if (background)
  69.         var curBgColor = "";
  70.     else
  71.         curBgColor = "#FF4400";
  72.  
  73.     if ( ie4 || ie5 || ns5 )
  74.     {
  75.         var message = '<table width="160px" style="font-family:Verdana, arial, helvetica, sans-serif; font-size:9px; color:#000000">';
  76.         if (arrayDetails)
  77.         {
  78.             for (var i = 0; i < arrayDetails.length; i++) 
  79.             {
  80.                 message += '<tr><td valign="top">' + arrayDetails[i]["title"] + " - " + arrayDetails[i]["price"] + '</td></tr>';
  81.             }
  82.         }
  83.         else
  84.         {
  85.             message += "N/A";
  86.         }
  87.         message               += '</table>';
  88.         tipcss.backgroundColor = curBgColor;
  89.         tooltip.innerHTML      = message;
  90.     }
  91.     //positionTip( eventObject );
  92.     timeOutOne = setTimeout( "tipcss.visibility='visible'", 100);
  93. }
  94.  
  95. function trackMouse( eventObject ) 
  96. {
  97.     standardbody = ( document.compatMode == "CSS1Compat" )? document.documentElement : document.body
  98.     mouseX       = ( ns5 ) ? eventObject.pageX : window.event.clientX + standardbody.scrollLeft;
  99.     mouseY       = ( ns5 ) ? eventObject.pageY : window.event.clientY + standardbody.scrollTop;
  100.     if ( tipOn )
  101.         positionTip( eventObject );
  102. }
  103.  
  104. function positionTip( eventObject ) 
  105. {
  106.     var toolTipWidth  = ( ie4 || ie5 ) ? tooltip.clientWidth: tooltip.offsetWidth;
  107.     var toolTipHeight = ( ie4 || ie5 ) ? tooltip.clientHeight: tooltip.offsetHeight;
  108.  
  109.     var windowWidth  = (ns5) ? window.innerWidth  - 20 + window.pageXOffset : standardbody.clientWidth  + standardbody.scrollLeft;
  110.     var windowHeight = (ns5) ? window.innerHeight - 20 + window.pageYOffset : standardbody.clientHeight + standardbody.scrollTop;
  111.  
  112.     if ( ( mouseX -300 + toolTipWidth) > windowWidth )
  113.         tipcss.left = mouseX - (toolTipWidth - 300) + "px";
  114.     else 
  115.         tipcss.left = ( mouseX - 300 ) +"px";
  116.  
  117.     if ( ( mouseY + 300 + toolTipHeight ) > windowHeight ) 
  118.         tipcss.top  = ( windowHeight - ( toolTipHeight + 300 ) ) + "px";
  119.     else 
  120.         tipcss.top  = ( mouseY + 300 ) + "px";
  121. }
  122.  
  123. function hideTip() 
  124. {
  125.     if (!tooltip)
  126.         return;
  127.     timeOutTwo = setTimeout( "tipcss.visibility='hidden'" , 100);
  128.     tipOn      = false;
  129. }
  130.  
  131. document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')
  132. //-->
  133.  
[PHP]
<?php
echo "<script language='javascript'>\n";
$totalProducts = 0;
$totalCost = 0.00;
if(isset($_COOKIE['basket']) )
{
$basketArray = $_COOKIE['basket'];
echo "var tempJavaArray = new Array();\n";
foreach ($basketArray as $key => $value)
{
++$totalProducts;
$array = getArrayDetails($value);
$price = (float)$array["price"];
echo "tempJavaArray[".($totalProducts -1)."][title] = ".$array["name"].";\n";
echo "tempJavaArray[".($totalProducts - 1)."][price] = ".sprintf("%.2f", $price).";\n";
$totalCost += price;
}
}
if ( $totalProducts )
{
$myString = sprintf("%s Items - %.2f", $totalProducts, $totalCost);
echo "<a href='#' onmouseover='doToolTip(event)' onmouseout='hideTip()'>".$myString."</a>";
}
else
{
echo "<a href='#' title='Items: N/A'>0 Items - 0.00</a>";
}
echo "</script>\n";
?>
[/PHP]

And the webpage in question is http://stehartin.krpk.co.uk and the section is the basket section in the top right.

Thank you for your time, I hope someone can help me...

-freddukes
Sep 28 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
The code that you posted above should definitely work. In your real code, you're still pointing to displayAlert() which obviously doesn't exist.
Sep 28 '08 #2

P: 18
Neither work... I didn't quite understand what you meant about the "real" code is still pointing to displayAlert(); (I can't find this, sorry if I misunderstood)... My browsers are definitely displaying Java because the site where I got the original JS code had an example and it worked perfect there...

-freddukes
Sep 28 '08 #3

acoder
Expert Mod 15k+
P: 16,027
I mean the site that you linked to.

Anyway, I noticed that you've defined doTooltip like this:
Expand|Select|Wrap|Line Numbers
  1. function doToolTip( eventObject, arrayDetails = "", background = "" ) 
That's going to bring up errors. Change to:
Expand|Select|Wrap|Line Numbers
  1. function doToolTip( eventObject, arrayDetails, background ) 
Sep 28 '08 #4

P: 18
Yeah thanks. I did notice that - I didn't know google chrome had a java console and error debugger >.< (I'm new to all of this website stuff)... Thank you so much for the help. I have now managed to get it working in FireFox and Google Chrome. Now just to make that darn link show for IE :P Thanks so much again, I appreciate it

-freddukes
Sep 28 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Well, it's good to hear that you've got it working in at least two browsers, but you will need to get it working in IE too. What happens in IE? Are there any errors? Does it affect all versions of IE?
Sep 29 '08 #6

P: 18
Hehe thanks.. I've got it working now... The reason it doens't work in IE is because the link isn't a link in IE, for some reason <a href="#">0 Items - 0.00</a> doesn't work in the top right basket <div> section - But that's another story and for the HTML / CSS part.

Thank you for your help. If I cannot resolve the HTML / CSS issue, then I shall post in the relative forums. Thank you once more.
Sep 29 '08 #7

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Good luck in getting it to work in IE too.
Sep 29 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.