basically I have a function that resizes elements accordingly with jquery triggering the function on end of the resizing of the window.
it works perfectly apart from when I resize the window back to original size, I do not see the same thing as if I refresh the page. Which is weird considering the exact same function is being called.
The problem can be seen live here
The Js:
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
$(window).resize(function () {
waitForFinalEvent(function(){
loadcontext();
//...
}, 10, "some unique string");
});
function loadcontext() {
var winwidth = window.innerWidth;
var winheight = window.innerHeight;
<!-- Fixes layout on screens -->
if (winwidth < 1200)
{
$('#blockscontainer').css("left", (winwidth / 2)*-1 );
$('.block').css("width", (winwidth - 30)/ 5 );
$('.block').css("height", (winwidth - 30)/ 7.5 );
$('#blockscontainer').css("width", winwidth -20);
}
else
{
$('#blockscontainer').css("left", (1200 / 2)*-1 );
$('.block').css("width", 1173 / 5 );
}
};
The CSS:
body { margin: 0px; padding: 0px; }
#contentcontain {clear: both; left: 50%; }
#blockscontainer {clear: both; height: 100%; max-width: 1180px; width: 100%; background- color: #EEE; padding: 10px; border-radius: 15px;}
#blockcontext {overflow: auto;width: 100% clear: both; position: relative; height: 100%; background-color: #DDD;border-radius: 7px; padding-bottom: 20px;}
#footer { width: 100%; margin-top: 30px; text-align: center; background-color: #666; }
#content { background-color: #333; padding-top: 50px;}
.block {display: inline-block; height: 150px; width: 200px; background-color: #FFF; float: left; margin-top: 20px; border: 1px solid #CCC;}
The HTML:
<body onload="loadcontext()">
<div id="content">
<div id="contentcontain" align="center">
<div id="blockscontainer">
<div id="blockcontext">
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
</div>
</div>
</div>
<center>
<div id="footer">
content
</div>
</center>
</div>
</body>
</html>
When you resize the window below a width of 1200 px, you call these lines:
These are causing the issue you see, as they aren’t reset to any kind of default when you increase the window size back about 1200px wide. This causes the page to look different because the width of #blockscontainer and the height of every .block element has changed.