9

I've got a webpage where I hide the content of the page until the onload JavaScript event is fired and then I unhide the content. It works quite well under Chrome, IE11 and IE10. But when I use IE9 the hiding of the content gets ignored UNTIL the page is fully loaded at which point the hiding comes into effect.

Because of that problem I moved the hiding from the JavaScript to the CSS instead and still same visual effect. So my question here is: Is the CSS only applied after the html has been fully loaded or am I overlooking something here? A bit of the code here:

#deactivate {  
    display: none;
}
<html>
    <body>
        <div id="deactivate">MycontentIsNotToBeShown</div>
        <div>MyContentIsToBeShown</div>
    </body>
</html>
$(document).ready(function() {
    //......DO things and then as the last step:
    $("#deactivate").first().show();   
});

Like I said the disappearing of the "deactivate" div does not happen at least until the jQuery code begins its work (that is at least how it looks optically).

The whole page where this happens is a sharepoint page (sharepoint 2013)...a nintex form in view mode to be more exact. I'm not sure if it has anything to do with that OR if it has anything to do with the order of how things are loaded in IE9. Thus my question here if it can be that the order of how things are loaded/used in IE9 could cause this effect?

As an additional note here: I already checked if there are too many selectors in the .css which is seemingly not the case (I know that there is a limit in IE for how many selectors it will work through in a single .css file).

3
  • 4
    The use of first() on your id selector is redundant because you should only ever have unique id attributes within a page. If you have multiple elements with the deactivate id, then you should change it to a class. Dec 12, 2014 at 8:07
  • It is only one. I'm not too used to jquery so I just put in first() to be on the save side (id should be singular always anyway as is in this case) as I wasn't sure if it likes it too much without first().
    – Thomas
    Dec 12, 2014 at 11:54
  • The CSS file is "external" as far as I'm aware of (nintex forms hides things a bit).From what I heard just yesterday it can be that the problem I myself have had stems from HOW sharepoint parses the created forms and then sends them to the browser to be rendered :/
    – Thomas
    Dec 20, 2014 at 13:55

3 Answers 3

3
+50

Using CSS to hide an element, then use JavaScript to show the element on page load is the correct way and it should work in Internet Explorer as expected. The element should be hidden initially.

However, if the stylesheet containing the #deactivate { display: none; } rule is present inside the body, the browser will start rendering content until it encounters the stylesheet which instructs that the deactivate block should be hidden.

Secondly, you mention that you want to show the content on load but your jQuery code uses the document.ready event which is different from window.onload and fires earlier:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page). (source)

I would suggest inlining this particular CSS rule for best results and use window.load event which waits until all resources are downloaded:

<html>
<head>
    <style>
    #deactivate { display: none; }
    </style>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="deactivate">
        <h1>Hidden Content</h1>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(window).on("load", function() {
            $("#deactivate").show();
        });
    </script>
</body>
</html>
3
  • Note that if CSS is hiding the element by default, and JS is later showing it, if a user has JavaScript disabled, they will not be able to see the element at all. This may have negative implications for search engine optimization. See my answer for a way around this issue. Dec 22, 2014 at 5:42
  • You can use JavaScript to "write" the CSS that hides the elements. It is straight forward.
    – Salman A
    Dec 22, 2014 at 5:45
  • You could, but addClass/removeClass is better. It separates styles from content/scripts. Dec 22, 2014 at 5:48
1

A clean and SEO friendly way to handle this issue.

In CSS, add a style rule like this (you can make it more-specific to hide only the elements you need to, or use different properties to hide them).

html.loading {
    visibility: hidden;
}

Then, in the JavaScript, without waiting for document.ready or onload, add the loading class to the HTML element. Then, on window.load, remove that class.

$('html').addClass('loading');
$(window).on('load', function(){
    $('html').removeClass('loading');
});

This will make the site content invisible until the load event fires. You could even do something clever, like a CSS3 loading animation.

As an added bonus, doing it this way means the site will work if the user has JavaScript disabled and potentially improve SEO.

Scripts in Footer?

If you wish to load jQuery/other scripts in the footer, you can simple insert the following script tag in your header, to add the loading class without jQuery.

<script>
document.documentElement.className += ' loading';
</script>

Then you can simply remove the class using jQuery with your scripts loaded in the footer.

$(window).on('load', function(){
    $('html').removeClass('loading');
});
4
  • Hi the "$('html').addClass('loading');" does that not still have the possibility that it runs into troubles? (at least for other elements in html I know that it can be troublesome because they are not loaded fast enough. for the html tag itself I'm not sure)
    – Thomas
    Dec 17, 2014 at 10:44
  • @Thomas The html tag will always be available to JavaScript in an HTML document, even if you put the script in the head. The issue is you can only manipulate HTML tags that have been opened before the script tag is processed. Since html must be opened before any script tags, the issue does not affect the html element. Dec 17, 2014 at 15:40
  • This has an issue: jQuery must be loaded in order for .addClass to work which means you cannot use JavaScript at bottom/load JavaScript asynchronous pattern.
    – Salman A
    Dec 22, 2014 at 5:48
  • @SalmanA Fair enough, although not an issue for everyone, I added a scripts in footer alternative. Dec 22, 2014 at 5:54
0

You have to put your code outside of body tag the it will be applied after dom and layout(CSS):

    </body>
    <script>
        $(document).ready(function () {
            $("#deactivate").first().show();
        });
    </script>
</html>
1
  • Placing a <script> element within <html> actually violates the content model of the html element itself. Perhaps you meant to suggest putting the scripting at the bottom of the <body> instead?
    – Sampson
    Dec 16, 2014 at 19:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.