Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: I used tables ... so sue me ...
Usually I don’t need the height to be exactly the same for equal cols, but I’ve had a few cases where it’s been called for (I’m a fan of the same bg for all cols!). This simple bit of JS from coding forums gets the job done:
/*
been awhile, but this creates an infinite loop if used with
absolute positioning (if I remember correctly). Works fine
with floated columns.
*/
function setHeight(what1,what2){
height1=document.getElementById(what1).offsetHeight;
height2=document.getElementById(what2).offsetHeight;
if (height1>height2){document.getElementById(what2).style.height=height1+'px';}
if (height2>height1){document.getElementById(what1).style.height=height2+'px';}
if (height1==height2){return;}
}
setInterval("setHeight('content','secondary')",1); //div1,div2Why use javascript? For me, it’s easier, and it means convoluted CSS or tables aren’t needed. Plus, if a user has JS turned off, the site still functions, just the columns aren’t even, so it still looks OK.
Last edited by jm (2006-12-07 03:21:09)
Offline
Re: I used tables ... so sue me ...
Why use javascript? For me, it’s easier, and it means convoluted CSS or tables aren’t needed. Plus, if a user has JS turned off, the site still functions, just the columns aren’t even, so it still looks OK.
very nice jm … i think nothing wrong with that … and the percentage of users that have javascript off is pretty minimal … i am not sure why i do it .. there is no logical reason, but i tend to stay away from javascript for positioning stuff… but use them for rollovers.
that said ,,, there is no logical reason ,,, just some stupid legacy in my head … this may help me solve the other problem about placing the link at the bottom of the divs …
_db
Last edited by dbulli (2006-12-07 03:58:34)
nuff-respec ::: dannyb
Offline
Re: I used tables ... so sue me ...
The problem with applying the offsetHeight of one object to another is that you will end up with different heights depending on the amount of padding in the second object.
If Obj1 has an offsetHeight of 200px and Obj2 has a vertical padding of 20px if you apply 200px as the height to OBj2 you will actually end up with a height of 220px.
I used this to try to deal with padding
function getHeightPadding(el)
{
if (window.getComputedStyle) {
var topPady = document.defaultView.getComputedStyle(el,'').getPropertyValue("padding-top");
var bottomPady = document.defaultView.getComputedStyle(el,'').getPropertyValue("padding-bottom");
var topMary = document.defaultView.getComputedStyle(el,'').getPropertyValue("margin-top");
var y = (checkAuto(topPady) + checkAuto(bottomPady)) + checkAuto(topMary);
} else if (el.currentStyle) {
var topPady = eval('el.currentStyle.paddingTop');
var bottomPady = eval('el.currentStyle.paddingBottom');
var topMary = eval('el.currentStyle.marginTop');
var y = (checkAuto(topPady) + checkAuto(bottomPady)) + checkAuto(topMary);
} else {
var y = 0;
}
return y;
}but the browsers return settings for auto differently. This allowed me to deal with the padidng as a number even when it was auto or null.
function checkAuto(value) {
if ( isNaN(parseInt(value)) ) { //== "auto" || value == null || !value)
var x = 0;
} else {
var x = parseInt(value);
}
return x;
}What I ended up doing was have a wrapping div and set all the columns to the same height as the wrapping div (which will always be as high as the tallest column). You can use this to set the height on an infinite number of columns.
function fullheight(id) {
if (document.getElementById) {
var wrapper = document.getElementById(id);
if (wrapper) {
var desiredHeight = wrapper.offsetHeight;
for (var i=0; i < wrapper.childNodes.length; i++) {
var column = wrapper.childNodes[i];
var heightPadding = getHeightPadding(column);
column.style.height = (desiredHeight - heightPadding) + 'px';
}
}
}
}This is a slightly simplified version. The version I use actually allows you to have any number of instances of columns that need to have equal heights. It requires using certain classes though, to identify the wrapper and the columns.
This could probably be made much simpler through the use of Prototype ot JQuery. Either way you slice it though it’s all work arounds for a deficiency in CSS. One is visual, the other actually alters the elements. Both have shortcomings.
Last edited by hakjoon (2006-12-07 04:18:55)
Shoving is the answer – pusher robot
Offline
Re: I used tables ... so sue me ...
ahh … an even “lazier” way … very nice …
nuff-respec ::: dannyb
Offline