Aligning items in table cells

[RIRedinPA]

I have to display some tabular data but the table cells to display it will not allow all of the data to be displayed. I want to initially show some truncated date in the cell and have a graphical link that, when clicked, will show the complete data (pop up window, maybe a hidden div made visible).

 

I want the truncated data to be aligned left and the graphic to be aligned right within the cell. The various columns will be different widths. If I give each cell <td> an id would I then be able to return it's width with javascript and position the graphic accordingly. Say graphic is 12 pixels wide and I can determine the cell is 100 pixels wide I could then style the graphic with a {left: 84px;}.

 

Thanks for any help.

 

 

[Maq]

Do you have any code for this yet?  If so, please post it.

[RIRedinPA]

In the post I'm kind of thinking out loud (actually hoping someone would have a magic snippet for me  ). I'm actually fiddling with it now. I'll post in a bit. 

[AV1611]

if(isset($_GET['EXPAND'])){

td.class{

text wrap

}

}

else

{

td.class{don't text wrap}

}

 

in your CSS section

 

OR

 

in the sql row return just display the first 10 characters and ... or whatever

 

you gotta count the string length so it only adds the ... if needed

 

but display the cell in an href as above then clause the whole string instead if it's set

[RIRedinPA]

Do you have any code for this yet?  If so, please post it.

 

Here's where I am so far (its the init function)

 

js file

 

//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.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];
				alert(parseInt(thiscell.width)); 
			}
		}
	}
	/*
	//get count of td cells
	var allcells = document.getElementsByTagName("td"); 
	//loop through them
	for (var c=0; c<allcells.length; c++) { 
		objname = allcells[c].id;
		obj = document.getElementById(objname); 
		objwidth = parseInt(obj.offsetwidth); 

	}
	*/
}

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: 30px;
	left:0px; 
	position: relative; 
	top: 110px;
	left: 100px;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #663333;
	display: block;
}

#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: 30px;
	left:0px; 
	display: none;
	position: relative; 
	top: 110px;
	left: 100px;
	font: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #663333;
}

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

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

.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></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"><input type="text" size="20" onChange='updateDB("title_1");'>  <a href="javascript:void(0);" onmousedown="showdata('title_1');"><img src="images/downarrow.gif" border="0" id="title_1_img"></td>
      <td id="pageinfo_1"><input type="text" size="20" onChange='updateDB("pageinfo_1");'>  <a href="javascript:void(0);" onmousedown="showdata('pageinfo_1');"><img src="images/downarrow.gif" border="0" id="pageinfo_1_img"></td>
      <td  id="description_1"><input type="text" size="20" onChange='updateDB("description_1");'>  <a href="javascript:void(0);" onmousedown="showdata('description_1');"><img src="images/downarrow.gif" border="0" id="description_1_img"></td>
      <td id="copydrop_1"><input type="checkbox" onChange='updateDB("copydrop_1");'>  <a href="javascript:void(0);" onmousedown="showdata('copydrop_1');"><img src="images/downarrow.gif" border="0" id="copydrop_1_img"></td>
      <td id="editnotes_1"><input type="text" size="20" onChange='updateDB("editnotes_1");'>  <a href="javascript:void(0);" onmousedown="showdata('editnotes_1');"><img src="images/downarrow.gif" border="0" id="editnotes_1_img"></td>
      <td id="displayads_1"><input type="text" size="20" onChange='updateDB("displayads_1");'>  <a href="javascript:void(0);" onmousedown="showdata('displayads_1');"><img src="images/downarrow.gif" border="0" id="displayads_1_img"></td>
      </tr>
      
      <tr valign="top" id="etable_row_2">
      <td id="e_r2c1">Field Content  <a href="javascript:void(0);" onmousedown="showdata('e_r2c1');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="e_r2c2">Field Content  <a href="javascript:void(0);" onmousedown="showdata('e_r2c2');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td  id="e_r2c3">Field Content  <a href="javascript:void(0);" onmousedown="showdata('e_r2c3');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="e_r2c4">Field Content  <a href="javascript:void(0);" onmousedown="showdata('e_r2c4');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="e_r2c5">Field Content  <a href="javascript:void(0);" onmousedown="showdata('e_r2c5');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="e_r2c6">Field Content  <a href="javascript:void(0);" onmousedown="showdata('e_r2c6');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      </tr>
      </table>
    </div>
    <div id="tab2" style="display: none;">
    	<table cellpadding="3" cellspacing="0" border="1" width="1000" id="atable">
      <tr valign="top">
      <th>Field Name</th>
      <th>Field Name</th>
      <th>Field Name</th>
      <th>Field Name</th>
      <th>Field Name</th>
      <th>Field Name</th>
      <th>Field Name</th>
      <th>Field Name</th>
      <th>Field Name</th>
      </tr>
      
      <tr valign="top" id="atable_row_1">
      <td id="a_r1c1">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c1');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      <td id="a_r1c2">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c2');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      <td id="a_r1c3">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c3');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      <td id="a_r1c4">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c4');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      <td id="a_r1c5">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c5');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      <td id="a_r1c6">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c6');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      <td id="a_r1c7">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c7');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      <td id="a_r1c8">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c8');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      <td id="a_r1c9">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r1c9');"><img src="images/downarrow.gif" border="0" id="r1c1img"></td>
      </tr>
      
      <tr valign="top" id="atable_row_2">
      <td id="a_r2c1">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c1');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="a_r2c2">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c2');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="a_r2c3">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c3');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="a_r2c4">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c4');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="a_r2c5">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c5');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="a_r2c6">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c6');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="a_r2c7">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c7');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="a_r2c8">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c8');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      <td id="a_r2c9">Field Content  <a href="javascript:void(0);" onmousedown="showdata('a_r2c9');"><img src="images/downarrow.gif" border="0" id="r2c1img"></td>
      </tr>
      </table>
     </div>
     
     <div id="datadiv" style="display: none;">This is the data for the cell</div>

</body>
</html>

 

I should be able to get the width of the cell as that is a read/write property (According to W3C (http://www.w3schools.com/HTMLDOM/dom_obj_tabledata.asp). I'm able to pull the innerHTML this way which is also a property but trying to get width gives me nothing.

 

Any clues??

[AV1611]

I know ZERO js so I can't help you.  My suggestion was a php-only solution... by a clause that simply changes the class on the cell based on if the link says short or long cells.  Or by truncating the info vs. not truncating so you don't need to change the css.

 

 

[RIRedinPA]

I think you misunderstood. I don't care how wide the cells are but I need to know how wide they are (I'm do truncate the text string in PHP -- if (strlen(str) > 40) { ... but I need to place two items in a table cell, one aligned left, one aligned right.

 

The aligned left item is the truncated string, the aligned right item is a link (graphic)  that'll drop down a box which shows the full string and some other data. So a cell would look like this...

 

"It was all very well to say `Drink me,' but the wise little Alice... [space] [button]