Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#13 2006-12-07 03:16:45

jm
Plugin Author
From: Missoula, MT
Registered: 2005-11-27
Posts: 1,746
Website

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,div2

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.

Last edited by jm (2006-12-07 03:21:09)

Offline

#14 2006-12-07 03:57:37

dbulli
Member
Registered: 2004-11-22
Posts: 195
Website

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

#15 2006-12-07 04:15:55

hakjoon
Member
From: Arlington, VA
Registered: 2004-07-29
Posts: 1,634
Website

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

#16 2006-12-07 17:47:50

dbulli
Member
Registered: 2004-11-22
Posts: 195
Website

Re: I used tables ... so sue me ...

ahh … an even “lazier” way … very nice …


nuff-respec ::: dannyb

Offline

Board footer

Powered by FluxBB