Home/ Questions/Q 8740433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:07:48+00:00

I have a div with four containers in it, it overflow hides some of

  • 0

I have a div with four containers in it, it overflow hides some of this content, and when it’s clicked I’d like it to animate to the height of the sum of these four containers. Right now it doesn’t quite go the full height and I’m not sure why. The container I’m trying to animate to a new height is news. I guess I have two questions, why is what I’m doing not animating it to the right height, and two is there a better way to add the contents of a container together? I have a js bin set up here http://jsbin.com/elijuj/2/edit and this is what I have for code right now:

HTML

<body>
<DIV id="container_total">
<div id="news" class="shadow blue">
  <div id="news_1">bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla 
blabla bla bla bla bla blabla bla bla bla bla bla</div>
  <div id="news_2">bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla 
bla</div>
  <div id="news_3">bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla 
blabla bla bla bla bla blabla bla bla bla bla bla</div>
  <div id="news_4">bla bla bla bla bla blabla bla bla bla bla blabla bla bla bla bla  
blabla bla bla bla bla blabla bla bla bla bla bla</div>
</div>
<div id="photos" class="shadow blue">
</div>
<div id="welcome" class="shadow blue">
</div>
<div id="update_1" class="shadow blue">
</div>
<div id="update_2" class="shadow blue">
</div>
<div id="events" class="shadow blue">
</div>
<div id="directions" class="shadow blue">
</div>
</DIV>
</body>

CSS

#container_total {
width: 489px;
position: relative;
border: 1px solid red;
}
#news {
width: 314px;
height: 165px;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
cursor: pointer;
}
#news_1 {
 padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
border:1px solid blue;
}
#news_2 {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
border:1px solid blue;
}
#news_3 {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
border:1px solid blue;
}
#news_4 {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
border:1px solid blue;
}



#photos {
width: 160px;
height: 165px;
top: 0px;
right: 0px;
position: absolute;
}
#welcome {
width: 489px;
height: 200px;
top: 180px;
position: absolute;
overflow: hidden;
}
#update_1 {
width: 160px;
height: 165px;
top: 395px;
right: 175px;
position: absolute;
overflow: hidden;
}
#update_2 {
width: 160px;
height: 165px;
top: 395px;
right: 0px;
position: absolute;
overflow: hidden;
}
#events {
width: 314px;
height: 165px;
top: 575px;
left: 0px;
position: absolute;
overflow: hidden;
}
#directions {
width: 160px;
height: 165px;
top: 575px;
right: 0px;
position: absolute;
z-index: 4;
overflow: hidden;
}
.shadow {
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
}
.blue {
background: #eff5f8;
}

JS

$("#container_total").css("height", $("#news").height() + $("#welcome").height() +   
$("#update_1").height() + $("#directions").height() + 60);


function news_open() {

$("#container_total").animate({
"height": $("#news_1").height() + $("#news_2").height() + $("#news_3").height() +  
$("#news_4").height() + $("#welcome").height() + $("#update_1").height() +   
$("#directions").height() + 60
}, 450 );

$("#news").animate({
"height": $("#news_1").height() + $("#news_2").height() + $("#news_3").height() +     
 $("#news_4").height()
}, 450 );

$("#welcome").animate({
"top":180 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() +  
$("#news_4").height() - 165
}, 450 );

$("#update_1").animate({
"top":395 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() +  
$("#news_4").height() - 165
}, 450 );

$("#update_2").animate({
"top":395 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() +  
$("#news_4").height() - 165
}, 450 );

$("#events").animate({
"top":575 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() +  
$("#news_4").height() - 165
}, 450 );

$("#directions").animate({
"top":575 + $("#news_1").height() + $("#news_2").height() + $("#news_3").height() +  
$("#news_4").height() - 165
}, 450 );
}


$("#news").click(function() {
news_open();
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    alrighty figured it out, two things were happening, the border of 1 px on each div that was not being acounted for, and because the contents of the div is text .height needed to be .innerHeight() for the news_1 through news_4

    • 0