Looking to temporarily hide a transparent div while the page is loading, and then reveal it once the page has finished loading?

Question

Looking to temporarily hide a transparent div while the page is loading, and then reveal it once the page has finished loading?

Hey, I've created a code for a transparent div that I'm using behind some text on the homepage of a website to make the text more prominent:

#transdiv {
    position:absolute;
    top:228px;
    width:852px;
    height:160px;
    background-color:rgba(0,0,0,.3);
    border-radius:8px;

I am implementing this code on the homepage like this:

<div id="spotlight" class="pagewidth">
    <div id="find-mentor">
       <div id="transdiv">

                 <h1><?php echo Configure::read('SearchBarHeading');?></h1>
        <h2><?php echo Configure::read('SearchBarSubheading');?></h2>
        <div id="text-box">

However, my issue is that I want this div to load after all other content on the homepage has loaded. Currently, it loads first, which doesn't look good. I need to fix this and ensure it loads after all other page content has loaded. Thank you!

css cakephp-1.3

Answer 1

Answer №1

In my opinion, JavaScript is the best choice for achieving this task. By simply adding another class to an element when the document is fully loaded, you can make it visible. Using visibility instead of display ensures that the element takes up space even before it is shown.

Check out this example on JSFiddle: http://jsfiddle.net/7LKp3/

And here's the JavaScript code snippet:

window.onload = function() {
    addClass(document.getElementById('transdiv'), 'shown');
};

/* Functions for manipulating classes in JavaScript */
function hasClass(el, name) {
    return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
}
function addClass(el, name) {
    if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') + name; }
}
function removeClass(el, name) {
    if (hasClass(el, name)) {
        el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
    }
}

Answer 2

In my opinion, JavaScript is the best choice for achieving this task. By simply adding another class to an element when the document is fully loaded, you can make it visible. Using visibility instead of display ensures that the element takes up space even before it is shown.

Check out this example on JSFiddle: http://jsfiddle.net/7LKp3/

And here's the JavaScript code snippet:

window.onload = function() {
    addClass(document.getElementById('transdiv'), 'shown');
};

/* Functions for manipulating classes in JavaScript */
function hasClass(el, name) {
    return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
}
function addClass(el, name) {
    if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') + name; }
}
function removeClass(el, name) {
    if (hasClass(el, name)) {
        el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
    }
}

Looking to temporarily hide a transparent div while the page is loading, and then reveal it once the page has finished loading?

Answer №1

Similar questions

How can CSS and DIVs be utilized to align two smaller content boxes alongside one larger content box?

SASS mixin that enables flexbox capabilities without supporting older, legacy versions of flexbox

Arranging progress bars between various nodes using HTML and CSS

Display a fresh <p> tag when the condition in the if-statement is met

Center the background image and adjust it vertically up or down as needed

When the browser is resized, elements do not change position

Tips for styling a datatable scrollbar with CSS

verifying the user's screen dimensions

Resize the image to fit the dimensions of a div, but unfortunately, the overflow: hidden property is not effective in this

Incorporating an SVG Element into a design while ensuring its responsive functionality

Utilize Bootstrap's custom validation exclusively on fields that are invalid

PrimeFaces: Achieving Conditional Coloring Based on Status (Passed/Failed)

How can I create a more spacious and stylish JTextField for my address bar?

Stable navigation bar implemented with a grid design

Switching the WordPress dropdown menu from a hover function to a click function

Is the table row changing in size when a filter script class is applied?

Discover the secret to halting a CSS animation precisely on the final nth-child in CSS3

Designing the Mailchimp signup form with React styling techniques

Having difficulty customizing the icon within the Alert component in Material UI for React by utilizing an external CSS file

What is causing my HTML file path to function on my server, but not when I access the HTML file directly?