Jump to content

[SOLVED] Getting location of table cells

RIRedinPA

By RIRedinPA
in Javascript Help

 Share

Recommended Posts

RIRedinPA Advanced Member

RIRedinPA

Posted
Posted

I am building a site which has two tables on it, each within a <div>. Table 1 has it's style.display set to block (inline), table 2 has it set to none. You can toggle the tables on and off. Within each table is a link which, when click will slide down a <div> below the cell the link is in showing data for that table cell. The code works fine for the table I am initializing with the block display but not for the one that is initially hidden. What I do is walk back up the offsetParent tree to get the x/y location of the cell and then set the x/y location of the div based on that. I keep getting an error message saying offsetParent = null (I initially set it in my code to null).

 

My guess is that the second div, not being initially displayed, does not get associated with the DOM hierarchy and therefore has no relationship to parents. Is there a way, when the user toggles to display the table I can establish that? (If that is even the case).

 

Thanks

 

Code:

 

.js file - the function in question is showdata()

 

//globals
var timerlen = 5;
var slideAniLen = 500;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();


function toggleTabs(tabname) {

var tabarray = new Array("tab1", "tab2"); 

for (var i=0; i<tabarray.length; i++) { 
	document.getElementById(tabarray[i]).style.display = "none";
  	}
document.getElementById(tabname).style.position = "relative";
document.getElementById(tabname).style.left = "100px";
document.getElementById(tabname).style.top = "110px";
  	document.getElementById(tabname).style.display = "block";

}

function showall() { 

var etable = document.getElementById("tab1"); 
var atable = document.getElementById("tab2");

//get etable width
var etableWidth = document.getElementById("etable").offsetWidth;

//move atable
atable.style.left = etableWidth + 101 + "px";
atable.style.top = "123px";
atable.style.position = "absolute";
//turn etable on
etable.style.display = "block";
atable.style.display = "block";
}


function showdata(cellid) { 
var xPos = 0; 
var yPos = 0; 


var obj = document.getElementById(cellid);
var objparent = null;
//walk up document tree to get the offsets from the body adding distance to our counter
do { 

xPos += obj.offsetLeft;
yPos += obj.offsetTop;
objParent = obj.offsetParent.tagName;
obj = obj.offsetParent; 

}
while (objParent != 'BODY')

document.getElementById("datadiv").style.left = xPos + "px";
document.getElementById("datadiv").style.top = yPos + 24 + "px";
document.getElementById("datadiv").innerHTML = "This is the content for cell " + cellid + ". dssdkdsksdkfjds osdfsd hfoh fsd;fhsd;fh ;sdfhs;dfhsw;fhu;huavc eoaurhevuh erwuuvh erverugh eruugherug ertughuweouguh erguheroguuh erogh ergouheruge herogh eruugh erohg<p>" + "<a href=\"javascript:void(0);\" onmousedown=\"closedata();\">Close</a>";

slidedown("datadiv")
} 



function closedata() { 
document.getElementById('datadiv').style.display = "none";
document.getElementById("datadiv").style.left = "0px";
document.getElementById("datadiv").style.top = "0px";
}

/*========================
ANIMATION SCRIPTS
========================*/

function slidedown(objname) {

  moving[objname] = true;
  dir[objname] = "down";
  startslide(objname);
}

function startslide(objname) { 
obj[objname] = document.getElementById(objname);
obj[objname].style.height = "100px";
  	endHeight[objname] = parseInt(obj[objname].style.height);
  	startTime[objname] = (new Date()).getTime();

	 if(dir[objname] == "down"){
    	obj[objname].style.height = "1px";
  	}

  	obj[objname].style.display = "block";

  	timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname){
  var elapsed = (new Date()).getTime() - startTime[objname];

  if (elapsed > slideAniLen)
    endSlide(objname)
  else {
    var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
    if(dir[objname] == "up") { 
      d = endHeight[objname] - d;
}

    obj[objname].style.height = d + "px";
  }

  return;
}

function endSlide(objname){
  clearInterval(timerID[objname]);

  if(dir[objname] == "up")
    obj[objname].style.display = "none";

  obj[objname].style.height = endHeight[objname] + "px";

  delete(moving[objname]);
  delete(timerID[objname]);
  delete(startTime[objname]);
  delete(endHeight[objname]);
  //delete(obj[objname]);
  delete(dir[objname]);

  return;
}

