Skip to content

Instantly share code, notes, and snippets.

@tangent405

tangent405/gist:7da80afb17602bc0c322 Secret

Last active September 8, 2022 07:42
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save tangent405/7da80afb17602bc0c322 to your computer and use it in GitHub Desktop.
Save tangent405/7da80afb17602bc0c322 to your computer and use it in GitHub Desktop.
Download ZIP
Scale Hype Document based on container size (DISCLAIMER: I made this quickly, no promises that this works on every browser)
Raw
gistfile1.html
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function myCallback(hypeDocument, element, event) {
if (isScalePossible()){
window.myHypeContainerId = hypeDocument.documentId();
$('#' + window.myHypeContainerId).css({
'-moz-transform-origin': '0% 0%',
'-webkit-transform-origin': '0% 0%',
'-ms-transform-origin': '0% 0%',
'-o-transform-origin': '0% 0%',
'transform-origin': '0% 0%',
margin: 0
});
scaleSite();
$(window).resize(scaleSite);
}
return true;
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
function scaleSite()
{
var hypeContainer = $('#' + window.myHypeContainerId);
var containerWidth = hypeContainer.width();
var containerHeight = hypeContainer.height();
var parentWidth = hypeContainer.parent().width();
var parentHeight = hypeContainer.parent().height();
var scaleWidth = parentWidth / containerWidth;
var scaleHeight = parentHeight / containerHeight;
var scale = Math.min(scaleWidth, scaleHeight);
var left = (containerWidth * scale < parentWidth) ? ((parentWidth - (containerWidth * scale)) / 2) + 'px' : '0px';
var top = (containerHeight * scale < parentHeight) ? ((parentHeight - (containerHeight * scale)) / 2) + 'px' : '0px' ;
hypeContainer.css({
"-moz-transform" : "scale("+scale+")",
"-webkit-transform" : "scale("+scale+")",
"-ms-transform" : "scale("+scale+")",
"-o-transform" : "scale("+scale+")",
"transform" : "scale("+scale+")",
"left" : left,
"top" : top
});
}
function isScalePossible()
{
can = 'MozTransform' in document.body.style;
if(!can) can = 'webkitTransform' in document.body.style;
if(!can) can = 'msTransform' in document.body.style;
if(!can) can = 'OTransform' in document.body.style;
if(!can) can = 'transform' in document.body.style;
if(!can) can = 'Transform' in document.body.style;
return can;
}
</script>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment