Hope someone can help. I want to do this with js and not with any html/css tables, image fills or whatever other trick, but I don't know how...
Say I have multiple DIV containers below each other, which contain multiple DIV boxes floating next to each other. None of the DIV elements have a fixed height:
Code:
<div id="container1">
<div id="box1">some text</div>
<div id="box2">some double more text</div>
<div id="box3">some other text</div>
</div>
<div id="container2">
<div id="box4">some double more text</div>
<div id="box5">some more text</div>
<div id="box6">some other text</div>
</div>
I want for each container (separately) to have the contained box divs to fit the biggest one in height.
For example, in container1, if box2 contains more text than the others, I want box1 and box3 height to fit box2. And in container2, if box4 has more text than the others, I want box5 and box6 height to fit box4, etc.
In my dreamworld, the solution would be flexible and fully automated, which means, it would look for all container divs of class x or Id x and apply the same rule to all child divs.
Hope it's clear enough ;o)
I have heard of jquery "equalheights" plugin but I don't think it can do that ? or then I misunderstood something. Could I be using some "get element by class" function and then apply a style.height to the divs?
TIA for any suggestion
__________________
Chuck Norris counted to infinity.
Twice.
To get an equal height for floated divs it's quite a tricky mission. And, as I said, you can not avoid some HTML and CSS codes. After all, HTML generate and controls the content, and CSS generate and controls the presentation, right? JavaScript can only create/change/remove some of those HTML elements or CSS properties, right?
At a start point, here's a CSS trick solution to get equal height for floated divs with no height set. Note that you need two extra parent divs to achieve that:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
</script>
<style type="text/css">
#container3 {
float:left;
width:300px;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2 long text long text long text long text long text long text long text</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
</body>
</html>
Now, if you want to create all those CSS properties and append them to the elements using JavaScript, fell free to, but, frankly, I don't see why you should do that
But do they have a fixed width? Even relative to their parent?
Yes they do have a fixed width.
Quote:
You must use CSS, anyway, except that you want probably to set some CSS properties on-the-fly, with the help of JavaScript. Is it so?
Of course. I didn't post any css code but for sure I am using css to style all the boxes. Hence my question, how would I loop through the div container elements (using jquery?) get the highest height of the child elements and apply to the others.
Here is a screenshot of what it looks like and what I want to achieve.
I knew about the nested div trick but I want to avoid heavy html.
Thanks!
__________________
Chuck Norris counted to infinity.
Twice.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function init(){
var nDiv = document.getElementsByTagName('div');
var nDataContainer = [];
for (i=0; i<nDiv.length; i++)
{
if (nDiv[i].className == "dataContainer")
{
nDataContainer[nDataContainer.length] = nDiv[i];
}
}
for (i=0; i<nDataContainer.length; i++)
{
var nHeight = [];
var nDataDisplay = nDataContainer[i].getElementsByTagName('div');
for (n=0; n<nDataDisplay.length; n++)
{
nHeight[nHeight.length] = nDataDisplay[n].clientHeight;
}
nHeight.sort(function(a,b)
{
return b-a;
}
)
for (t=0; t<nDataDisplay.length; t++)
{
nDataDisplay[t].style.height = nHeight[0] + "px";
}
nDataContainer[i].style.height = nHeight[0] + "px";
}
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
body {background-color: #fffacd; margin-top: 60px;}
.dataContainer {border: 1px solid black; margin-bottom: 12px; padding-top: 5px; padding-bottom: 5px;
padding-left: 5px;}
.dataDisplay {font-family: arial; font-size: 10pt; width: 75px; border: 1px solid black;
background-color: #87ceeb; float: left; margin-right: 15px;}
</style>
</head>
<body>
<div class="dataContainer">
<div class="dataDisplay">
Tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper
urna egestas.
</div>
<div class="dataDisplay">Anything</div>
<div class="dataDisplay">
Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu
interdum malesuada sed eu augue. Suspendisse quis nisi massa.
</div>
<div class="dataDisplay">Anything</div>
<div class="dataDisplay">Anything</div>
</div>
<div class="dataContainer">
<div class="dataDisplay">Anything</div>
<div class="dataDisplay">
Tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper
urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu
interdum malesuada sed eu augue. Suspendisse quis nisi massa.
</div>
<div class="dataDisplay"></div>
</div>
<div class="dataContainer">
<div class="dataDisplay">
Tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper
urna egestas. Sed ac mauris et arcu interdum malesuada sed eu augue.
Suspendisse quis nisi massa. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu
interdum malesuada sed eu augue. Suspendisse quis nisi massa.
</div>
<div class="dataDisplay">Anything</div>
<div class="dataDisplay">Anything</div>
<div class="dataDisplay">
Tincidunt id ante. Etiam egestas orci in velit tristique ut ullamcorper
urna egestas. Duis eget risus sem, eu aliquet arcu. Sed ac mauris et arcu
interdum malesuada sed eu augue. Suspendisse quis nisi massa.
</div>
<div class="dataDisplay">Anything</div>
</div>
</body>
</html>
I wanted to share my results since I finally got it working, with less javascript code and less html than in all solutions I have found around.
I used jquery so I could identify each container div by its class attribute, then loop through the child elements, identify the biggest one in height, apply it to all children, and do this for each parent element.
The javascript:
Code:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
// loop through all elements with "equal-height" class
$('.equal-height').each(function(){
// set newHeight to zero
var newHeight = 0;
// loop through children to identify biggest height
$(this).children().each(function(){
var currentHeight = $(this).height();
if (currentHeight >= newHeight){
newHeight = currentHeight;
}
});
// loop through children to set height to match biggest one
$(this).children().each(function(){
$(this).height(newHeight);
});
});
});
</script>
The HTML:
Code:
<div id="container1" class="equal-height">
<div id="box1">some text</div>
<div id="box2">some double more text</div>
<div id="box3">some other text</div>
</div>
<div id="container2" class="equal-height">
<div id="box4">some double more text</div>
<div id="box5">some more text</div>
<div id="box6">some other text</div>
</div>
I am far from being a javascript guru so there might be an easier way to do that! If anyone wants to help more...
Thanks!
__________________
Chuck Norris counted to infinity.
Twice.
I wanted to share my results since I finally got it working, with less javascript code and less html than in all solutions I have found around.
It's an illusion. A library brings more javascript code, as you must load 2 external js files.
Quote:
Originally Posted by Arnaud
I used jquery so I could identify each container div by its class attribute,
Big discovery. There's already a native JavaScript simple reference:
Code:
document.getElementsByClassName()
For IE7 there's a small workaround of several lines of code. Nothing fancy - if you want it, I will post it.
Quote:
Originally Posted by Arnaud
I am far from being a javascript guru so there might be an easier way to do that!
Yes. the easier way is to create your own code, but you have to have some skill for that. Anyway, if that JQuery code style does the job, leave as it is.
We are happy that you have found a solve. Good luck!
Yes I agree you are right on the external js files / illusion. But I wouldn't know how to do the same with pure js. I still find that jquery turns the thing to be easier, plus I am using jquery for other purposes already on the same project, so I think I'll stick with it.
Thanks for the help!
__________________
Chuck Norris counted to infinity.
Twice.
plus I am using jquery for other purposes already on the same project,
That's a good point. I agree. Leave it so, then.
Most of the time people use JQuery for much too simple jobs, as they are too lazy to learn JavaScript and they think they can cheat this way Usually they finish by messing up things, and come here for help. But as they have not even the slightest idea about what is JavaScript and what can this language do, they are not able to understand our advices
Working with a JavaScript library implies an average knowledge of JavaScript language, that is all Same with other frameworks related with other languages (as !Joomla and PHP language, for instance)
Yeah I see what you mean. But I am not using jquery because I am lazzzy to learn. I have learned html, css, php, mysql and a little js on my own. I am not too bad at php but I often have some difficulties turning my ideas into code with javascript. Actually I hate the syntax and I'm often lost. Therefore jquery gives you the ability to easily do things I would have no idea how to do using regular javascript without any library.
But I promise, I won't modify the core jquery files, mess up everything and come here afterwards
Thanks for the advices and help.
__________________
Chuck Norris counted to infinity.
Twice.
Before you post, read our: 
. There's already a native JavaScript simple reference:
Usually they finish by messing up things, and come here for help. But as they have not even the slightest idea about what is JavaScript and what can this language do, they are not able to understand our advices 
