1

The problem i have is that i have 6 overlay DIVs which are hidden just off of the page as it loads. If the user loads the page when the browser is maximised, this works perfectly, the DIVs are position just off the top of the page. However if the browser is started with a smaller window, and then the user changes the height of the window (or maximises the browser) the hidden DIVs are no longer hidden off of the top, and creep on to the top of the page.

This is the CSS code i have written for the DIV:

.Overlay {
position:absolute;
text-align:justify;
width:100%;
z-index:1;
background:#111111;
display:block;
opacity:0.9;
min-height:100%;
top: -100000px;
}

And here is the jQuery that calculates the position of the div, just off the top of the screen:

var currentHeight1 = $('#Overlay1').outerHeight(true);
var currentHeight2 = $('#Overlay2').outerHeight(true);
var currentHeight3 = $('#Overlay3').outerHeight(true);
var currentHeight4 = $('#Overlay4').outerHeight(true);
var currentHeight5 = $('#Overlay5').outerHeight(true);
var currentHeight6 = $('#Overlay6').outerHeight(true);

$(document).ready(function() {   
$('#Overlay1').css({'top':-currentHeight1-50},function(){
});
$('#Overlay2').css({'top':-currentHeight2-50},function(){
});
$('#Overlay3').css({'top':-currentHeight3-50},function(){
});
$('#Overlay4').css({'top':-currentHeight4-50},function(){
});
$('#Overlay5').css({'top':-currentHeight5-50},function(){
});
$('#Overlay6').css({'top':-currentHeight6-50},function(){
});
});

I am fairly certain that i need to have a function that utilises

$(window).resize(function(){...})

However, i cannot seem to get the function to recalculate where the DIVs should be placed when the browser window size is changed. Any help appreciated!

MA84
  • 97
  • 8
  • What's the reason behind this? Can you not just set them to `display: none` and then add a class to the body once it is loaded and use additional CSS to set `display: block` (for example `.loaded .Overlay {display: block;}`). – ClarkeyBoy May 24 '14 at 20:00
  • Check this for why your top position is bad http://stackoverflow.com/questions/8971152/is-text-indent-9999px-a-bad-technique-for-replacing-text-with-images-and-what – Pete May 24 '14 at 21:09
  • I'm not sure what exactly you're using this for, but regardless it's a bad idea. As pointed out by @ClarkeyBoy, use display:none, then show it when needed. $elem.show() and $elem.hide(). If it's a child element of the body, or whatever container you want if just above, use position:absolute;bottom:100%; which will accomplish the goal of putting the bottom of the element just above the screen. There might be other or better alternatives if you can provide a more clear use. – David Hobs May 24 '14 at 23:39

1 Answers1

0

If your intention is to hide the elements you should toggle between display: none and display: block in css. But if you really needed to get them off screen you would need 3 arrays.

  • Array 1 element position in the start.
  • Array 2 for where they are after $(window).resize(function(){ // your code to get new current position })
  • Array 3 an array that compares the difference between Array 1 and Array 2

However as @Pete mentioned it's not good to render a bunch of very LARGE elements. When you do something like 

    min-height:100%;
    top: -100000px;

What you've just down is make a bunch of (6 from the looks of your code) very large overlays with a width of 100000px + their own width since the browser has to render huge element box boundaries for such elements.

DrewT
  • 4,983
  • 2
  • 40
  • 53