0

I am trying to hide a div before the page loads. I have added the css of display: none; I am overlaying the div with another one. But there is a small flash of the old div. How can I over come this, so far I have tried:

JS

$(document).ready(function () {
    $('.div').hide();
});

CSS

.div {
 display: none; 
}

The div is part of some other html on the server and I can't add another class to it.

Sole
  • 3,100
  • 14
  • 58
  • 112
  • https://stackoverflow.com/questions/7186914/is-there-any-way-to-call-function-before-document-ready-in-jquery - have you had a look at this? – mouldycurryness Sep 05 '19 at 16:09
  • 3
    You can't hide before page load, it first need to render the div before you can access it. There will always be flash. – jcubic Sep 05 '19 at 16:09
  • "I have added the css of `display: none;`" Then it should already be hidden on page load. – APAD1 Sep 05 '19 at 16:17
  • @APAD1 It is not there is that flash of it showing – Sole Sep 05 '19 at 16:23
  • 1
    If you are hiding it with straight CSS there will be no flash of it showing. – APAD1 Sep 05 '19 at 16:24
  • There is a flash of it... – Sole Sep 05 '19 at 16:30
  • You need to explain what' going on with the html sources. Sounds like you're trying to add jquery to html you don't have access to. Doesn't make sense. – wazz Sep 05 '19 at 17:02
  • It could help if you show how your html (or at least the general structure of it) looks like. I mean the behavior may depend on order in which you ` – Oleksandr Tyshchenko Sep 05 '19 at 17:29

2 Answers2

1

If you are using .hide() or display: none;, the hiding of the divs will be displayed.

try:

visibility: hidden;

but you will have to change them back to visible when you want them to be seen. Like this:

visibility: visible;

Works great for me.

leenbean16
  • 134
  • 12
0

$(document).ready(function() {
  $("div#extraControls").removeClass("hidden");
});
div.hidden {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="extraControls" class="hidden">test</div>
showdev
  • 28,454
  • 37
  • 55
  • 73
elseif technology
  • 1
  • 3