Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts

    Set multiple div height by container

    Hi Folks,

    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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Arnaud View Post
    None of the DIV elements have a fixed height:
    But do they have a fixed width? Even relative to their parent?
    Quote Originally Posted by Arnaud View Post
    I want to do this with js and not with any html/css
    Strange aim. 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?
    Last edited by Kor; 11-10-2010 at 12:46 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    Last edited by Kor; 11-10-2010 at 01:01 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Hi Kor, thanks for your input.

    But do they have a fixed width? Even relative to their parent?
    Yes they do have a fixed width.

    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.

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Arnaud:

    Try this:

    Code:
    <!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>

  • #6
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Digging into it right now. Looks to be what I want! Thanks
    Chuck Norris counted to infinity.
    Twice.

  • #7
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    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.

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Arnaud View Post
    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 View Post
    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 View Post
    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!
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    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.

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Arnaud View Post
    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)
    Last edited by Kor; 11-10-2010 at 07:09 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •