Jquery Zoon In/Out

by yeyene

HTML

<div id="divWrap" data-role="page">
    <div data-role="header">
         <h1>Page Title</h1>

    </div>
    <div data-role="content">Zoom in <a id="zoomIn" href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
Zoom out <a id="zoomOut" href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>

    </div>
    <div data-role="footer" data-position="fixed">
         <h4>Page Footer</h4>

    </div>
</div>

JavaScript

$(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 : ''	
	});
}