Hiding Page Loading

Hide page until everything is loaded Advanced

Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO.

Put a div on top, like so:

<div id="cover"></div>

set some styles:

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}

and hide it with JS when all elements are loaded:

$(window).on('load', function() {
   $("#cover").hide();
});

Or if for some reason your script uses even longer time then the DOM elements to load, set an interval to check the type of some function that loads the slowest, and remove the cover when all functions are defined!

$(window).on('load', function() {    $("#cover").fadeOut(200);});
//stackoverflow does not fire the window onload properly, substituted with fake load
function newW(){    $(window).load();}setTimeout(newW, 1000);

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;     font-size: 60px; text-align: center; padding-top: 200px; color: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>    <li>This</li>    <li>is</li>    <li>a</li>    <li>simple</li>    <li>test</li>    <li>of</li>    <li>a</li>    <li>cover</li></ul>
<div id="cover">LOADING</div>

Hiding page loading

I think this is a pretty simple one.

First make sure jQuery is called in your section.

First, wrap all the content of your page (except the loading div) in a div called

<div id="content-wrapper">
    CONTENT HERE
</div>

Then using CSS set:

#content-wrapper {
    visibility:hidden;
}

Then just make the jQuery into a function like this:

$(window).load(function(){

    document.getElementById("content-wrapper").style.visibility="hidden";

    $('#loading').fadeOut(500, function() 
    {
        document.getElementById("content-wrapper").style.visibility="visible";
    });
});

and I can see you're using Nivo Slider. Me too ;)

Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)

Check out the example here: JSFiddle

Hiding div/popup on page load until button click

I think the problem is that you change :style="'display: ' + (showDetailModal ? 'block' : 'none')" on .modal-vue but define in your CSS display: none for .modal-vue .modal.

So you should define it in this way:

.modal-vue {
  display: none;
}

Working example:

var vm = new Vue({
  el: "#app",
  props: {},
  data: {
    showDetailModal: false,
  },
  methods: {
    openModal() {
      console.log(this.showDetailModal);
      this.showDetailModal = true;
      console.log(this.showDetailModal);
    }
  },
});

.modal-vue .overlay {
  //display: none;
  text-align: center;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.modal-vue {
  display: none;
}

.modal-vue .modal {
  position: relative;
  width: 300px;
  z-index: 9999;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #fff;
}

.modal-vue .close {
  position: absolute;
  top: 10px;
  right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div @click="openModal()">
    Open Modal
  </div>

  <div class="modal-vue" v-if="showDetailModal" :style="'display: ' + (showDetailModal ? 'block' : 'none')">
    <!-- overlay to help with readability of modal -->
    <div class="overlay" @click="showDetailModal = false"></div>

    <!-- Modal for detail on table cell click event -->
    <div class="modal" v-if="showDetailModal">
      <button class="close" @click="showDetailModal = false">x</button>
      <h3>Testing</h3>
    </div>
  </div>

</div>

How to toggle a div that is hidden on page load

A very trivial and simple way to solve your problem is to first test if (x.style.display == "block") and if it is anything else to then display the hidden content. Another way is to include the style inline inside the html code so that the style property of the DOM object has some initial property immediately after rendering.

function myFunction(test) {    var x = document.getElementById(test);    if (x.style.display == "block") {         x.style.display = "none";     } else {         x.style.display = "block";     }}

#test {    display:none;}

<h3 onclick="myFunction('test')">Click to toggle display</h3><br><div id="test">Now you see me</div><br>

Hide DIV on page load

I would use a CSS to hide it:

<html>
    <head>
        <title>...</title>
        <style type="text/css">
            #newpost {
                display: none;
            }
        <style>
    </head>
    <body>
        <!-- ...... -->
    </body>
</html>

That means your DIV will be hidden by default (according to style rules) and your function will show it when called.

The rest of your code should do fine (remember to block clicking the "Purchase now" button when clicked so it won't be pressed again and, thus, your DIV will hide again).

hide div while the page is loading

<div id="hidden-during-page-load">Loading...</div>

$(window).load(function(){
  // this will ensure that all content has loaded before the div is shown
  $("#hidden-during-page-load").show();
});

#hidden-during-page-load {
    display:none;   
}