[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 261
  • Last Modified:

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 http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27211880.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

0
captain
Asked:
captain
  • 9
  • 7
  • 7
2 Solutions
 
Kyle HamiltonData ScientistCommented:
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?

0
 
captainAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Jesse MatlockUX EngineerCommented:
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.
0
 
Jesse MatlockUX EngineerCommented:
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 ;)
0
 
captainAuthor Commented:
thanks so far , will check it out tomorrow.

cheers
capt.
0
 
Jesse MatlockUX EngineerCommented:
Sounds great.. let us know how it goes or if you need any assistance along the way ;)
0
 
captainAuthor Commented:
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.
0
 
Jesse MatlockUX EngineerCommented:
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
0
 
Kyle HamiltonData ScientistCommented:
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.
0
 
Jesse MatlockUX EngineerCommented:
actually... that url will render correctly to googles CDN, and it's the link that Google provided ;)
but either works just as well :D
0
 
captainAuthor Commented:
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. boxes
The boxes don't seem to line up nor are they the same height...Is this what you see?
0
 
captainAuthor Commented:
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:
 after .clear
0
 
Kyle HamiltonData ScientistCommented:
You can ignore me if you like, but it doesn't work until you fix the link.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js">
0
 
captainAuthor Commented:
Sorry, sorry...I did not mean to ignore you. I will try this straight away..

:o)
0
 
captainAuthor Commented:
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
0
 
Kyle HamiltonData ScientistCommented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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
0
 
Jesse MatlockUX EngineerCommented:
Hey Capt,.

Yes, you can first create the various classes of rows you want to match the heights of (.row1, .row2, .row3, .row4, etc.) and whatever is on the page, will get matched heights... You won't get an error if you call more classes than you have:

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

-- and this is all you have on the page:

#box1.row1   |   #box2.row1  
#box3.row2   |   #box4.row2

Open in new window


I hope that answers that question :) Also, my bad for missing your previous post re: the heights not working,.. glad @kozaiwaniec was able to help out !

With this solution, you can use it in anyway you want - eg. you can use classes to style the boxes and another class to match their heights.. using ID's is not the best when targeting multiple elements, since they're unique and each has to be defined in the CSS. So, you could do:

.box.row1   |   .box.row1  
.box.box-blue.row2   |   .box.box-red.row2

Open in new window


and use the .box class to style ALL your boxes main attributes, and then use .box-blue and .box-red (or some other such name) to style additional variations of those .box's ... then you can call .row1 and .row2 in the matched height code and they'll line up correctly. This way, you can easily create new boxes, apply a color variation to them, and match their heights quickly and with minimal new coding.. your CSS might look something like:
/* create the primary style for all .box's */
.box{
	width: 200px;
	padding: 10px;
	margin: 5px;
	float: left;
	color: #fff;
}
/* style their H2's */
.box h2 {
	font-size: 20px;
	padding: 10px 20px;
	background: #000;
}
/* create a blue variation - this only changes the H2, but you could also target the .box-blue and style it */
	.box.box-blue h2 {
		background: #003399;
	}
/* etc... etc.. */
	.box.box-red h2 {
		background: #990000;
	}

Open in new window


0
 
captainAuthor Commented:
Thanks to both of you, I will implement this soon

capt.
0
 
Jesse MatlockUX EngineerCommented:
Great to hear that will work for you Capt. Keep up the great work !
0
 
captainAuthor Commented:
Cheers. Thx again :o)
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 9
  • 7
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now