Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Edited without saving original code for tooltip

Status
Not open for further replies.

alongside

Technical User
Sep 26, 2008
2
US
Ok like a true newbie I edited the following javascript code without saving it and now the images will not load in the tooltip when you move over the persons name. The text in the code that is in red is what I edited and I did change the names to NameHere. I am very new at JavaScript so any help with this is appreciated.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Any Title</title>
<script type="text/javascript">

	var origWidth, origHeight;
	var messages = [];	
	messages['Name Here'] = ["NameHere.jpg","Ryan Kosko <br>Birthday: 1/13"];
	messages['Name Here'] = ["NameHere.jpg","Larry Pedigo <br>Birthday: 10/22"];	
	messages['me'] = ["4mos.jpg","Me at 4 months old.<br>Birthday: 9/23"];
	
// ************** DO NOT EDIT BELOW THIS LINE ****************
	var currMonth = new Date().getMonth()+1;
	var midWindowWidth = 0;
	var midWindowHeight = 0;
	var msgWidth = 0;
	var msgHeight = 0;
	var nContainer = "";	
	var IE = false;
	
	if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}

	function stayHome(m){	
		
		if (IE)
			{
			 var currX = event.clientX;
			 var currY = event.clientY;
			}
		else	{
			 var currX = m.pageX;
			 var currY = m.pageY;
			}
		if (document.documentElement)
			{
			 var sL = document.documentElement.scrollLeft;	
			 var sT = document.documentElement.scrollTop;
			}
		else 	{
			 var sL = document.body.scrollLeft;	
			 var sT = document.body.scrollTop;	
			}
		if (currX > midWindowWidth)
			{			
			 if (IE){nContainer.style.left = Number(currX - msgWidth - 10 + sL) + 'px'}
			 else {nContainer.style.left = Number(currX - msgWidth - 10) + 'px'}
			}
		else	{
			 if (IE){nContainer.style.left = Number(currX + 10 + sL) + 'px'}
			 else {nContainer.style.left = Number(currX + 10) + 'px'}
			}		
		if (IE && currY >= midWindowHeight)
			{
			 nContainer.style.top = Number(currY + sT - msgHeight) + 'px';			 
			}
		if (IE && currY < midWindowHeight)
			{
			 nContainer.style.top = Number(currY + sT) + 'px'
			}
		if (!IE && currY - sT >= midWindowHeight)	
			{
			 nContainer.style.top = Number(currY - msgHeight) + 'px';
			}	
		if (!IE && currY - sT < midWindowHeight)
			{
			 nContainer.style.top = currY + 'px';
			}
	}	

	function hideImage(){

		while (nContainer.lastChild)
			{nContainer.removeChild(nContainer.lastChild)}
		document.getElementById('isFloat').style.display = 'none';
	}

	function showImage(isImg,currCaption,currItem){

		document.getElementById('isFloat').style.display = '';
		var nIMG  = document.createElement('img');
		nContainer.appendChild(nIMG);
		nIMG.setAttribute('src',isImg);
		nIMG.setAttribute('origWidth',origWidth);
		nIMG.setAttribute('origHeight',origHeight);
		var nCaption = document.createElement('div');
		var birthMonth = currCaption.substring(currCaption.lastIndexOf('/'),currCaption.lastIndexOf('/')-2);
		if (birthMonth == currMonth)
			{
			 nCaption.style.backgroundColor = '#ff69b4';
			}
		else 	{
			 nCaption.style.backgroundColor = '#eae3c6';
			}
		nCaption.style.textAlign = "center";		
  		nCaption.style.padding = '5px';
  		nCaption.style.color = '#000000';
		nCaption.style.fontSize = '10pt';
		nContainer.appendChild(nCaption);	
		nCaption.innerHTML = currCaption;
		currItem.onmouseout = hideImage;
		msgWidth = nContainer.clientWidth;
		msgHeight = nContainer.clientHeight;
	}

	function getMidWindow(){		
		
		if (document.documentElement)
			{
			 midWindowWidth = Math.round(document.documentElement.clientWidth/2);
			 midWindowHeight = Math.round(document.documentElement.clientHeight/2);				 		
			}
		else 	{
			 midWindowWidth = Math.round(document.body.clientWidth/2);
			 midWindowHeight = Math.round(document.body.clientHeight/2);				 				 		 
			}		
	}

	function initFloatImg(){

		var nBody = document.getElementsByTagName('body')[0];
		var nDiv = document.createElement('div');
		nDiv.id = "isFloat";
		nDiv.style.position = "absolute";
		nDiv.style.top = "0px";
		nDiv.style.left = "0px";
		nDiv.style.border = "1px solid black";
		nDiv.style.padding = "5px";
		nDiv.style.backgroundColor = "#ffff00"
		nBody.appendChild(nDiv);
		nContainer = document.getElementById('isFloat');
		hideImage();
		if (IE){document.onmousemove = stayHome;}
		else {addEventListener("mousemove",stayHome,false);}
		getMidWindow();
		var nMembers = document.getElementsByName('deptMember');
		for (i=0; i<nMembers.length; i++)
			{			 
			[COLOR=red] nMembers[i].parentNode.onmouseover = function(){showImage(messages[this.id][0],messages[this.id][1],this)}[/color]
			}
	}
	
	onload = initFloatImg;
	onresize = getMidWindow;
function positionTip(evt) {
	if (tooltip&&tipFollowMouse) {
		document.onmousemove = trackMouse;
	}

	// 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);
}


</script>
<style type="text/css">

	 body {background-color: #f0fff0;}	
	.memberContainer {width: 125px; margin-left: auto; margin-right: auto; margin-top: 40px;}
	.members {font-size: 12pt; font-family: tahoma; color: black; cursor: default; margin-bottom: 8px;}
	
</style>
</head>
<body>	
	
	<div class="memberContainer">
		<div id="me" class="members"><input type="hidden" name="deptMember">Me</div>
		<div id="name Here" class="members"><input type="hidden" name="deptMember">Name Here</div>
		<div id="Name Here" class="members"><input type="hidden" name="deptMember">Name Here</div> 
	</div>	

</body>
</html>
 
ok in the following code that someone created for me but who due to me not thanking them soon enough will not assist in getting it to work correctly. Their coding does address my idea of having part of the tooltip change background when it is a persons birth month but now there is an issue with the tooltip appearing on the page correctly. In the original code the tooltip lines up correctly within a few paces to the right of the persons name but in the edited code it goes to far up to the top.

Code:
<script type="text/javascript">
var tipFollowMouse= true;	

	var origWidth, origHeight;
	var messages = new Array();
	messages[0] = new Array("4mos.jpg","Me at 4 months old.<br>Birthday: 9/23");
messages[1] = new Array("their.jpg","Persons Name <br>Birthday: 10/22");	
messages[2] = new Array("their.jpg","Persons Name <br>Birthday: 1/13");
messages[3] = new Array('their.jpg','Persons Name <br>Birthday: 3/25',"#FFFFFF");

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];
  }
}

// ************** DO NOT EDIT BELOW THIS LINE ****************
	var currMonth = new Date().getMonth()+1;
	var midWindowWidth = 0;
	var midWindowHeight = 0;
	var msgWidth = 0;
	var msgHeight = 0;
	var nContainer = "";	
	var IE = false;
	var offX= 20;	// how far from mouse to show tip
