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='j avascriptFuncti on()'. 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:
[code=javascript]
// tooltip.js
function displayAlert()
{
alert("Test Alert!");
}
[/code]
And now my HTML code
[html]
<html>
<head>
<script src="tooltip.js "></script>
</head>
<body>
<a href="#" onmouseover='di splayAlert()'>T est 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...
[code=javascript]
// tooltip.js
<!--
var dom = ( document.getEle mentById ) ? true : false;
var ns5 = ( !document.all && dom || window.opera ) ? true: false;
var ie5 = ( (navigator.user Agent.indexOf( "MSIE" ) > -1 ) && dom) ? true : false;
var ie4 = ( document.all && !dom) ? true : false;
var nodyn = ( !ns5 && !ie4 && !ie5 && !dom ) ? true : false;
var origWidth, origHeight;
var tooltip, tipcss;
var timeOutOne, timeOutTwo;
var tipOn = false;
var mouseX, mouseY;
if (nodyn)
{
event = "nope"
}
function initTip()
{
document.write( "initTip... ")
if (nodyn)
return;
tooltip = (ie4) ? document.all['tipDiv']: (ie5||ns5)? document.getEle mentById( 'tipDiv' ): null;
tipcss = tooltip.style;
if ( ie4 || ie5 || ns5)
{
tipcss.width = "160px";
tipcss.fontFami ly = "Verdana, arial, helvetica, sans-serif";
tipcss.fontSize = "8pt";
tipcss.color = "#000000";
tipcss.backgrou ndColor = "#FF4400";
tipcss.borderCo lor = "#000000";
tipcss.borderWi dth = "3px";
tipcss.padding = "5px";
tipcss.borderSt yle = "ridge";
}
document.onmous emove = trackMouse;
}
window.onload = initTip;
function displayAlert()
{
alert("Test Alert");
}
function doToolTip( eventObject, arrayDetails = "", background = "" )
{
// Array =>
// [<number>] =>
// ['Name'] = name of product
// ['Price'] = price of product
document.write( "Doing the tool tip");
if (!tooltip)
return;
if (timeOutOne)
clearTimeout( timeOutOne );
if (timeOutTwo)
clearTimeout( timeOutTwo );
tipOn = true;
if (background)
var curBgColor = "";
else
curBgColor = "#FF4400";
if ( ie4 || ie5 || ns5 )
{
var message = '<table width="160px" style="font-family:Verdana, arial, helvetica, sans-serif; font-size:9px; color:#000000"> ';
if (arrayDetails)
{
for (var i = 0; i < arrayDetails.le ngth; i++)
{
message += '<tr><td valign="top">' + arrayDetails[i]["title"] + " - " + arrayDetails[i]["price"] + '</td></tr>';
}
}
else
{
message += "N/A";
}
message += '</table>';
tipcss.backgrou ndColor = curBgColor;
tooltip.innerHT ML = message;
}
//positionTip( eventObject );
timeOutOne = setTimeout( "tipcss.visibil ity='visible'", 100);
}
function trackMouse( eventObject )
{
standardbody = ( document.compat Mode == "CSS1Compat " )? document.docume ntElement : document.body
mouseX = ( ns5 ) ? eventObject.pag eX : window.event.cl ientX + standardbody.sc rollLeft;
mouseY = ( ns5 ) ? eventObject.pag eY : window.event.cl ientY + standardbody.sc rollTop;
if ( tipOn )
positionTip( eventObject );
}
function positionTip( eventObject )
{
var toolTipWidth = ( ie4 || ie5 ) ? tooltip.clientW idth: tooltip.offsetW idth;
var toolTipHeight = ( ie4 || ie5 ) ? tooltip.clientH eight: tooltip.offsetH eight;
var windowWidth = (ns5) ? window.innerWid th - 20 + window.pageXOff set : standardbody.cl ientWidth + standardbody.sc rollLeft;
var windowHeight = (ns5) ? window.innerHei ght - 20 + window.pageYOff set : standardbody.cl ientHeight + standardbody.sc rollTop;
if ( ( mouseX -300 + toolTipWidth) > windowWidth )
tipcss.left = mouseX - (toolTipWidth - 300) + "px";
else
tipcss.left = ( mouseX - 300 ) +"px";
if ( ( mouseY + 300 + toolTipHeight ) > windowHeight )
tipcss.top = ( windowHeight - ( toolTipHeight + 300 ) ) + "px";
else
tipcss.top = ( mouseY + 300 ) + "px";
}
function hideTip()
{
if (!tooltip)
return;
timeOutTwo = setTimeout( "tipcss.visibil ity='hidden'" , 100);
tipOn = false;
}
document.write( '<div id="tipDiv" style="position :absolute; visibility:hidd en; z-index:100"></div>')
//-->
[/code]
[PHP]
<?php
echo "<script language='javas cript'>\n";
$totalProducts = 0;
$totalCost = 0.00;
if(isset($_COOK IE['basket']) )
{
$basketArray = $_COOKIE['basket'];
echo "var tempJavaArray = new Array();\n";
foreach ($basketArray as $key => $value)
{
++$totalProduct s;
$array = getArrayDetails ($value);
$price = (float)$array["price"];
echo "tempJavaAr ray[".($totalProduc ts -1)."][title] = ".$array["name"].";\n";
echo "tempJavaAr ray[".($totalProduc ts - 1)."][price] = ".sprintf("%.2f ", $price).";\n";
$totalCost += price;
}
}
if ( $totalProducts )
{
$myString = sprintf("%s Items - £%.2f", $totalProducts, $totalCost);
echo "<a href='#' onmouseover='do ToolTip(event)' onmouseout='hid eTip()'>".$mySt ring."</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
[code=javascript]
// tooltip.js
function displayAlert()
{
alert("Test Alert!");
}
[/code]
And now my HTML code
[html]
<html>
<head>
<script src="tooltip.js "></script>
</head>
<body>
<a href="#" onmouseover='di splayAlert()'>T est 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...
[code=javascript]
// tooltip.js
<!--
var dom = ( document.getEle mentById ) ? true : false;
var ns5 = ( !document.all && dom || window.opera ) ? true: false;
var ie5 = ( (navigator.user Agent.indexOf( "MSIE" ) > -1 ) && dom) ? true : false;
var ie4 = ( document.all && !dom) ? true : false;
var nodyn = ( !ns5 && !ie4 && !ie5 && !dom ) ? true : false;
var origWidth, origHeight;
var tooltip, tipcss;
var timeOutOne, timeOutTwo;
var tipOn = false;
var mouseX, mouseY;
if (nodyn)
{
event = "nope"
}
function initTip()
{
document.write( "initTip... ")
if (nodyn)
return;
tooltip = (ie4) ? document.all['tipDiv']: (ie5||ns5)? document.getEle mentById( 'tipDiv' ): null;
tipcss = tooltip.style;
if ( ie4 || ie5 || ns5)
{
tipcss.width = "160px";
tipcss.fontFami ly = "Verdana, arial, helvetica, sans-serif";
tipcss.fontSize = "8pt";
tipcss.color = "#000000";
tipcss.backgrou ndColor = "#FF4400";
tipcss.borderCo lor = "#000000";
tipcss.borderWi dth = "3px";
tipcss.padding = "5px";
tipcss.borderSt yle = "ridge";
}
document.onmous emove = trackMouse;
}
window.onload = initTip;
function displayAlert()
{
alert("Test Alert");
}
function doToolTip( eventObject, arrayDetails = "", background = "" )
{
// Array =>
// [<number>] =>
// ['Name'] = name of product
// ['Price'] = price of product
document.write( "Doing the tool tip");
if (!tooltip)
return;
if (timeOutOne)
clearTimeout( timeOutOne );
if (timeOutTwo)
clearTimeout( timeOutTwo );
tipOn = true;
if (background)
var curBgColor = "";
else
curBgColor = "#FF4400";
if ( ie4 || ie5 || ns5 )
{
var message = '<table width="160px" style="font-family:Verdana, arial, helvetica, sans-serif; font-size:9px; color:#000000"> ';
if (arrayDetails)
{
for (var i = 0; i < arrayDetails.le ngth; i++)
{
message += '<tr><td valign="top">' + arrayDetails[i]["title"] + " - " + arrayDetails[i]["price"] + '</td></tr>';
}
}
else
{
message += "N/A";
}
message += '</table>';
tipcss.backgrou ndColor = curBgColor;
tooltip.innerHT ML = message;
}
//positionTip( eventObject );
timeOutOne = setTimeout( "tipcss.visibil ity='visible'", 100);
}
function trackMouse( eventObject )
{
standardbody = ( document.compat Mode == "CSS1Compat " )? document.docume ntElement : document.body
mouseX = ( ns5 ) ? eventObject.pag eX : window.event.cl ientX + standardbody.sc rollLeft;
mouseY = ( ns5 ) ? eventObject.pag eY : window.event.cl ientY + standardbody.sc rollTop;
if ( tipOn )
positionTip( eventObject );
}
function positionTip( eventObject )
{
var toolTipWidth = ( ie4 || ie5 ) ? tooltip.clientW idth: tooltip.offsetW idth;
var toolTipHeight = ( ie4 || ie5 ) ? tooltip.clientH eight: tooltip.offsetH eight;
var windowWidth = (ns5) ? window.innerWid th - 20 + window.pageXOff set : standardbody.cl ientWidth + standardbody.sc rollLeft;
var windowHeight = (ns5) ? window.innerHei ght - 20 + window.pageYOff set : standardbody.cl ientHeight + standardbody.sc rollTop;
if ( ( mouseX -300 + toolTipWidth) > windowWidth )
tipcss.left = mouseX - (toolTipWidth - 300) + "px";
else
tipcss.left = ( mouseX - 300 ) +"px";
if ( ( mouseY + 300 + toolTipHeight ) > windowHeight )
tipcss.top = ( windowHeight - ( toolTipHeight + 300 ) ) + "px";
else
tipcss.top = ( mouseY + 300 ) + "px";
}
function hideTip()
{
if (!tooltip)
return;
timeOutTwo = setTimeout( "tipcss.visibil ity='hidden'" , 100);
tipOn = false;
}
document.write( '<div id="tipDiv" style="position :absolute; visibility:hidd en; z-index:100"></div>')
//-->
[/code]
[PHP]
<?php
echo "<script language='javas cript'>\n";
$totalProducts = 0;
$totalCost = 0.00;
if(isset($_COOK IE['basket']) )
{
$basketArray = $_COOKIE['basket'];
echo "var tempJavaArray = new Array();\n";
foreach ($basketArray as $key => $value)
{
++$totalProduct s;
$array = getArrayDetails ($value);
$price = (float)$array["price"];
echo "tempJavaAr ray[".($totalProduc ts -1)."][title] = ".$array["name"].";\n";
echo "tempJavaAr ray[".($totalProduc ts - 1)."][price] = ".sprintf("%.2f ", $price).";\n";
$totalCost += price;
}
}
if ( $totalProducts )
{
$myString = sprintf("%s Items - £%.2f", $totalProducts, $totalCost);
echo "<a href='#' onmouseover='do ToolTip(event)' onmouseout='hid eTip()'>".$mySt ring."</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
Comment