/*tools*/

function init() {

	//get count of rows
	var thistable = document.getElementById("etable"); 
	var rowcount = thistable.rows.length; 

	//loop
	for (var r=0; r<rowcount; r++) {
		if (r > 0) { 
			var thisrow = thistable.rows[r]; 
			var cellcount = thisrow.cells.length; 
			//loop through cells
			for (var c=0; c<cellcount; c++) { 
				var thiscell = thisrow.cells[c];
			}
		}
	}
}

window.onload = init;

 

page

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>


<style> 

body {
	background-color: #eeeeee;
	margin: 0px;
}

#tablediv { 
	position: relative; 
	top: 100px;
	left: 100px;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #663333;
}


#tablediv a:link { 
	text-decoration: none; 
	color: #663333;
}

#tablediv a:visited { 
	text-decoration: none; 
	color: #663333;
}

#tabledivn a:hover { 
	text-decoration: none; 
	color: #FF9933;
}

#tablediv a:active { 
	text-decoration: none; 
	color: #663333;
}

#tablediv table { 
	border-right: #6D3A44;
}

#tablediv th { 
	background-color: #CCCC66;
	padding-top: 1px;
	padding-right: 2px;
	border-left: 1px solid #6D3A44; 
	border-top: 1px solid #6D3A44; 
	border-collapse: collapse;
	letter-spacing: 1px;
	text-align: center; 
	vertical-align: middle; 
}

#tablediv td { 
	background-color: #EC7036; 
}

#tab1 { 
	position: relative;
	top: 110px;
	left: 100px;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #663333;
	display: none;
}

#tab1 table { 
	border-right: #6D3A44;
}

#tab1 th { 
	background-color: #CCCC66;
	padding-top: 1px;
	padding-right: 2px;
	border-left: 1px solid #6D3A44; 
	border-top: 1px solid #6D3A44; 
	border-collapse: collapse;
	letter-spacing: 1px;
	text-align: center; 
	vertical-align: middle; 
}

#tab1 td { 
	background-color: #EC7036; 
}

#tab1 input { 
	background-color: #EC7036;
	border: 0px; 
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #663333;
}

#tab2 { 
	position: relative; 
	top: 110px;
	left: 100px;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #663333;
	display: block;

}

#tab2 table { 
	border-right: #6D3A44;
	position: absolute; 
	top: 0px;
	left: 0px;
}

#tab2 th { 
	background-color: #CCCC66;
	padding-top: 1px;
	padding-right: 2px;
	border-left: 1px solid #6D3A44; 
	border-top: 1px solid #6D3A44; 
	border-collapse: collapse;
	letter-spacing: 1px;
	text-align: center; 
	vertical-align: middle; 
}

#tab2 td { 
	background-color: #EC7036;
}

#tab2 input { 
	background-color: #EC7036;
	border: 0px; 
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #663333;
}
.tabbutton { 
	width: 100px;
	height: 25px;
	background-color: #CCCC66;
	border: 1px solid #666633;
	padding: 2px; 
}

#datadiv { 
	position: absolute; 
	top: 0px;
	left: 0px;
	width: 300px;
	background-color: #FFCC66;
	color: #333;
	padding: 2px;
	border: 1px solid #666633;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	filter:alpha(opacity=85);
	-moz-opacity:.85;
	opacity:.85;
}


</style>

<script langauge="javascript" src="js/mpiscriptarama.js"></script>

<body>

