Skip to content

Instantly share code, notes, and snippets.

@JonathanTech

JonathanTech/index.html

Created December 8, 2014 22:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JonathanTech/fd6e59166a26f4dd8d3a to your computer and use it in GitHub Desktop.
Save JonathanTech/fd6e59166a26f4dd8d3a to your computer and use it in GitHub Desktop.
Download ZIP
Stack overflow - prevent parent div from resizing when child div resizes // source http://jsbin.com/cuwihesavo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Stack overflow - prevent parent div from resizing when child div resizes" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.adminContent {
background-color:lightgreen;
padding:10px;
}
.resetBody{
background-color:#880000
}
.resetBody2{
background-color:lightblue
}
</style>
</head>
<body>
<div class="adminContent"> //Wrapper div, this should not change in height of 668px
<div class="adminTitle"> much text wow!
much text wow!
much text wow!
much text wow!
much text wow!
<a href="~/Admin/Index">Admin</a> > Manage Class Roster
</div>
<div class="resetBody"> Div 1<br/>
Div 1<br/>
Div 1<br/>
Div 1<br/>
Div 1<br/>
Div 1<br/>
</div>
<div class="resetBody2" style="display:none" > Div 2 is taller<br/>
Div 2<br/>
Div 2<br/>
Div 2<br/>
Div 2<br/>
Div 2<br/>
Div 2<br/>
</div>
</div>
<div style="margin-top:10px;">
<button id="togglebtn" >Toggle</button>
</div>
<script id="jsbin-javascript">
$(document).on("click","#togglebtn", function(){
var divs = $('.resetBody, .resetBody2');
var hiddenDiv = divs.filter(":not(:visible)");
var visibleDiv = divs.filter(":visible");
visibleDiv.fadeToggle(
{
complete:function(){
hiddenDiv.fadeToggle();
}
}
);
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Stack overflow - prevent parent div from resizing when child div resizes" />
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="adminContent"> //Wrapper div, this should not change in height of 668px
<div class="adminTitle"> much text wow!
much text wow!
much text wow!
much text wow!
much text wow!
<a href="~/Admin/Index">Admin</a> > Manage Class Roster
</div>
<div class="resetBody"> Div 1<br/>
Div 1<br/>
Div 1<br/>
Div 1<br/>
Div 1<br/>
Div 1<br/>
</div>
<div class="resetBody2" style="display:none" > Div 2 is taller<br/>
Div 2<br/>
Div 2<br/>
Div 2<br/>
Div 2<br/>
Div 2<br/>
Div 2<br/>
</div>
</div>
<div style="margin-top:10px;">
<button id="togglebtn" >Toggle</button>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.adminContent {
background-color:lightgreen;
padding:10px;
}
.resetBody{
background-color:#880000
}
.resetBody2{
background-color:lightblue
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).on("click","#togglebtn", function(){
var divs = $('.resetBody, .resetBody2');
var hiddenDiv = divs.filter(":not(:visible)");
var visibleDiv = divs.filter(":visible");
visibleDiv.fadeToggle(
{
complete:function(){
hiddenDiv.fadeToggle();
}
}
);
});</script></body>
</html>
Raw
jsbin.cuwihesavo.css
.adminContent {
background-color:lightgreen;
padding:10px;
}
.resetBody{
background-color:#880000
}
.resetBody2{
background-color:lightblue
}
Raw
jsbin.cuwihesavo.js
$(document).on("click","#togglebtn", function(){
var divs = $('.resetBody, .resetBody2');
var hiddenDiv = divs.filter(":not(:visible)");
var visibleDiv = divs.filter(":visible");
visibleDiv.fadeToggle(
{
complete:function(){
hiddenDiv.fadeToggle();
}
}
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment