CODEWITHSUNDEEP
javascriptjqueryhtml
Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Image height calculation for its corresponding right side div

I have below html structure 

<div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="papers left text-center">
                    <img src="http://wowthemes.net/demo/leroy/img/dummies/18.jpg" class="imgs" alt=""><br />
                </div>
            </div>
            <div class="col-md-6">
                <div class="papers right text-center">
                    <h4 class="notopmarg nobotmarg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
                </div>
            </div>
        </div>
</div>

and it produces below output in DOM

Image output

I am trying to set height of right div i.e. .papers.right based on the height of .papers.left element once the image in left div gets loaded, using below jquery technique and as you can notice in the image, the height does not get set equally on the right side. 

$('.imgs').each(function () {
    $(this).on('load', function () {
         var height = $(this).closest('.papers.left').height();
         $(this).closest('.row').find('.papers.right').css({ 'min-height': height }, { 'max-height': height }).height(height);
    })
})

But unfortunately, I am not able to succeed. I don't know why but the above code doesn't respond, even after writing inside $(document).ready(). To my utter surprise, it works when I keep an alert before assigning height. So I just tried with setTimeout too but even that didn't work. Any other alternatives for this approach and if possible please explain why this isn't working?

Update

This isn't duplicate of question linked as it is pure CSS solution and am here dealing with some jquery technique and none of the solutions mentioned in the linked answer worked for me. I am not able to reproduce this problem in fiddle as it is also specific to whole site and jquery could be the one possible solution for this.

Upvotes: 2

Views: 83

Answers (1)

charlietfl
charlietfl

Reputation: 171690

Your css() syntax is incorrect. When using object as argument it is one object within which you can have as many properties as needed.

Change:

.css({ 'min-height': height }, { 'max-height': height })

TO

.css({ 'min-height': height, 'max-height': height  })

Upvotes: 1

Related Questions