Link to home
Start Free TrialLog in
Avatar of captain
captainFlag for United Kingdom of Great Britain and Northern Ireland

asked on

DIV Box size dilemma. Added even more boxes.

Hi

I have had a neat solution in java to adjust the height of 2 DIV boxes in https://www.experts-exchange.com/questions/27211880/DIV-Box-size-dilemma-Added-more-boxes.html

However I have added yet another set of boxes to the template and have adapted the code as shown.

It is on our index page and should adjust the Home and News column divs. The html file only contains 2 sets of boxes that need to be adjusted, therefore in this particular file 'boxthree' and 'boxfour' in the JS do not need to be accounted for.

'boxfive' and 'boxsix' are the additions at the top: in CSS  roundbox23 (Home) and roundbox13 (News)

If I only use the JS for the boxfive and boxsix it works fine but as soon as the code below is used adding the other boxes, only the bottom two boxes (boxone & boxtwo) resize and the new ones don't.

What am I missing?

thx capt.


<script type="text/javascript" >

	window.onload= function()
	{
		function same_height()
		{var boxone = document.getElementById("roundbox50r");
			var height_bo = boxone.clientHeight;
			var boxtwo = document.getElementById("roundbox50l");
			var height_bt = boxtwo.clientHeight;
			if ( height_bo > height_bt ) 
			{
				boxtwo.style.height = height_bo+'px';
			} 
			else if ( height_bt > height_bo ) 
			{
				boxone.style.height = height_bt+'px';
			}
			var boxthree = document.getElementById("roundbox50rb");
			var height_bbo = boxthree.clientHeight;
			var boxfour = document.getElementById("roundbox50lb");
			var height_bbt = boxfour.clientHeight;
			if ( height_bbo > height_bbt ) 
			{
				boxfour.style.height = height_bbo+'px';
			} 
			else if ( height_bbt > height_bbo ) 
			{
				boxthree.style.height = height_bbt+'px';
			}
			var boxfive = document.getElementById("roundbox23");
			var height_bbf = boxfive.clientHeight;
			var boxsix = document.getElementById("roundbox13");
			var height_bbs = boxsix.clientHeight;
			if ( height_bbf > height_bbs )
			{
				boxsix.style.height = height_bbf+'px';
			} 
			else if ( height_bbs > height_bbf ) 
			{
				boxfive.style.height = height_bbs+'px';
			}			
		}
		same_height();
	}
</script>

Open in new window

Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

you have an error in the script:

line 44: var boxthree = document.getElementById("roundbox50rb");
line 46: var boxfour = document.getElementById("roundbox50lb");

boxthree and boxfour are undefined because there is no elements with id roundbox50rb or roundbox50lb on the page.

typo?

Avatar of captain

ASKER

Hi

no, as I said that script deals with other pages too. On this page boxthree and boxfour are not present, but the others are.

Does this mean that if the script encounters items that are not present it does not execute the script after that error?

I thought it would just jump to the next item and ignore that one that is missing.

Thanks for your help

capt.
you're calling the whole function on load. So yes, if it encounters something it can't process, it will fail.

You'll have to put in something to check for the existence of the boxes.

This might be what you need to test for boxes' existence (apply to all the box pairs):

 
var boxone = document.getElementById("roundbox50r");
var height_bo = boxone.clientHeight;
                        
var boxtwo = document.getElementById("roundbox50l");
var height_bt = boxtwo.clientHeight;
                        
if (boxone && boxtwo){
                        
    if ( height_bo > height_bt ){
       boxtwo.style.height = height_bo+'px';
       } 
       else if ( height_bt > height_bo ){
       boxone.style.height = height_bt+'px';
       }
}

Open in new window

The simplest way, IMHO, would be to use jQuery and this short snippet to match the heights of your divs.


add this to your <head> tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" charset="utf-8">     
function equalHeight(group) {
	var tallest = 0;
	group.each(function() {
		var thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}
	$(document).ready(function(){
               // you can use any class here that you want to, I used .column in this example 
   		equalHeight($(".column"));
	});  // end docready
</script>  

Open in new window


Please note that this code will automatically load the needed jQuery lib from googles servers, so you wont need to save it to yours. In the example above, all elements with the class '.column' will get their heights matched to that of the tallest element. :)

Let me know if this works for you.
Also, you can change this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>

to this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js"></script>

to get the latest version of jQuery ;)
Avatar of captain

