Currently, I am in the process of developing a custom Wordpress theme for my blog which includes an overlay-container. When a button is clicked, this container slides in from the top and pushes down the entire page.
To achieve this functionality, I am utilizing jQuery with the following code snippet:
$(document).ready(function () {
// variables
var overlay = $('#layout-overlay'); // Overlay ID
// hide overlay-container
overlay.css({
display: 'block',
marginTop: -overlay.height()
});
...additional code...
The approach I have taken involves initially hiding the container by setting a negative margin-top value relative to its height, which dynamically adjusts based on the content within.
While everything functioned smoothly during layout creation, transitioning it into an active Wordpress theme has revealed an issue. The overlay-container now briefly appears upon each page load or reload before disappearing as intended, albeit momentarily visible. This momentary display, lasting only milliseconds, is still perceptible and not ideal.
Do you have any suggestions on how I can improve the timing of this transition?
I have placed the JavaScript in the <head> tag, ensuring it executes first.