Created
July 17, 2014 22:21
-
-
Save jotaelesalinas/0fc7be782ed6aefe6e3c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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