Skip to content

Instantly share code, notes, and snippets.

@xtrmstep

xtrmstep/Div auto heigh resizing.html

Created July 7, 2016 22:39
Show Gist options
  • Save xtrmstep/ba3ac5035cb75e98407ac787559a195d to your computer and use it in GitHub Desktop.
Save xtrmstep/ba3ac5035cb75e98407ac787559a195d to your computer and use it in GitHub Desktop.
Download ZIP
How DIV can be automatically resized during resizing of the window
Raw
Div auto heigh resizing.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script src="http://code.jquery.com/jquery-git.min.js"></script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
.header {
background-color: greenyellow;
height: 50px;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
}
.footer {
background-color: gray;
bottom: 0px;
height: 50px;
left: 0px;
position: fixed;
width: 100%;
}
.container {
left: 0px;
margin: 10px auto;
position: relative;
top: 50px;
width: 99%;
}
.scroll-container {
border: 1px solid black;
overflow: auto;
width: 100%;
}
.visible {
display: block;
}
.invisible {
display: none;
}
</style>
<script type="text/javascript">
$(function() {
initDivResizing({
$detailsPanel: $(".container"),
$scrollContainer: $(".scroll-container"),
$window: $(window),
$footer: $(".footer")
});
});
function initDivResizing(vars) {
resizeDiv(vars.$detailsPanel, vars.$window, vars.$footer, vars.overrideOffsetBottom);
resizeDiv(vars.$scrollContainer, vars.$window, vars.$footer, vars.overrideOffsetBottom);
$(window).resize(function() {
var _vars = vars;
resizeDiv(_vars.$detailsPanel, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
resizeDiv(_vars.$scrollContainer, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
});
$(".container a").click(function() {
if ($(this).hasClass("page1c")) togglePage(1, 2);
if ($(this).hasClass("page2c")) togglePage(2, 1);
var _vars = vars;
resizeDiv(_vars.$detailsPanel, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
resizeDiv(_vars.$scrollContainer, _vars.$window, _vars.$footer, _vars.overrideOffsetBottom);
return false;
});
}
function resizeDiv($div, $window, $footer, overrideOffsetBottom) {
if ($div.length > 0) {
var offset;
// visible element should have top,left > 0
for (var i = 0; i < $div.length; i++) {
offset = $($div[i]).offset();
if (offset.top > 0 && offset.left > 0) break;
// this data will be used if nothing found
offset = { top: 0, left: 0 };
}
var offsetBorder = 20; // extra offset to account borders and other spaces
var vieportWidth = $window.width();
var vieportHeight = $window.height();
// calc space from the top-left
var offsetTop = offset.top + offsetBorder;
var offsetLeft = offset.left + offsetBorder;
// calc space from the bottom
var offsetBottom = $footer.height();
if (overrideOffsetBottom)
offsetBottom = overrideOffsetBottom;
// resize all divs
$div.width(vieportWidth - offsetLeft);
$div.height(vieportHeight - offsetTop - offsetBottom);
}
}
function togglePage(show, hide) {
$(".page" + hide).removeClass("visible").addClass("invisible");
$(".page" + show).removeClass("invisible").addClass("visible");
}
</script>
</head>
<body>
<div class="header"></div>
<div class="container">
<div><a class="page1c">page 1</a>|<a class="page2c">page 2</a></div>
<div class="page1 invisible">
<div>1</div>
<div>Some text before the scroll container</div>
<div class="scroll-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
<div class="page2 visible">
<div>2</div>
<div class="scroll-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment