Question

I have the following function to get the height of each div element with a particular css class. Each container has a side button composed of a div element. I can’t set the height of the button div with css because it depends on the height of the container div and each container can be a different height. So I have to do it with jquery. I am trying to set the height of the button based on the height of the container so they are equal heights. Get the container height and set the button height equal to that.

Can you help? Thank you!

// sidebar button
function SideBarBtn(){
    $('.ContactWrap').each(function(){
        var FormHeight = $(this).outerHeight();
        var SideBtnHeight = FormHeight -25 + 'px';
        $('.SideBtn').css('height', SideBtnHeight);
        $('.SideBtn').fadeIn('slow').fadeOut('slow').fadeIn('slow');
    });
}

html:

<div class="ContactWrap">
   <a href="#submit" class="SideBtn"> S u b m i t - B a r</a>
   .....
</div>

Answer 1

The problem is caused by these lines:

$('.SideBtn').css('height', SideBtnHeight);
$('.SideBtn').fadeIn('slow').fadeOut('slow').fadeIn('slow');

These selectors select all elements with class SideBtn, and apply the new styles to it. To solve the problem, you have to use a more specific selector.

The correct code is:

var $btn = $(this).find('.SideBtn');
$btn.css('height', SideBtnHeight);
$btn.fadeIn('slow').fadeOut('slow').fadeIn('slow');