I would like to know how how to zoom in and zoom out using form type range
in jquery.
I am trying to zoom in and zoom out div class
but I don't know how to zoom using jquery can any one help.
<input type="text" >
Join Stack Overflow to learn, share knowledge, and build your career.
I would like to know how how to zoom in and zoom out using form type range
in jquery.
I am trying to zoom in and zoom out div class
but I don't know how to zoom using jquery can any one help.
<input type="text" >
CSS3 has a new zoom
property, but you may need to use vendor prefixes on it depending on your browser.
To increase the size of a div, you can use positive values (> 1) and to decrease you can use negative values
JavaScript Solution
var range = document.getElementById("my-range");
var square = document.getElementById("square");
range.addEventListener("change", function() {
square.style.zoom = this.value;
});
#square {
margin: 20px;
background: red;
width: 50px;
height: 50px;
}
<input id="my-range" type="range" step="0.25" min="0.25" max="4" />
<div id="square"></div>
jQuery solution
$("#my-range").on("change", function() {
$("#square").css({"zoom": $(this).val() });
});
#square {
margin: 20px;
background: red;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my-range" type="range" step="0.25" min="0.25" max="4" />
<div id="square"></div>
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom