Menu
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).
838
The Order of CSS Classes in HTML Doesn't Matter.
If you are learning web development, you will come across terms like HTML, CSS, and JavaScript. These are often called the building blocks of the Web. These three tools dominate web development.
So, what is the difference between HTML and CSS? Quite simply, HTML (Hypertext Markup Language) is used to create the actual content of the page, such as written text, and CSS (Cascade Styling Sheets) is responsible for the design or style of the website, including the layout, visual effects and background color.
The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element. The <title> HTML element defines the document's title that is shown in a Browser's title bar or a page's tab.
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>
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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
