Skip to content

Instantly share code, notes, and snippets.

@csalzano
Last active September 18, 2019 01:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save csalzano/035c315ab6afe6d6c406061af7e6b2f9 to your computer and use it in GitHub Desktop.
Save csalzano/035c315ab6afe6d6c406061af7e6b2f9 to your computer and use it in GitHub Desktop.
Allow the sizes of a thickbox.js modal to be specified as percentages of the viewport instead of pixels
Object.defineProperty(Number.prototype, 'percentOfViewportToPixels', {
enumerable: false,
value: function( heightOrWidth ) {
var viewport_size = 'height' == heightOrWidth
? Math.max( document.documentElement.clientHeight, window.innerHeight || 0 )
: Math.max( document.documentElement.clientWidth, window.innerWidth || 0 );
return Math.round( viewport_size * ( this / 100 ) );
}
});
jQuery(document).ready(function()
{
jQuery('a.thickbox').each(function()
{
if( false === this.href.indexOf( '%' ) ) { return; }
var rgx = /(width|height)=(\d+)%/g;
while( match = rgx.exec( this.href ) ) {
this.href = this.href.replace( match[1] + '=' + match[2] + '%', match[1] + '=' + parseInt( match[2] ).percentOfViewportToPixels( match[1] ) );
}
});
});
@csalzano
Copy link
Author

I started hacking on thickbox.js today after learning that it is included in WordPress core. I was disappointed to learn that the dimensions of the modal must be specified in pixels, so I wrote this code to enable the use of percentage dimensions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment