473,503 Members | 1,712 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Tooltip or simple test script not work

18 New Member
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
7 2432
acoder
16,027 Recognized Expert Moderator MVP
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
freddukes
18 New Member
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
16,027 Recognized Expert Moderator MVP
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
freddukes
18 New Member
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
16,027 Recognized Expert Moderator MVP
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
freddukes
18 New Member
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
16,027 Recognized Expert Moderator MVP
You're welcome. Good luck in getting it to work in IE too.
Sep 29 '08 #8

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

Similar topics

0
1871
by: 42 | last post by:
I implemented a simple class inherited from Page to create a page template. It simply wraps some trivial html around the inherited page, and puts the inherited page into a form. The problem I...
3
2533
by: Craig G | last post by:
what way do you code it? i tried the following but it wouldnt display it lblAdd_info is a hidden field in the cell itself that contains the data i want to display in the tooltip text. i added the...
1
5241
by: valeria.audivert | last post by:
I'm trying to implement a Calendar control using the OnDayRender to get event information from an XML file. For the days that have special events, I'd like to make the day bold red and show a...
2
3264
by: Vivek | last post by:
I have two html files Parent.htm and Child .htm Following is the code inside the Parent.htm: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title>...
4
7798
by: rn5a | last post by:
A DataList displays 3 columns - Product, Category & Price. These columns are populated with records from a SQL Server 2005 DB table. Apart from the above 3 DB columns that the resultset retrieves,...
5
9796
by: =?Utf-8?B?cGV0ZTE5Njk=?= | last post by:
I use Visual Studio 2005 and created a very simple Form with one button. I added a Tooltip for that button. It shows fine the first time I hover over that button. But if I let it disappear by the...
7
4241
by: bnashenas1984 | last post by:
Hi everyone Actually I'm a php programer and don't no so much about java. After searching on google I found the java code you see below to open a popup when user moves the mouse pointer over a link....
3
2577
omerbutt
by: omerbutt | last post by:
hi there i have downloaded a prototype tooltip from http://www.nickstakenburg.com/projects/prototip/ the logic it uses is to call the script after creating the <div> for example i am using the...
11
2156
by: Kim | last post by:
Using the code below am I able to display/hide a tooltip without any problems, however once the tooltip is displayed its position is fixed (based on where the mouse first hovered onto the object)...
0
7202
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
7084
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
7328
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...
1
6991
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
7458
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...
1
5013
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
3154
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1512
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
380
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

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.