CODEWITHSUNDEEP
javascriptjquery
Behseini
Behseini

Reputation: 6330

How to decrease the height of the map element

I am working on the below code. Why am I not able to decrease the height of the #map?

As you can see the .btn-enlarge is enlarging the height of the image but the .btn-shrinkis not decreasing the height

$(function() {
  var unit = 10;
  
  $(".btn-enlarge").on("click", function(){
    unit = unit+ unit; 
    $("#map").animate({ 
                'height':  $("#map").height()+unit+ 'px'
                });
});
    $(".btn-shrink").on("click", function(){
    unit = unit+ unit; 
    $("#map").animate({ 
                'height':  $("#map").height()+'-'+unit+ 'px'
        });
});
});
#map {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(0, 0, 0);
  cursor: move;
  overflow: hidden;
  Background-image: url('https://i.pinimg.com/originals/dd/a5/17/dda5177a3db95a93c0c84ff6847fda23.jpg');
  background-repeat: no-repeat;
    background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <button type="button" class="btn-shrink">-</button>
  <button type="button" class="btn-enlarge">+</button>
<div id="map"></div>

Upvotes: 2

Views: 41

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206478

You can always use += and -=

jQuery(function( $ ) {

  var step = 10;

  $(".btn-enlarge, .btn-shrink").on("click", function() {
    var sym = $(this).is(".btn-enlarge") ? "+=" : "-=";
    $("#map").animate({height: sym + step});
  });
  
});
#map {
  width: 300px;
  height: 300px;
  border: 1px solid rgb(0, 0, 0);
  background: url('https://i.sstatic.net/O724n.jpg') 50% 50% / contain no-repeat;
}
<button type="button" class="btn-shrink">-</button>
<button type="button" class="btn-enlarge">+</button>
<div id="map"></div>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

The above's

$("#map").animate({height: sym + step});

translates to:

$("#map").animate({height: "+=10"}); // or
$("#map").animate({height: "-=10"}); // depending on the clicked button

Upvotes: 2

Related Questions