I Have to create page width in zoom operation
So I have few options
<select id="scaleSelect" class="scale selectpicker" title="Zoom" onchange="zoomval();">
<option title="" value="I have to convert the page width to scale value" id="page_fit">Page Width</option>
<option title="" value="0.5" >50%</option>
<option title="" value="0.75">75%</option>
<option title="" value="1">100%</option>
<option title="" value="1.25">125%</option>
<option title="" value="1.5">150%</option>
<option title="" value="2">200%</option>
<option title="" value="3">300%</option>
<!-- <option title="" value="4">400%</option> -->
</select>
I have calculated screen width (1366px) , Now I have to convert in to scale and I have to use for page width option.
How can I able to do this?
function zoomval(){
console.log("Value changing")
var page_f_val = $('#page_fit').val();
var page_fit = $("#scaleSelect").val();
if(page_fit == page_f_val){
console.log("Value Matched")
$('#viewer > div').map(function()
{
console.log(this.id)
var pagecontainter_val = document.getElementById(this.id)
console.log(pagecontainter_val)
$("#"+this.id).css({"width":"100%"});
// if($("#"+this.id+" #pdf-annotate-edit-overlay").length > 0)
// {
// document.getElementById(this.id).removeChild(document.getElementById('pdf-annotate-edit-overlay'));
// }
});
}
}
You can zoom in or zoom out using css property
var max = 2, min=0.5,curZoom = 1; function zoom(inc){ curZoom+=(inc*0.1); $("#zoomable").css('zoom',curZoom); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='zoomable'><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wisconsin.svg"></div> <button onclick='zoom(1)'>Zoom In</button> <button onclick='zoom(-1)'>Zoom Out</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.