captain
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.
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>
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.
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):
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';
}
}
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:
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.
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>
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"></scr ipt>
to this:
<script src="//ajax.googleapis.com /ajax/libs /jquery/1. 6.3/jquery .js"></scr ipt>
to get the latest version of jQuery ;)
<script src="//ajax.googleapis.com
to this:
<script src="//ajax.googleapis.com
to get the latest version of jQuery ;)
ASKER
thanks so far , will check it out tomorrow.
cheers
capt.
cheers
capt.
Sounds great.. let us know how it goes or if you need any assistance along the way ;)
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.
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:
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
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"));
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.
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
but either works just as well :D
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.
The boxes don't seem to line up nor are they the same height...Is this what you see?
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.
The boxes don't seem to line up nor are they the same height...Is this what you see?
ASKER
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sorry, sorry...I did not mean to ignore you. I will try this straight away..
:o)
:o)
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
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.
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
-------------------------
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.
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks to both of you, I will implement this soon
capt.
capt.
Great to hear that will work for you Capt. Keep up the great work !
ASKER
Cheers. Thx again :o)
line 44: var boxthree = document.getElementById("r
line 46: var boxfour = document.getElementById("r
boxthree and boxfour are undefined because there is no elements with id roundbox50rb or roundbox50lb on the page.
typo?