Click here to see the problem I am facing on JSFiddle. I am trying to create a loading screen that will slide up after a few seconds using jQuery. Although I am familiar with HTML, JavaScript, and CSS, I am still new to jQuery. I have a feeling that the solution to my issue is simple and obvious, but I just can't seem to figure it out. My main question is: Why is the div not being affected by anything? It seems that I need to include code snippets whenever I link to jsfiddle.net...
HTML:
<div id="loader" style="height:0;width:0;">
<strong style="color:white">Loading...</strong>
</div>
JavaScript/jQuery:
var width = $(window).width();
var height = $(window).height();
document.getElementById("loader").style.height = height + "px";
document.getElementById("loader").style.width = width + "px";
CSS:
#loader {
color: black;
border: 1px solid black;
}
Any assistance would be greatly appreciated.
Edit: Since I do not have enough reputation to answer my own question within 8 hours of posting, I'll have to make do with this. Special thanks to Meredith for providing a solution here. Thank you.
Edit 2: After doing some research, I realized that I was trying to execute everything before the page had fully loaded. When I followed Meredith's method, it didn't work as expected. So, I updated my JavaScript/jQuery code to the following:
$(document).ready(function() {
var width = $(window).width();
var height = $(window).height();
document.getElementById("loader").style.height = height + "px";
document.getElementById("loader").style.width = width + "px";
});
After making this change, everything started working perfectly.