<div id="tablediv"><a href="javascript:void(0);" onmousedown="toggleTabs('tab1');" class="tabbutton">Editorial</a>  <a href="javascript:void(0);" onmousedown="toggleTabs('tab2');" class="tabbutton">Art</a>  <a href="javascript:void(0);" onmousedown="showall();" class="tabbutton">View All</a></div>
<div id="tab1" style="display: block;">
    	<table cellpadding="3" cellspacing="0" border="1"  id="etable">
      <tr valign="top">
      <th>Title</th>
      <th>Page Info</th>
      <th>Description</th>
      <th>Copy Drop</th>
      <th>Edit Notes</th>
      <th>Display Ads</th>
      </tr>
      
      <tr valign="top" id="etable_row_1">
      <td id="title_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("title_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('title_1');"><img src="images/downarrow.gif" border="0" id="title_1_img"></a></td>
      <td id="pageinfo_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("pageinfo_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('pageinfo_1');" ><img src="images/downarrow.gif" border="0" id="pageinfo_1_img"></a></td>
      <td  id="description_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("description_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('description_1');"><img src="images/downarrow.gif" border="0" id="description_1_img"></a></td>
      <td id="copydrop_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="checkbox" onChange='updateDB("copydrop_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  </td>
      <td id="editnotes_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("editnotes_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('editnotes_1');"><img src="images/downarrow.gif" border="0" id="editnotes_1_img"></a></td>
      <td id="displayads_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("displayads_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('displayads_1');"><img src="images/downarrow.gif" border="0" id="displayads_1_img"></a></td>
      </tr>
      
      <tr valign="top" id="etable_row_2">
      <td id="title_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("title_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('title_2');"><img src="images/downarrow.gif" border="0" id="title_2_img"></a></td>
      <td id="pageinfo_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("pageinfo_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('pageinfo_2');"><img src="images/downarrow.gif" border="0" id="pageinfo_2_img"></a></td>
      <td  id="description_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("description_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('description_2');"><img src="images/downarrow.gif" border="0" id="description_2_img"></a></td>
      <td id="copydrop_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="checkbox" onChange='updateDB("copydrop_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  </td>
      <td id="editnotes_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("editnotes_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('editnotes_2');"><img src="images/downarrow.gif" border="0" id="editnotes_2_img"></a></td>
      <td id="displayads_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("displayads_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('displayads_2');"><img src="images/downarrow.gif" border="0" id="displayads_2_img"></a></td>
      </tr>
      </table>
    </div>
    <div id="tab2" style="display: none;">
    	<table cellpadding="3" cellspacing="0" border="1"  id="atable">
      <tr valign="top">
      <th>Title</th>
      <th>Page Info</th>
      <th>Description</th>
      <th>Copy Drop</th>
      <th>Edit Notes</th>
      <th>Display Ads</th>
      </tr>
      
      <tr valign="top" id="atable_row_1">
      <td id="title_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("title_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('title_1');"><img src="images/downarrow.gif" border="0" id="title_1_img"></a></td>
      <td id="pageinfo_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("pageinfo_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('pageinfo_1');" ><img src="images/downarrow.gif" border="0" id="pageinfo_1_img"></a></td>
      <td  id="description_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("description_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('description_1');"><img src="images/downarrow.gif" border="0" id="description_1_img"></a></td>
      <td id="copydrop_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="checkbox" onChange='updateDB("copydrop_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  </td>
      <td id="editnotes_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("editnotes_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('editnotes_1');"><img src="images/downarrow.gif" border="0" id="editnotes_1_img"></a></td>
      <td id="displayads_1" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("displayads_1");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('displayads_1');"><img src="images/downarrow.gif" border="0" id="displayads_1_img"></a></td>
      </tr>
      
      <tr valign="top" id="atable_row_2">
      <td id="title_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("title_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('title_2');"><img src="images/downarrow.gif" border="0" id="title_2_img"></a></td>
      <td id="pageinfo_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("pageinfo_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('pageinfo_2');"><img src="images/downarrow.gif" border="0" id="pageinfo_2_img"></a></td>
      <td  id="description_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("description_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('description_2');"><img src="images/downarrow.gif" border="0" id="description_2_img"></a></td>
      <td id="copydrop_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="checkbox" onChange='updateDB("copydrop_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  </td>
      <td id="editnotes_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("editnotes_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('editnotes_2');"><img src="images/downarrow.gif" border="0" id="editnotes_2_img"></a></td>
      <td id="displayads_2" onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'"><input type="text" size="20" onChange='updateDB("displayads_2");' onMouseover="this.style.backgroundColor='#f88f5d'" onMouseout="this.style.backgroundColor='#EC7036'">  <a href="javascript:void(0);" onmousedown="showdata('displayads_2');"><img src="images/downarrow.gif" border="0" id="displayads_2_img"></a></td>
      </tr>
      </table>
     </div>
     
     <div id="datadiv" style="display: none;">This is the data for the cell</div>

</body>
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.