I have a javascript that I have been using for a long while now, and I have the need now to make it work differently.
I have it where when the mouse goes over a link it will give you a 'tip' as to what that link is for, or whatever I put in the 'mouseover'.
Here is the javascript 'code':
<DIV ID="toolTipLayer" STYLE="position:absolute; visibility:hidden;"></DIV>
<script language="JavaScript">
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
var offsetX = 0;
var offsetY = 20;
var toolTipSTYLE="";
var CAPTION='cap';
var FG='fg';
var BG='bg';
var TEXTCOLOR='tc';
var CAPTIONCOLOR='cc';
var WIDTH='tw';
var HEIGHT='th';
var FONT='font';
var POSITIONY='posy';
var cap, fg, bg, tc, cc, tw, th, font, posy = 0;
function initToolTips() {
if(ns4||ns6||ie4) {
if(ns4) toolTipSTYLE = document.toolTipLayer;
else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
if(ns4) document.captureEvents(Event.MOUSEMOVE);
else {
toolTipSTYLE.visibility = "visible";
toolTipSTYLE.display = "none";
}
document.onmousemove = moveToMouseLoc;
}
}
function toolTip() {
if(arguments.length < 1) { // hide
if(ns4) toolTipSTYLE.visibility = "hidden";
else toolTipSTYLE.display = "none";
} else { // show
var msg = arguments[0];
fg = "#666666";
bg = "#EAEAFF";
tc = "#000000";
cc= "#FFFFFF";
font = "Verdana,Arial,Helvetica";
tw = '';
th = '';
cap = '';
posy = 0;
for(var i = 1; i < arguments.length; i+=2) {
switch (arguments[i]) {
case "cap": cap = arguments[i+1]; break;
case "font": font = arguments[i+1]; break;
case "fg": fg = arguments[i+1]; break;
case "bg": bg = arguments[i+1]; break;
case "tc": tc = arguments[i+1]; break;
case "cc": cc = arguments[i+1]; break;
case "tw": tw = arguments[i+1]; break;
case "th": th = arguments[i+1]; break;
case "posy": posy = arguments[i+1]; break;
}
}
var content =
'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" width="' + tw + '" height="' + th + '"><td>' +
'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg + '" width="' + tw + '" height="' + th + '">';
if(cap) content += '<tr><td bgcolor=' + fg + '><font face="' + font + '" color="' + cc + '" size="-2"><b>' + cap + '</b></font></td></tr><tr>';
content += '<td><font face="' + font + '" color="' + tc + '" size="-2">' + msg + '</font></td>';
if(cap) content += '</tr>';
content += '</table></td></table>';
if(ns4) {
toolTipSTYLE.document.write(content);
toolTipSTYLE.document.close();
toolTipSTYLE.visibility = "visible";
}
else if(ns6) {
moveToMouseLoc(document);
document.getElementById("toolTipLayer").innerHTML = content;
toolTipSTYLE.display='block';
}
else if(ie4) {
moveToMouseLoc();
document.all("toolTipLayer").innerHTML=content;
toolTipSTYLE.display='block';
}
}
}
function moveToMouseLoc(e) {
if(ns4||ns6) {
x = e.pageX;
y = e.pageY;
if (tw && (x + offsetX + Number(tw) + 10 > window.innerWidth)) x = window.innerWidth - offsetX - Number(tw) - 10;
} else {
x = event.x + document.body.scrollLeft;
y = event.y + document.body.scrollTop;
if (tw && (x + offsetX + Number(tw) + 30 > document.body.offsetWidth)) x = document.body.offsetWidth - offsetX - Number(tw) - 30;
}
toolTipSTYLE.left = x + offsetX;
toolTipSTYLE.top = y + offsetY + Number(posy);
return true;
}
initToolTips();
</script>Now what I am wanting to do, is when the mouseover displays the "table's" with the 'tips' if the 'content' is having mutilple lines which I have tried using a blank line
and also a \n but neither work. If I use a blank line the whole code just breaks. If I just use a \n that is now shown in the code but the table still looks like this:
some content here [8] should start new line
[90] and now another line should[1] start but
it just continues[4]
Sort of like that.
Is there a way to make it where \n will actually start a new line in the 'content' of the new table it hovers?
I even had it send the 'content' like this:
' + 'some content here [8]' + '\n\n' + 'should start new line [90]' + '\n\n' + 'and now another line should[1]' + '\n\n' + 'start but it just continues[4]
I do that because when it sends that it insert's it into this: tooltip('');
That way the first ' will be ''+ and the last will be ');
No javascript errors, but still it shows them like I said above, without the line breaks.
I would appreciate any 'tips' on how to make it do what I need it to.
Thank you,
Richard