Caio Ferrari Caio Ferrari - 25 days ago 11
jQuery Question

Sum 50% more in the value of the property when click

I'd like to make the

zoom in
button to sum 50% more to the value always when clicked. In this code, I want to manipulate the Zoom property into the
#mapBox


This the HTML where there are buttons to zoom In and Out

<img src="images/zoomIn.jpg" alt="Zoom In" id="zoomInButton" /> //Zoom In
<img src="images/zoomOut.jpg" alt="Zoom Out" id="zoomOutButton" /> //Zoom Out
<div id="mapBox"> //add zoom style here
<img src="images/map.svg" alt="Map" />
</div>


And the jQuery where I add the
zoom
style to the div
#mapBox


$(document).ready(function() {
$("#zoomInButton").click(function() {
$("#mapBox").css({
"zoom" : "150%"
});
});
});

Answer

This is pretty quick and dirty example, but should give you an idea of one way to start. This creates functions to zoom in and out, and binds them to your buttons.

//starting zoom amount 
var zoom = 150;

function zoomIn(){
  zoom = zoom + 50;
  $("#mapBox").css({
    "zoom" : zoom + "%"
  });
}

function zoomOut(){
  zoom = zoom - 50;
  $("#mapBox").css({
    "zoom" : zoom + "%"
  });
}

$(document).ready(function() {
  $("#zoomInButton").on('click', zoomIn);
  $("#zoomOutButton").on('click', zoomOut);
  $("#mapBox").css({
    "zoom" : zoom + "%"
  });
});