Skip to content

Instantly share code, notes, and snippets.

@laughinghan

laughinghan/autoshrink.html

Last active April 26, 2017 07:51
Show Gist options
  • Save laughinghan/e07fca63a0a5affb3ffcd03c73d33782 to your computer and use it in GitHub Desktop.
Save laughinghan/e07fca63a0a5affb3ffcd03c73d33782 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
autoshrink.html
<!doctype html>
<body style='margin: 0; position: relative'>
<div style='height: 20px'>20px tall</div>
<script src='https://code.jquery.com/jquery-2.2.4.js'></script>
<script>
window.parent.postMessage({
id: 'autoshrink',
msg: '<code>$(\'html\').height()</code>: ' + $('html').height()
+ '; <code>$(document).height()</code>: ' + $(document).height()
+ '; <code>document.documentElement.scrollHeight: '
+ document.documentElement.scrollHeight
+ '; <code>document.body.scrollHeight: '
+ document.body.scrollHeight
}, '*')
</script>
</body>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(window).on('message', function(e) {
$('#' + e.originalEvent.data.id).after(e.originalEvent.data.msg);
});
</script>
<style>
iframe {
height: 20px
}
</style>
</head>
<body>
<p id="simplest">
Simplest autogrow case:
<iframe src="simplest.html"></iframe>
</p>
<p id="autoshrink">
Autoshrink case:
<iframe style="height: 100px" src="autoshrink.html"></iframe>
</p>
<p id="negativeMargin">
Negative <code>margin-bottom</code> case:
<iframe src="negativeMargin.html"></iframe>
</p>
<p id="positionAbsolute">
<code>position:absolute</code> case:
<iframe src="positionAbsolute.html"></iframe>
</p>
<p id="positionRelative">
<code>position:relative</code> case:
<iframe src="positionRelative.html"></iframe>
</p>
<p id="translateY">
<code>transform:translateY()</code> case:
<iframe src="translateY.html"></iframe>
</p>
<p id="outsideBody">
something outside <code>&lt;body&gt;</code> case:
<iframe src="outsideBody.html"></iframe>
</p>
</body>
</body>
Raw
negativeMargin.html
<!doctype html>
<body style='margin: 0; position: relative'>
<div style='height: 100px; margin-bottom: -20px'>100px tall</div>
<script src='https://code.jquery.com/jquery-2.2.4.js'></script>
<script>
window.parent.postMessage({
id: 'negativeMargin',
msg: '<code>$(\'html\').height()</code>: ' + $('html').height()
+ '; <code>$(document).height()</code>: ' + $(document).height()
+ '; <code>document.documentElement.scrollHeight: '
+ document.documentElement.scrollHeight
+ '; <code>document.body.scrollHeight: '
+ document.body.scrollHeight
}, '*')
</script>
</body>
Raw
outsideBody.html
<!doctype html>
<body style='margin: 0; position: relative'>
<div style='height: 100px'>100px tall</div>
<script src='https://code.jquery.com/jquery-2.2.4.js'></script>
<script>
$(function() {
$('<p>something</p>').insertAfter('body');
window.parent.postMessage({
id: 'outsideBody',
msg: '<code>$(\'html\').height()</code>: ' + $('html').height()
+ '; <code>$(document).height()</code>: ' + $(document).height()
+ '; <code>document.documentElement.scrollHeight: '
+ document.documentElement.scrollHeight
+ '; <code>document.body.scrollHeight: '
+ document.body.scrollHeight
}, '*')
});
</script>
</body>
Raw
positionAbsolute.html
<!doctype html>
<body style='margin: 0; position: relative'>
<div style='height: 100px; position: absolute'>100px tall</div>
<script src='https://code.jquery.com/jquery-2.2.4.js'></script>
<script>
window.parent.postMessage({
id: 'positionAbsolute',
msg: '<code>$(\'html\').height()</code>: ' + $('html').height()
+ '; <code>$(document).height()</code>: ' + $(document).height()
+ '; <code>document.documentElement.scrollHeight: '
+ document.documentElement.scrollHeight
+ '; <code>document.body.scrollHeight: '
+ document.body.scrollHeight
}, '*')
</script>
</body>
Raw
positionRelative.html
<!doctype html>
<body style='margin: 0; position: relative'>
<div style='height: 100px; position: relative; top: 20px'>100px tall</div>
<script src='https://code.jquery.com/jquery-2.2.4.js'></script>
<script>
window.parent.postMessage({
id: 'positionRelative',
msg: '<code>$(\'html\').height()</code>: ' + $('html').height()
+ '; <code>$(document).height()</code>: ' + $(document).height()
+ '; <code>document.documentElement.scrollHeight: '
+ document.documentElement.scrollHeight
+ '; <code>document.body.scrollHeight: '
+ document.body.scrollHeight
}, '*')
</script>
</body>
Raw
simplest.html
<!doctype html>
<body style='margin: 0; position: relative'>
<div style='height: 100px'>100px tall</div>
<script src='https://code.jquery.com/jquery-2.2.4.js'></script>
<script>
window.parent.postMessage({
id: 'simplest',
msg: '<code>$(\'html\').height()</code>: ' + $('html').height()
+ '; <code>$(document).height()</code>: ' + $(document).height()
+ '; <code>document.documentElement.scrollHeight: '
+ document.documentElement.scrollHeight
+ '; <code>document.body.scrollHeight: '
+ document.body.scrollHeight
}, '*')
</script>
</body>
Raw
translateY.html
<!doctype html>
<body style='margin: 0; position: relative'>
<div style='height: 100px; transform: translateY(20px)'>100px tall</div>
<script src='https://code.jquery.com/jquery-2.2.4.js'></script>
<script>
window.parent.postMessage({
id: 'translateY',
msg: '<code>$(\'html\').height()</code>: ' + $('html').height()
+ '; <code>$(document).height()</code>: ' + $(document).height()
+ '; <code>document.documentElement.scrollHeight: '
+ document.documentElement.scrollHeight
+ '; <code>document.body.scrollHeight: '
+ document.body.scrollHeight
}, '*')
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment