perl javascript help passing varable

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

33 Replies - 2435 Views - Last Post: 23 October 2009 - 07:50 AM

#1 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

perl javascript help passing varable

Posted 10 October 2009 - 03:43 PM

I have been trying this code http://www.dynamicdr....agetooltip.htm

but can't get my varable $number on the page to pass to the varable $number in the head ?

any thoughts? here is the code in the <head>
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
	
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />



<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or 
	 put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
// settings for tooltip 
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;	
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20;	// how far from mouse to show tip
var offY= 12; 
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF"; 
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing: 
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip

messages[0] = new Array('upload/$number.gif','$number.gif',"#FFFFFF");
messages[1] = new Array('upload/$number.jpg','$number.jpg',"#DDECFF");
messages[2] = new Array('/upload/test.gif','Test description','black','white');

////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
	  theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
//  initTip	- initialization for tooltip.
//		Global variables for tooltip. 
//		Set styles
//		Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
	if (nodyn) return;
	tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
	tipcss = tooltip.style;
	if (ie4||ie5||ns5) {	// ns4 would lose all this on rewrites
		tipcss.width = tipWidth+"px";
		tipcss.fontFamily = tipFontFamily;
		tipcss.fontSize = tipFontSize;
		tipcss.color = tipFontColor;
		tipcss.backgroundColor = tipBgColor;
		tipcss.borderColor = tipBorderColor;
		tipcss.borderWidth = tipBorderWidth+"px";
		tipcss.padding = tipPadding+"px";
		tipcss.borderStyle = tipBorderStyle;
	}
	if (tooltip&&tipFollowMouse) {
		document.onmousemove = trackMouse;
	}
}

window.onload = initTip;

/////////////////////////////////////////////////
//  doTooltip function
//			Assembles content for tooltip and writes 
//			it to tipDiv
/////////////////////////////////////////////////
var t1,t2;	// for setTimeouts
var tipOn = false;	// check if over tooltip link
function doTooltip(evt,num) {
	if (!tooltip) return;
	if (t1) clearTimeout(t1);	if (t2) clearTimeout(t2);
	tipOn = true;
	// set colors if included in messages array
	if (messages[num][2])	var curBgColor = messages[num][2];
	else curBgColor = tipBgColor;
	if (messages[num][3])	var curFontColor = messages[num][3];
	else curFontColor = tipFontColor;
	if (ie4||ie5||ns5) {
		var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
		tipcss.backgroundColor = curBgColor;
	 	tooltip.innerHTML = tip;
	}
	if (!tipFollowMouse) positionTip(evt);
	else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
	standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
	mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
	mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
//  positionTip function
//		If tipFollowMouse set false, so trackMouse function
//		not being used, get position of mouseover event.
//		Calculations use mouseover event position, 
//		offset amounts and tooltip width to position
//		tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
	if (!tipFollowMouse) {
		standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
		mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
		mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	}
	// tooltip width and height
	var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
	var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
	// document area in view (subtract scrollbar width for ns)
	var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
	var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
	// check mouse position against tip and window dimensions
	// and position the tooltip 
	if ((mouseX+offX+tpWd)>winWd) 
		tipcss.left = mouseX-(tpWd+offX)+"px";
	else tipcss.left = mouseX+offX+"px";
	if ((mouseY+offY+tpHt)>winHt) 
		tipcss.top = winHt-(tpHt+offY)+"px";
	else tipcss.top = mouseY+offY+"px";
	if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
	if (!tooltip) return;
	t2=setTimeout("tipcss.visibility='hidden'",100);
	tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>










and here is the code in the perl script


$number = $fields[$index_of_db_id];
 print qq~<td bgcolor="$short_results_background_color" align=center>



<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><img src="$graphics_dir/smallcamera.gif" width=16 height=12 border=0 alt="$number"></a>
</td>~;
  }
 elsif (-e "$upload_path/$number.jpg") 
 {
  print qq~<td bgcolor="$short_results_background_color" align=center>




<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()"><img src="$graphics_dir/smallcamera.gif" width=16 height=12 border=0 alt="$number"></a>

</td>~;
  }
 else 
 { 
  print qq~<td bgcolor="$short_results_background_color" align=center>—</td>~;
  }
 }
else 
{
 print qq~<td bgcolor="$short_results_background_color" align=center>—</td>~;
 





Is This A Good Question/Topic? 0
  • +

Replies To: perl javascript help passing varable

#2 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 12 October 2009 - 08:27 PM

does anyone know if this is a javascript problem or a perl problem? so I will know where to look

thanks
Was This Post Helpful? 0
  • +
  • -

#3 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 14 October 2009 - 06:30 PM

I found out that javascript does not know what the varable $number is

$number is a perl array so some how i need to pass it to the javascript arry
Was This Post Helpful? 0
  • +
  • -

#4 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: perl javascript help passing varable

Posted 15 October 2009 - 01:14 AM

I don't really know much perl, but can't you write something to the page that creates a variable in javascript? Something like:
print qq~<script type="text/javascript">var number = $number;</script>~;



As long as this appears on the page ahead of your script you can use number.
Was This Post Helpful? 0
  • +
  • -

#5 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 15 October 2009 - 05:26 AM

View Postthehat, on 15 Oct, 2009 - 12:14 AM, said:

I don't really know much perl, but can't you write something to the page that creates a variable in javascript? Something like:
print qq~<script type="text/javascript">var number = $number;</script>~;



As long as this appears on the page ahead of your script you can use number.



Thanks I will give it a try I also found out that $number is a array in perl and i need to input it to the javascript array. I have the script working but in the javascript part it only holds the 1st perl varable.
Was This Post Helpful? 0
  • +
  • -

#6 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: perl javascript help passing varable

Posted 15 October 2009 - 06:00 AM

Are your array values always going to be numbers? If so, you could do something like this:
print pp~<script type="text/javascript">numbers = new Array(~;
print join(",",$number);
print pp~);</script>~;



This uses join to print out all the values of $number separated by commas. In the javascript this will hopefully resemble the creation of an array. It won't work for any values that are strings though, because it doesn't create the speech marks javascript would require to recognise your values as strings rather than variable names. If your array is going to contain strings you would have to use a for loop so that you could manually add speechmarks as you output each value.

One question though, are you sure $number is an array? I thought that arrays in perl were always named with a @ rather than a $.

This post has been edited by thehat: 15 October 2009 - 06:01 AM

Was This Post Helpful? 1
  • +
  • -

#7 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 15 October 2009 - 06:28 AM

View Postthehat, on 15 Oct, 2009 - 05:00 AM, said:

Are your array values always going to be numbers? If so, you could do something like this:
print pp~<script type="text/javascript">numbers = new Array(~;
print join(",",$number);
print pp~);</script>~;



This uses join to print out all the values of $number separated by commas. In the javascript this will hopefully resemble the creation of an array. It won't work for any values that are strings though, because it doesn't create the speech marks javascript would require to recognise your values as strings rather than variable names. If your array is going to contain strings you would have to use a for loop so that you could manually add speechmarks as you output each value.

One question though, are you sure $number is an array? I thought that arrays in perl were always named with a @ rather than a $.


thanks

yes all will be numbers. because in perl I add letters to the end to pull the different images.

like

$number.jpg or number.gif
$number-a.jpg or $number-a.gif
$number-b.jpg or $number-b.gif
$number-c.jpg or $number-c.gif
and so on.






print pp~<script type="text/javascript">numbers = new Array(~;
print join(",",$number);
print pp~);</script>~;





so would I add the above in the javascript code and not the perl code below?

number = $fields[$index_of_db_id];
print qq~<td bgcolor="$short_results_background_color" align=center>



<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><img src="$graphics_dir/smallcamera.gif" width=16 height=12 border=0 alt="$number"></a>
</td>~;
  }
elsif (-e "$upload_path/$number.jpg") 
{
  print qq~<td bgcolor="$short_results_background_color" align=center>


<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()"><img src="$graphics_dir/smallcamera.gif" width=16 height=12 border=0 alt="$number"></a>

</td>~;
  }
else 
{ 
  print qq~<td bgcolor="$short_results_background_color" align=center></td>~;
  }
}
else 
{
print qq~<td bgcolor="$short_results_background_color" align=center></td>~;









This post has been edited by winracer: 15 October 2009 - 06:34 AM

Was This Post Helpful? 0
  • +
  • -

#8 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: perl javascript help passing varable

Posted 15 October 2009 - 06:39 AM

My bit of code goes in your perl file, and should write out some javascript to your html page. You'll have to make sure the rest of your javascript comes after it on the page.
Was This Post Helpful? 0
  • +
  • -

#9 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 15 October 2009 - 07:04 AM

View Postthehat, on 15 Oct, 2009 - 05:39 AM, said:

My bit of code goes in your perl file, and should write out some javascript to your html page. You'll have to make sure the rest of your javascript comes after it on the page.



I am trying your code and not having any luck ok my perl array is @adnumber1 and not $numbers.

if I put this@adnumber1 in the javacript code I see all the numbers.
Was This Post Helpful? 0
  • +
  • -

#10 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 15 October 2009 - 07:23 AM

View Postthehat, on 15 Oct, 2009 - 05:39 AM, said:

My bit of code goes in your perl file, and should write out some javascript to your html page. You'll have to make sure the rest of your javascript comes after it on the page.



I PMed you my url hope you don't mind.
Was This Post Helpful? 0
  • +
  • -

#11 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: perl javascript help passing varable

Posted 15 October 2009 - 07:41 AM

Okay, if you look at around line 18364 in your page's source code you can see where that is all coming from. From what I can tell, there should be one of these messages lines for every tooltip you want to display. Then each anchor that wraps a camera image should have a different number in it's doTooltip call, which will correspond to one of these numbered messages.

Can you post the bit of the perl script that's writing those messages to the javascript?
Was This Post Helpful? 1
  • +
  • -

#12 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 15 October 2009 - 08:06 AM

View Postthehat, on 15 Oct, 2009 - 06:41 AM, said:

Okay, if you look at around line 18364 in your page's source code you can see where that is all coming from. From what I can tell, there should be one of these messages lines for every tooltip you want to display. Then each anchor that wraps a camera image should have a different number in it's doTooltip call, which will correspond to one of these numbered messages.

Can you post the bit of the perl script that's writing those messages to the javascript?


thanks for your help!
I think maybe that is what I am missing.

I added this as you said but did not change any thing.
print qq~<script type="text/javascript">numbers = new Array(~;
print join(",",$number);
print qq~);</script>~;





I used this code http://www.dynamicdr...magetooltip.htm

Do you need to see the code for the whole page?

This post has been edited by winracer: 15 October 2009 - 08:07 AM

Was This Post Helpful? 0
  • +
  • -

#13 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: perl javascript help passing varable

Posted 15 October 2009 - 08:22 AM

The code I gave you is generating the ine at the very top of your page's source. As you can see, it's not doing anything!

It might be best if you can post the entire perl script, or just the bit that's writing to the message array.
Was This Post Helpful? 0
  • +
  • -

#14 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 15 October 2009 - 08:33 AM

View Postthehat, on 15 Oct, 2009 - 07:22 AM, said:

The code I gave you is generating the ine at the very top of your page's source. As you can see, it's not doing anything!

It might be best if you can post the entire perl script, or just the bit that's writing to the message array.



I sent you a PM with part of the script if you need the whole script let me know.

and again thanks!
Was This Post Helpful? 0
  • +
  • -

#15 winracer  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 02-March 09

Re: perl javascript help passing varable

Posted 15 October 2009 - 06:10 PM

I made a array called @messages in perl and it contans all the image numbers and when I output it like @messages[2] I can see the 3rd number in the array in the javascript and also see it in the perl script as output.

messages[0] = new Array('upload/@messages[0].gif',' @messages.gif ',"#FFFFFF");
messages[1] = new Array('upload/@messages[1].jpg','@messages[5].gif',"#DDECFF");
messages[2] = new Array('upload/@messages[2].gif','@messages[2].gif'','black','white');






So I guess what I am asking is how do I load the @messages array into the javascript array and that



I hope I am explaning this.


the bad part is that I do not know if the image number will have a .gif or .jpg at the end.



I tried to replace the code about with this code as thehat said and it would not work


# first we close the current print
~;

# setup a loop to prepare the tooltips
for($i = 0; $i < @messages; $i++) {
   # print a tooltip value
   print qq~messages[$i] = new Array("upload/$messages[$i]","$messages[$i]","#FFFFFF");~;
}
# restart the print
print qq~





so the javascript code looks like this now...




<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or 
	 put tooltip div just before </BODY>. */
/*myNumber = '<%= session.getAttribute("$number") %>';*/
var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
// settings for tooltip 
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;	
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20;	// how far from mouse to show tip
var offY= 12; 
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF"; 
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing: 
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip

# first we close the current print
~;

# setup a loop to prepare the tooltips
for($i = 0; $i < @messages; $i++) {
   # print a tooltip value
   print qq~messages[$i] = new Array("upload/$messages[$i]","$messages[$i]","#FFFFFF");~;
}
# restart the print
print qq~




////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

// preload images that are to appear in tooltip
// from arrays above

if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
	  theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
//  initTip	- initialization for tooltip.
//		Global variables for tooltip. 
//		Set styles
//		Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
	if (nodyn) return;
	tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
	tipcss = tooltip.style;
	if (ie4||ie5||ns5) {	// ns4 would lose all this on rewrites
		tipcss.width = tipWidth+"px";
		tipcss.fontFamily = tipFontFamily;
		tipcss.fontSize = tipFontSize;
		tipcss.color = tipFontColor;
		tipcss.backgroundColor = tipBgColor;
		tipcss.borderColor = tipBorderColor;
		tipcss.borderWidth = tipBorderWidth+"px";
		tipcss.padding = tipPadding+"px";
		tipcss.borderStyle = tipBorderStyle;
	}
	if (tooltip&&tipFollowMouse) {
		document.onmousemove = trackMouse;
	}
}

window.onload = initTip;

/////////////////////////////////////////////////
//  doTooltip function
//			Assembles content for tooltip and writes 
//			it to tipDiv
/////////////////////////////////////////////////
var t1,t2;	// for setTimeouts
var tipOn = false;	// check if over tooltip link
function doTooltip(evt,num) {
	if (!tooltip) return;
	if (t1) clearTimeout(t1);	if (t2) clearTimeout(t2);
	tipOn = true;
	// set colors if included in messages array
	if (messages[num][2])	var curBgColor = messages[num][2];
	else curBgColor = tipBgColor;
	if (messages[num][3])	var curFontColor = messages[num][3];
	else curFontColor = tipFontColor;
	if (ie4||ie5||ns5) {
		var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
		tipcss.backgroundColor = curBgColor;
	 	tooltip.innerHTML = tip;
	}
	if (!tipFollowMouse) positionTip(evt);
	else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
	standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
	mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
	mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
//  positionTip function
//		If tipFollowMouse set false, so trackMouse function
//		not being used, get position of mouseover event.
//		Calculations use mouseover event position, 
//		offset amounts and tooltip width to position
//		tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
	if (!tipFollowMouse) {
		standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
		mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
		mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	}
	// tooltip width and height
	var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
	var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
	// document area in view (subtract scrollbar width for ns)
	var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
	var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
	// check mouse position against tip and window dimensions
	// and position the tooltip 
	if ((mouseX+offX+tpWd)>winWd) 
		tipcss.left = mouseX-(tpWd+offX)+"px";
	else tipcss.left = mouseX+offX+"px";
	if ((mouseY+offY+tpHt)>winHt) 
		tipcss.top = winHt-(tpHt+offY)+"px";
	else tipcss.top = mouseY+offY+"px";
	if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
	if (!tooltip) return;
	t2=setTimeout("tipcss.visibility='hidden'",100);
	tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>




This post has been edited by winracer: 16 October 2009 - 05:18 AM

Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3