Jquery: change negative position based on element height

Question

I have the following Jquery that will slide a box up and off the canvas. It is written for a specific height ie 200px box moving off by -200px. I want to change it so that the box can be any height.

$(function() {
    $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'160px'},500);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-200px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });

});

I would like to change it so that the {'top':'-200px'} is actually whatever the height of #box is at that time.

Answer 1

Without your exact HTML, it's a bit hard to guess what your HTML actually looks like, therefore I can't actually test what is written here, but in theory it should work. For a more precise answer please post in your relevant HTML and CSS and I'll update my answer.

To get the height of the content, you use $(...).height(), the height of the element outside of the content is accessed via $(...).outerHeight(), and passing a value of true to the .outerHeight() function returns the height of the object including any top/bottom margins.

$(function() {
  $('#activator').click(function() {
    $('#overlay').fadeIn('fast', function() {
      $('#box').animate({
        'top': '160px'
      }, 500);
    });
  });
  $('#boxclose').click(function() {
    var box_height = -1 * $('#box').outerHeight(true);
    $('#box').animate({
      'top': box_height + 'px'
    }, 500, function() {
      $('#overlay').fadeOut('fast');
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

More Correct Way

Given that animations in Javascript are a bit outdated, and many (if not all) developers would recommend you use CSS to achieve as much as possible whenever possible, here is what I would actually do to achieve your goal.

$(function() {

  $('#activator').on('click', function(e) {
    e.preventDefault();
    //Make sure the link doesn't do that thing we don't want it to do.
    $('#box').toggleClass('visible');
  })
})

#box {
  position: absolute;
  /* We want to have an absolutely positioned element, I assume? */
  transition: all 400ms linear;
  /*Tell the browser that ALL changes to animatable CSS properties will happen over 400 miliseconds, and occur in a linear way. You could change this to ease-in or ease-out, or make your own bezier curve*/
  top: -100%;
  /*Have the element start off entirely off screen.*/
}
#box.visible,
#box:target {
  /* If we have the visible class to the element, OR the element is the current target (i.e. your URL looks like 
  website.com/page.html#box, the top will be 160px down. Change this to whatever you'd like.*/
  top: 160px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, consectetur.</p>
  <p>Sequi alias debitis quos provident tenetur quis non odio. Voluptatum.</p>
  <p>Illum reprehenderit ducimus delectus. Totam maxime harum, ratione eligendi aut.</p>
  <p>Mollitia iusto enim eveniet corporis obcaecati. Veritatis quia velit perspiciatis.</p>
  <p>Eveniet repudiandae sed ipsa eos, tempora quidem sit ipsam non.</p>
</div>
<div class="main">
  <h3>Hello!</h3>
  <a href="#box" id="activator">Activate!</a>
</div>

Perhaps a mildly better way?

This is a mild change, just in case you want it so that the #box element is always 160px from the top. It does this by using position:fixed The only real change from this code to the code before it is that there is more HTML and that the CSS styles have changed.

$(function() {

  $('#activator').on('click', function(e) {
    var $box = $('#box');
    //I hate repeating myself in code.
    e.preventDefault();
    //Make sure the link doesn't do that thing we don't want it to do.
    $box.toggleClass('visible')
  })
})

#box {
  position: fixed;
  transition: all 400ms linear;
  top: -100%;
}
#box.visible {
  top: 160px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, consectetur.</p>
  <p>Sequi alias debitis quos provident tenetur quis non odio. Voluptatum.</p>
  <p>Illum reprehenderit ducimus delectus. Totam maxime harum, ratione eligendi aut.</p>
  <p>Mollitia iusto enim eveniet corporis obcaecati. Veritatis quia velit perspiciatis.</p>
  <p>Eveniet repudiandae sed ipsa eos, tempora quidem sit ipsam non.</p>
</div>
<div class="main">
  <h3>Hello!</h3>
  <a href="#" id="activator">Activate!</a>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis sequi vitae deleniti commodi hic recusandae officia et unde nesciunt beatae eos sit obcaecati, fuga sapiente expedita aliquam, atque minima. Doloremque.</p>
  <p>Eligendi illo molestiae, consequatur, temporibus quos repellat quod quasi nemo quibusdam deleniti sapiente cum similique sequi. Optio voluptates eius vel cupiditate quidem sunt maiores nesciunt doloribus. Maiores nam aliquam molestiae!</p>
  <p>Iure illo qui iusto minima. Accusamus veritatis quas similique, magnam fugiat provident quam officiis qui deserunt, eveniet non. Voluptas quaerat nobis sequi ex repellendus ea, quibusdam dolorem ipsam. Beatae, neque.</p>
  <p>Esse deserunt recusandae assumenda dolorem, perferendis magni nostrum atque, cumque. Ex molestiae exercitationem ipsa ullam porro delectus minima, quos sunt eveniet iure eaque ut a, nam ea! Officiis, dolorum, optio.</p>
  <p>Eius debitis voluptatum molestiae cumque cupiditate, reprehenderit reiciendis consequatur similique autem commodi necessitatibus corporis voluptatem eaque officia animi pariatur optio dolores voluptates ipsa amet molestias illum. Eveniet molestiae laboriosam,
    ipsum.</p>
  <p>Corporis ad fugiat nostrum architecto deserunt, voluptatum et facilis suscipit eaque eligendi qui consectetur veritatis possimus id dolorum porro provident, repellendus magnam! Magnam ullam autem laborum accusamus nobis ipsa, sunt.</p>
  <p>Cumque nihil laboriosam suscipit corrupti unde quos inventore, corporis odit esse accusantium tempore ea saepe asperiores vero quam eligendi veniam harum. Ex in vel tempora ipsa consectetur fuga amet esse.</p>
  <p>Sequi, nobis, pariatur autem omnis consectetur voluptatibus nulla? Ea ratione enim rerum nihil. Hic quidem commodi itaque, quam optio minus accusantium possimus repellat, accusamus error illum omnis, dolorem esse dolore.</p>
  <p>Sint quam doloremque vel error, dolorem repudiandae natus aliquid et dolorum esse tenetur commodi quis? Ipsa adipisci eveniet error. Quos veniam minus, ipsam id porro perspiciatis consequatur adipisci magni molestias!</p>
  <p>Explicabo ut maiores animi iusto fuga maxime amet saepe exercitationem debitis quos harum quis eaque repellendus modi odio, consectetur quibusdam tempore aspernatur vel dolores similique labore sapiente, incidunt. Illum, aperiam.</p>
  <p>Aliquid temporibus quia error voluptatum, asperiores perferendis ex sed quam delectus assumenda veritatis repellendus exercitationem id doloremque fugit soluta fuga veniam, totam enim, libero quidem deserunt eveniet culpa harum. Mollitia.</p>
  <p>Eos assumenda unde, modi. Necessitatibus porro, tempore distinctio eaque quos doloribus accusantium quaerat molestiae mollitia id. Unde, minima, sapiente error, vero quod soluta excepturi illum eligendi sequi aspernatur dolorum. Vero.</p>
  <p>Doloribus natus odit, asperiores pariatur placeat nam mollitia! Eaque sapiente quos, dolorem minus eius vero dicta laboriosam, odit accusamus quae blanditiis nihil accusantium modi reprehenderit quibusdam excepturi. Illum, repellendus, fuga.</p>
  <p>Facilis, maxime magni impedit voluptatem atque illo explicabo dolorum iure eius laudantium maiores minima sit possimus vitae aut quibusdam hic nemo, nesciunt delectus repellat. Ab tempora similique delectus amet quos.</p>
  <p>Alias aut saepe eaque sapiente velit soluta commodi, aspernatur maxime cumque qui rerum et modi distinctio temporibus molestiae, quae voluptatem nobis esse ipsa, recusandae. Soluta sint quae qui architecto odit!</p>
  <p>Accusantium quam perferendis aperiam, unde? Sunt cumque, quod non reiciendis, possimus laborum. Quod corporis aperiam alias laudantium facere tempora iure, consequatur corrupti fuga nobis nostrum vel voluptates ut consequuntur iste!</p>
  <p>Cum rerum dignissimos voluptates assumenda enim doloremque quidem ipsum iusto quaerat ex amet magnam ab nam adipisci consectetur perspiciatis eveniet fuga quae debitis, quibusdam at neque! Voluptates quaerat cumque labore.</p>
  <p>Omnis, labore aspernatur provident deleniti aliquid quasi accusamus mollitia eveniet consequatur voluptatum eligendi officiis perspiciatis ut praesentium delectus, modi eum magnam odio! Dolores quod porro nesciunt, sint quis iure nulla!</p>
  <p>Exercitationem earum enim autem, adipisci temporibus rem itaque beatae quidem est nesciunt hic eligendi molestias, ea repellendus. Necessitatibus possimus deleniti blanditiis molestiae nihil minus ducimus veniam tempora commodi incidunt, labore!</p>
  <p>Consequuntur, laboriosam praesentium temporibus sunt illo atque minus et neque, cumque minima natus ducimus velit. Cumque ab expedita fugiat libero eaque aut laudantium consequatur voluptatibus error similique. Blanditiis, sapiente fuga.</p>
  <p>Voluptas quo quidem minus sint aperiam culpa nulla debitis commodi et id explicabo amet vitae, illo optio deserunt recusandae ducimus harum adipisci, quam repudiandae blanditiis in aliquam. Modi, numquam, magnam!</p>
  <p>Iure nulla neque quis officiis, blanditiis sit autem nobis laboriosam ex! Fuga praesentium reiciendis harum excepturi doloribus suscipit, accusantium iste eligendi nobis, adipisci eveniet illum quibusdam placeat nihil quaerat, maiores!</p>
  <p>Eos sed ex, eveniet totam enim consequuntur molestias nobis quia tempora eaque rem atque veritatis suscipit vero ratione. Ducimus autem perferendis iusto, rerum molestias deserunt omnis, laborum harum reiciendis commodi.</p>
  <p>Dicta quae mollitia accusantium voluptate vitae modi illum, alias, quam provident dolores consequuntur. Incidunt quaerat tempore nulla voluptatem voluptates eos culpa ab a officia, earum optio sit dicta, neque magni.</p>
  <p>Vitae deleniti voluptatibus eveniet doloremque tenetur odit quasi magnam, mollitia, fugiat, numquam sapiente autem delectus distinctio possimus et hic, sint provident error iste. Perferendis quisquam ullam repellat debitis possimus non.</p>
  <p>Ad dolore possimus rem suscipit sit ullam deserunt itaque quisquam impedit veritatis voluptates atque facilis, quos iure rerum mollitia cumque dicta inventore commodi, soluta minus modi. Accusantium reiciendis neque quidem.</p>
  <p>At quo, impedit ut expedita dolor necessitatibus quibusdam laborum quidem animi non est inventore dolorum sunt unde odit eos error itaque esse excepturi perferendis explicabo reiciendis! Unde quo consectetur molestias.</p>
  <p>Quidem quas doloremque nisi corporis error omnis vitae odio, qui et maiores eius illum culpa enim aliquam, placeat asperiores, aperiam ea molestias rerum, amet. Facere quia, iure quidem! Ad, nihil.</p>
  <p>Vero laborum, sint dolores accusantium placeat, quis asperiores adipisci sit, vitae possimus quae. Blanditiis non asperiores modi, nemo cupiditate autem voluptas! Suscipit consectetur vel aperiam error, quam ea, corporis atque!</p>
  <p>Soluta ipsum, quasi, tenetur nam dolorem iste vel. Velit tempora esse, soluta. Quisquam impedit deserunt culpa cum, explicabo perspiciatis fugiat maxime ex. Distinctio mollitia perferendis ut quos porro, eos. Eius.</p>
</div>