CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Sammy7
Sammy7

Reputation: 372

How can I set the div to the height of two other divs with javascript while using bootstrap

I am using javascript to make images appear in a bootstrap template. They all have a with of 292.5px when on a full screen but I would like to make one of the columns set height to the height of two other columns put together. When looking for help I found this:

var right=document.getElementById('box').style.height;
var left=document.getElementById('slideshow3').style.height;
if(left>right)
{
    document.getElementById('box').style.height=left;
}
else
{
    document.getElementById('slideshow3').style.height=right;
}

But it wouldnt work for some reason. And I only need to change #box height to the height of #slideshow4 + #slideshow5

Thanks

---------------Update---------------

please see my jsfiddle Thanks

Upvotes: 2

Views: 351

Answers (5)

Bug
Bug

Reputation: 528

You almost got it right except that style.height properties are not straight numbers ie.. 10px or 100% so you cant compare the raw values, you must parseInt() them first or use .offsetHeight instead (or both) and then add the unit type back when setting them. Please note: .style properties ARE read/write. Also the .style.height property must be set in code before you can read it (so use offsetHeight instead) You are also missing the id attribute in your box div eg.. <div class="box" id="box" style="height: 185px;">

To fix your code above:

var rightHeight=parseInt(document.getElementById('box').offsetHeight);
var leftHeight=parseInt(document.getElementById('slideshow3').offsetHeight);
if(leftHeight>rightHeight){
    document.getElementById('box').style.height=leftHeight+'px';
}else{
    document.getElementById('slideshow3').style.height=rightHeight+'px';
}

The answer to your question:

var height1=parseInt(document.getElementById('slideshow4').offsetHeight);
var height2=parseInt(document.getElementById('slideshow5').offsetHeight);
document.getElementById('box').style.height=(height1+height2)+'px';

Upvotes: 3

sm1215
sm1215

Reputation: 436

Try this function out

//sets the height of an element equal to the combined total height of the specificed slideshow id's
function setHeight(elementClass, slideshowIdArray){
    var totalHeight = 0;
    for(var i = 0; i < slideshowIdArray.length; i++){
        totalHeight += parseInt($('#slideshow'+slideshowIdArray[i]).height());
    }
    $('.'+elementClass).height(totalHeight);
}

I forked your jsfiddle to provide a working example.

located here

I call this function once during intial page load and pass the box class to it along with an array of the two slideshows you want to match height.

I assume you want slideshow 6 to be flush along the bottom in relation to all other slideshows on the page, however, it seems that the H5 tag inside your box div has a margin set on it and this causes slideshow6 to be pushed slightly lower than the other slideshows. This can be adjusted using CSS (removing the margin), or the javascript can be altered to account for this. Your choice

Upvotes: 1

emackey
emackey

Reputation: 12418

So, in your jsfiddle, box is a class, not an id, so it's .box and not #box.

If you want to set its height to be the sum of slideshow3 and slideshow4's height, use:

$('.box').height($('#slideshow3').height() + $('#slideshow4').height());

Upvotes: 1

brk
brk

Reputation: 50291

I created a demo since you have not provided the HTML . Here is what I did

HTML

Please not the use of inline & block level elements

<span id="box">
<div id="cl1" class="c1"> Column 1</div>
<div id="cl2" class="c1"> Column 1</div>
</span>
<span id="slideshow3"> Column 3</span>

Javascript

var left = document.getElementById('box').offsetHeight
var right = document.getElementById('slideshow3').offsetHeight
if(left>right){
    document.getElementById('slideshow3').setAttribute("style","height:"+left+"px");
   }
   else{
document.getElementById('box').setAttribute("style","height:"+right+"px");
        }

CSS

    span{
  width:292.5px;
  display:inline-block;
  float:left;
}
.c1{
  height:100px;
  border:1px solid red;
}
#slideshow3{
  border:1px solid green;
}

JSFIDDLE

Upvotes: 0

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10282

Use jquery like this, It may help you

left = $("#left").height();
right = $("#right").height();
if(left<right)
  $("#slideshow3").height(right);
else
  $("#box").height(left);

Upvotes: 0

Related Questions