CODEWITHSUNDEEP
javascript
Ovidiu Zeicu
Ovidiu Zeicu

Reputation: 13

Find a table row height and apply padding to a div based on row's height

I have a div that have it's content server-generated dynamicaly within a table. I need to have the bottom row on top of the table and I did it with CSS. But, when the content increase it's height, this fourth row covers the first row. The HTML looks like this:

<div class="main">
<table id="news">
<tr id="tr1">
<td id="td1">
<fieldset id="fieldset1">Content</fieldset>
</td>
</tr>
<tr id="tr2">
<td id="td2">
<fieldset id="fieldset2">Content</fieldset>
</td>
</tr>
<tr id="tr3">
<td id="td3">
<fieldset id="fieldset3">Content</fieldset>
</td>
</tr>
</table>
</div>

The CSS: 

.main { padding-top: 150px; } /* Making room for 3rd row */
#tr3 { margin-top: -500px; } /* Move it above the other rows */

What I need is a way to find the height of #tr3 and to pass this value to both .main's padding and #tr3's margin-top. I've tried to put together something from the solutions I found trough search, but my knowledge is not that extended and what I came up is this: 

var tr3Height = document.getElementById('#tr3').clientHeight;
var mainPadding = document.getElementById('.main');

function SetAttribute (ObjectID, Value) { 
   document.getElementById('.main').style.paddingTop = tr3Height + "px";
   document.getElementById('#tr3').style.marginTop = -(500 + tr3Height) + "px";
}

I'm pretty sure that this is how it should be done, but I have no idea how to finish it. Maybe someone can help by setting me in the right direction. Thank you.

Edit: I forgot to mention: I can't alter the HTML within the .main div, because is server generated.

Upvotes: 0

Views: 145

Answers (1)

dsgriffin
dsgriffin

Reputation: 68616

Current problems:

  • You have multiple elements using the same ID's. ID's should always be unique.
  • getElementById('#tr3') is invalid.
  • getElementById('.main') is also invalid.
  • You can't set marginTop on an element which is displayed as a table-cell.
  • You're not actually ever calling your function (and judging by comments you want it on page load)

Solutions (ordered as above):

  • Change all duplicate ID's in your mark-up to be unique.
  • This should be getElementById('tr3').
  • Replace the class main with an ID main and use getElementById('main').
  • I don't really understand what you're trying to achieve with this part (at the moment anyway)...
  • There's no need for the seperate function if you want it on load, just use window.onload = function()..

This will solve your load and padding issues (note I've changed the mark-up to have unique ID's - check the jsFiddle below), although as you can see in the comments, your margin change, while registered, will have no effect:

window.onload = function(){
   var tableRow3Height = document.getElementById('tableRow3').clientHeight;
   console.log(tableRow3Height); // returns 42
   document.getElementById('main').style.paddingTop = tableRow3Height + "px";
   var tableRow3 = document.getElementById('tableRow3');
   tableRow3.style.marginTop = -500 + tableRow3Height + "px";
   console.log(tableRow3.style.marginTop) // returns -458px, although it won't do anything.
};

jsFiddle example here.

Upvotes: 1

Related Questions