CODEWITHSUNDEEP
javascripthtml
Arun CH
Arun CH

Reputation: 101

changing the height of a div using javascript dynamically does not works

I have two div's.The height of first div changes with the height of second div.But code seems to have some trouble.My code is below. For example,

<div id="profile1">akdsfkj</div>

<div id="schedules1" style="min-height:150px;"></div>

<script>
document.getElementById('profile1').style.height=$('#schedules1').height();
</script>

Thanks in advance

Upvotes: 0

Views: 50

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075895

The height property on the DOM style object requires units, but jQuery's height() method just returns a number (of pixels). So:

document.getElementById('profile1').style.height=$('#schedules1').height() + "px";
// Change ----------------------------------------------------------------^^^^^^^

But note that the style attribute on your schedules1 element is invalid, you've used min:height:150px rather than min-height:150px. (It's fixed in the question now.)

Also, it's a bit odd to mix jQuery and straight DOM code in this way. Using all jQuery:

$('#profile1').css("height", $('#schedules1').height());

Upvotes: 1

kol
kol

Reputation: 28728

This works (jsfiddle):

HTML (change min:height to min-height):

<div id="profile1">akdsfkj</div>
<div id="schedules1" style="min-height:150px;"></div>

JavaScript (use jQuery to set the height):

$('#profile1').height($('#schedules1').height());

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20428

By using Jquery we can do this..

var fheight=$('#profile1').height();
$('#schedules1').css('height',fheight);

Upvotes: 0

Related Questions