ASKER

thanks so far , will check it out tomorrow.

cheers
capt.
Sounds great.. let us know how it goes or if you need any assistance along the way ;)
Avatar of captain

ASKER

Will do, reading through the  answers I will need you to probably address the need for equal height only for boxes side by side not all elements.

kozaiwaniec deals with the existing code and checks for presence of the element which seems straight forward and logical. If I understand your solution correctly it applies the height adjustment indiscriminately to all elements, this is not desired though.

Assume:

Box1 | Box2
Box3 | Box4
Box5 | Box6

Only boxes next to each other are same height, each pair in its own right having max height according to the taller of the two not the tallest of all boxes.

thx.
capt.
Hi Capt.
Great questions.. the code I pasted above is actually designed to be modular.. so, instead of being tied to one elements ID, you can target multiple elements CLASSes,. and match their height. For example.. if you have 4 divs you want to match heights of, BUT, you want to match heights of box1 and box2, and then the heights of box3 and box4.. using the IDs is cumbersome. Instead, if you do something like thisL

(I'm using the standard # to represent the ID and . for the class)

#box1.row1   |   #box2.row1  

#box3.row2   |   #box4.row2

#box5.row3   |   #box6.row3

The code I pasted above will match these 'sets', in this way:

               equalHeight($(".row1"));
               equalHeight($(".row2"));
               equalHeight($(".row3"));

Open in new window


In this way, you can create as many groups as you want, to match the heights of.. and simply assign each element in each group a class,.. I hope that makes sense. To hopefully clarify this more clearly, I have included a demo file.. that shows how this works.. with all the code in place. :)
 
Please let me know if you have any questions on how to best use this.. I really think this will lend itself well to your specific layout style.. this way, you can match each row's height, no matter what the page layout is :)

 heights.php
Hi cloud9manager,

Nice.

Just noticed a typo on this line so it wasn't working ("http:" was missing)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js"></script>    

(not trying to get any assist points here, just wanted to point that out)

Cheers.
actually... that url will render correctly to googles CDN, and it's the link that Google provided ;)
but either works just as well :D
Avatar of captain

ASKER

Ok, here is where I am unsure. Do I need to provide for the classes in CSS with attributes that I have already assigned to IDs. I have never really differentiated much in classes and IDs other than the multiple use restriction of DIVs.

Secondly I have not looked at your code but loaded PHP into Opera, after that renamed PHP to html and loaded. Both with same result below. User generated image
The boxes don't seem to line up nor are they the same height...Is this what you see?
Avatar of captain

ASKER

OK, just noticed that you had no .clear CLASS defined in the style sheet.
Inserting that now breaks the boxes neatly into columns but the codes still produces uneven heights:
 User generated image
SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of captain

ASKER

Sorry, sorry...I did not mean to ignore you. I will try this straight away..

:o)
Avatar of captain

ASKER

Ha! This works now. I totally overlooked your comment in the flurry of exchanges.

If I have an empty style for the .row classes:

.row1 .row2 { }

and reference this in the html as in the example, will this work or do I need to find a common style?

thx
OK, ...not until you put it on an actual server. Then it works. It won't work locally. Maybe that's why it had the php ext. To force us to serve it up :)

I've never seen a link written with the two slashes though. It's either been http://, or nothing at all.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js">

-------------------------

you can use what ever class you want, like cloud9 said. So long as each box in the pair has the same class, and you're calling the function on that class.
Sorry, I didn't fully read your question. Doh.

You don't need to define those styles at all. They're only being used for reference.
I should probably wake up a little more before I start posting.. :))


He is using the .row classes for positioning. However, that can be done on the id's too. There's more than one way to skin a cat. The way he has it is a good way.

Cheers
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of captain

ASKER

Thanks to both of you, I will implement this soon

capt.
Great to hear that will work for you Capt. Keep up the great work !
Avatar of captain

ASKER

Cheers. Thx again :o)