Is there any good way for zoom in and zoom out functionality in a page using jQuery mobile. I goggled it and found
window.parent.document.body.style.zoom = 1.5;
Is there any better way to do zoom in and zoom out functionality in jQuery mobile?
Here is a sample workaround, DEMO http://jsfiddle.net/yeyene/aGuLE/
$(document).ready(function () {
$('#zoomIn').on('click', function () {
zoomIn(1.2);
});
$('#zoomOut').on('click', function () {
zoomOut();
});
});
function zoomIn(zoomLev) {
if (zoomLev > 1) {
if (typeof (document.body.style.zoom) != undefined) {
$(document.body).css('zoom', zoomLev);
}else {
// Mozilla doesn't support zoom, use -moz-transform to scale and compensate for lost width
$('#divWrap').css({
-moz-transform: 'scale( + zoomLev + )',
width: $(window).width() / zoomLev
});
}
}
}
function zoomOut() {
$(document.body).css({
zoom : '',
position : '',
left: ,
top: ,
-moz-transform : ,
width : ''
});
}