var offY= 12; 

	if (navigator.appName == 'Microsoft Internet Explorer'){IE = true}

	function stayHome(m){	
		
		if (IE)
			{
			 var currX = event.clientX;
			 var currY = event.clientY;
			}
		else	{
			 var currX = m.pageX;
			 var currY = m.pageY;
			}
		if (document.documentElement)
			{
			 var sL = document.documentElement.scrollLeft;	
			 var sT = document.documentElement.scrollTop;
			}
		else 	{
			 var sL = document.body.scrollLeft;	
			 var sT = document.body.scrollTop;	
			}
		if (currX > midWindowWidth)
			{			
			 if (IE){nContainer.style.left = Number(currX - msgWidth - 10 + sL) + 'px'}
			 else {nContainer.style.left = Number(currX - msgWidth - 10) + 'px'}
			}
		else	{
			 if (IE){nContainer.style.left = Number(currX + 10 + sL) + 'px'}
			 else {nContainer.style.left = Number(currX + 10) + 'px'}
			}		
		if (IE && currY >= midWindowHeight)
			{
			 nContainer.style.top = Number(currY + sT - msgHeight) + 'px';			 
			}
		if (IE && currY < midWindowHeight)
			{
			 nContainer.style.top = Number(currY + sT) + 'px'
			}
		if (!IE && currY - sT >= midWindowHeight)	
			{
			 nContainer.style.top = Number(currY - msgHeight) + 'px';
			}	
		if (!IE && currY - sT < midWindowHeight)
			{
			 nContainer.style.top = currY + 'px';
			}
	}	

	function hideImage(){

		while (nContainer.lastChild)
			{nContainer.removeChild(nContainer.lastChild)}
		document.getElementById('isFloat').style.display = 'none';
	}

	function showImage(isImg,currCaption,currItem){

		document.getElementById('isFloat').style.display = '';
		var nIMG  = document.createElement('img');
		nContainer.appendChild(nIMG);
		nIMG.setAttribute('src',isImg);
		nIMG.setAttribute('origWidth',origWidth);
		nIMG.setAttribute('origHeight',origHeight);
		var nCaption = document.createElement('div');
		var birthMonth = currCaption.substring(currCaption.lastIndexOf('/'),currCaption.lastIndexOf('/')-2);
		if (birthMonth == currMonth)
			{
			 nCaption.style.backgroundColor = '#ff69b4';
			}
		else 	{
			 nCaption.style.backgroundColor = '#ffffff';
			}
		nCaption.style.textAlign = "center";		
  		nCaption.style.padding = '10px';
  		nCaption.style.color = '#000000';
  		nCaption.style.fontFamily = 'arial';
		nCaption.style.fontSize = '12pt';
		nContainer.appendChild(nCaption);	
		nCaption.innerHTML = currCaption;
		currItem.onmouseout = hideImage;
		msgWidth = nContainer.clientWidth;
		msgHeight = nContainer.clientHeight;
	}

	function getMidWindow(){		
		
		if (document.documentElement)
			{
			 midWindowWidth = Math.round(document.documentElement.clientWidth/2);
			 midWindowHeight = Math.round(document.documentElement.clientHeight/2);				 		
			}
		else 	{
			 midWindowWidth = Math.round(document.body.clientWidth/2);
			 midWindowHeight = Math.round(document.body.clientHeight/2);				 				 		 
			}		
	}

	function initFloatImg(){

		var nBody = document.getElementsByTagName('body')[0];
		var nDiv = document.createElement('div');
		nDiv.id = "isFloat";
		nDiv.style.position = "absolute";
	      var jumpAbove= false;
		nDiv.style.top = "0px";
		nDiv.style.left = "0px";
		nDiv.style.border = "4px ridge #000080";
		nDiv.style.padding = "10px";
		nDiv.style.backgroundColor = "#ffffff"
		nBody.appendChild(nDiv);
		nContainer = document.getElementById('isFloat');
		hideImage();
		if (IE){document.onmousemove = stayHome;}
		else {addEventListener("mousemove",stayHome,false);}
		getMidWindow();
		var nMembers = document.getElementsByName('deptMember');
		for (i=0; i<nMembers.length; i++)
			{			 
			 nMembers[i].parentNode.onmouseover = function(){showImage(messages[this.id][0],messages[this.id][1],this)}
			}
	}
	
	onload = initFloatImg;
	onresize = getMidWindow;
function positionTip(evt) {
	if (tooltip&&tipFollowMouse) {
		document.onmousemove = trackMouse;
	}

	// 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='hidden'",100);
}
document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

Below is a portion of the section I have placed the code on the page. (Note: I did take out any identifible information on deptMembers.

Code:
<div id="main">
<table border=0 width="75%">
 <td width=880 height=600 bgcolor=#FFF5EE style='border: 1.0pt solid #9d6e34;vertical-align:top;text-align:center;background: #FAEBD7 '>
      <br/><center><h2>Contact List</h2></center><table border="0" width="95%" cellpadding="3">
  <p><tr><td width=40%  colspan="3" align="center">For a picture of an individual move your mouse over their name and their image will appear.</td>
</tr>
    <tr>
    <td width="30%" align="left"><div id="1">Manager: <a href="#" input type="hidden" name="deptMember" class="email">Persons Name</div></a></td>
    <td width="25%" align="right"><a href="mailto:personsname@theiremail.com" class="email">personsname@theiremail.com</a></td>
    <td width="25%"> phone</td>
  </tr>
  <tr>
    <td width="33%" align="left"><div id="2">Supervisor: <a href="#" input type="hidden" name="deptMember" class="email">Persons Name</a></div>
    </td>
    <td width="25%" align="right"><a href="mailto:personsname@theiremail.com" class="email">personsname@theiremail.com</a></td>
    <td width="25%"> phone</td>
  </tr>
<tr>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top