Need some assistance with a website project for a client. The scrollbars on each page are not loading or changing height until the window is resized. I have a jQuery scrollbar in place, but disabling it does not solve the issue as the normal scrollbar behaves the same way. The content is within a child div of the scrolling div, but the height of the content div remains static even when the content changes. Trying to turn the code from $(window).resize into its own function has not been successful.
It's quite frustrating and annoying to deal with this.
EDIT: Added the complete JS code with edits as advised by Max Dunn, but the issue persists.
//--details
$(document).ready(function() {
$("#info").show();
});
$(document).ready(function() {
$('#elephant').click(function() {
if ($('#info').css('display') == "none")
$('#info').fadeIn('slow'),
$('#stay').hide();
$('#todo').hide();
$('#nav').hide();
$('#gifts').hide();
$('#contact').hide();
$('#photos').hide();
$('#welcome').hide();
$("#bubblecontent").show();
resizeBubble();
});
});
... // rest of the JS code follows
body {
overflow-y: hidden;
overflow-x: hidden;
font-family: "museo-slab", georgia, serif;
font-weight: 100;
height: 100%;
}
#container {
margin-left: auto;
margin-right: auto;
}
#bubble {
background-color: #f5fec3;
height: 100%;
width: 900px;
margin-left: auto;
margin-right: auto;
border-radius: 15px;
-moz-border-radius: 15px;
overflow-y: auto;
}
#bubblecontent {
width: 860px;
margin-left: auto;
margin-right: auto;
overflow-y: auto;
}
<div id="container">
<div id="bubble">
<div id="bubblecontent">
<div id="contentdiv1">
blah
</div>
<div id="contentdiv2">
blah
</div>
</div>
</div>
</div>