-1

I'm working on a Wordpress theme for my blog and I have a kind of overlay-container. If you klick on a button it slides in from the top and pushes the whole page down.

I use jQuery for it, with this little code:

$(document).ready(function () {

// variables
var overlay = $('#layout-overlay'); // Overlay ID

 // hide overlay-container
     overlay.css({
         display: 'block',
         marginTop: -overlay.height()
     });

...and more code...

As you can see, I just hide the container by assigning a negative margin-top depending on height of the container which itself depends on the content.

As long as I put together the layout, everything worked fine. Now that I started to put it into an actual Wordpress theme, the overlay-container is visible on page-load and page-reload on every page it is included. It may be just for some milliseconds, but it is clearly noticeable. It is there for the blink of an eye and then it is gone as it is supposed to be from the very beginning.

Any ideas how I can retime the whole thing?

I put the JS in the <head> tag and I made sure it is the first code to be fired.

Boaz
  • 19,892
  • 8
  • 62
  • 70
paelzer
  • 115
  • 2
  • 11
  • Have you tried hiding the overlay by setting the default for display to none in a stylesheet? #layout-overlay {display:none;} Then, when the page loads it will update the display to block and set the height. – tleish May 21 '14 at 23:10
  • Hey, thanks a lot. I actually forgot to copy the line of the css... it is late and I really didn't see that. ;) – paelzer May 21 '14 at 23:14
  • If that's the case, you should consider removing the question altogether, as per the Help Center it is *about a problem that can no longer be reproduced or that was caused a simple typographical error*. – Boaz May 21 '14 at 23:20

1 Answers1

0

If you want to get rid of the glitch, first set the overlay's regular CSS to display: none. If the problem occurs, try displaying it after the page is fully loaded using load.

Bit more about ready vs load: jQuery - What are differences between $(document).ready and $(window).load?

Community
  • 1
  • 1
lesssugar
  • 15,486
  • 18
  • 65
  • 115