Skip to content

Instantly share code, notes, and snippets.

@jotaelesalinas

jotaelesalinas/adjust_zoom

Created July 17, 2014 22:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jotaelesalinas/0fc7be782ed6aefe6e3c to your computer and use it in GitHub Desktop.
Save jotaelesalinas/0fc7be782ed6aefe6e3c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
adjust_zoom
/*
* Sets the zoom to make the "wrapper" element fit the width of the page.
*
* $element is either a jQuery object -the wrapper- or directly the width of the wrapper in pixels.
* margin_perc (optional) is the percentage that will be left at both sides
* max_ratio (optional) is an upper limit to the zoom ratio
*
* This function does nothing if the original or the resulting width of the wrapper is greater than the <html> element.
* Dependencies: jQuery (any version will do)
*
* Tip: in order to avoid flickering, add code in the <head> section, before any content is rendered.
*/
var adjust_zoom = function ($element, margin_perc, max_ratio) {
var current_width = typeof $element === 'object' ? $element.width() : $element / 1,
$page = $('html').first(),
page_width = $page.width(),
ratio = page_width / current_width;
if (current_width >= page_width) {
return;
}
if ( typeof margin_perc !== 'undefined' && margin_perc !== null ) {
ratio *= (100 - (margin_perc/1)) / 100;
}
if ( typeof max_ratio !== 'undefined' && max_ratio !== null ) {
ratio = Math.min(ratio, max_ratio);
}
if ( current_width * ratio >= page_width ) {
return;
}
var css_zoom = {
"transform": "scale(" + ratio + ")",
"transform-origin": "0 0",
"-webkit-transform": "scale(" + ratio + ")",
"-webkit-transform-origin": "0 0",
"-moz-transform": "scale(" + ratio + ")",
"-moz-transform-origin": "0 0",
"-o-transform": "scale(" + ratio + ")",
"-o-transform-origin": "0 0",
"-ms-transform": "scale(" + ratio + ")",
"-ms-transform-origin": "0 0"
};
$page.css(css_zoom);
$page.width( $page.width() / ratio );
}
adjust_zoom( 970 /* $('#wrapper').first() */, 2, 1.25);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment