I have a function which loads specific content of the outer html page and a loader. I want to load that content right after showing loader for 1.5 seconds. When I refresh the page loader loads then nothing happens and I need again click on button to load it.
My code is here:
<script>
// CSS for loaded content
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "UserCSS(English).css"
}).appendTo("head");
// Loaded content by button
$(document).ready(function(){
$(".searchbutton").click(function(){
$("#CourseContent").load("Userpage.html #Content");
});
});
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("CourseContent").style.display = "block";
}
</script>
And here is my html page body.
<body onload="myFunction()" style="margin:0;">
<div id="Page">
<div id="Head">
<a href= "user.php"><img id = "Erulex"src="logo.png" alt="Logo" style="width:300px;height:59px;"></a>
<input id="Search" placeholder="Search..." type="text" name="Search">
<a class="searchbutton" href="#"></a>
<a class="messagebutton" href="#"></a>
<a class="addbutton" href="#"></a>
<a class="notificationbutton" href="#"></a>
<a class="outbutton" href="logout.php"></a>
</div>
<div id="Body">
<div id="loader"></div>
<div style="display:none;" id="CourseContent" class="animate-bottom" >
</div>
<ul id="NaviUp">
<li id="U"><a class="active" href="#home">Home</a></li>
<li id="U"><a class="active" href="#home">Profile</a></li>
<li id="U"><a href="#news">Forum</a></li>
<li id="U"><a href="#contact">Store</a></li>
<li id="U"><a href="#about">Help Center</a></li>
<li id="U"><a href="#about">Friends</a></li>
</ul>
</div>
<div id="Footer">
<ul id="NavBar">
<li id ="D" ><a href="#home">About</a></li>
<li id ="D" ><a href="#terms">Terms of Use</a></li>
<li id ="D" ><a href="#contact">Help & Support</a></li>
<li id ="D" ><a href="#private">Privacy Policy</a></li>
<li id ="D" ><a href="#contact">Contact Us</a></li>
</ul>
</div>
</div>
</body>
How can I solve this?
in you onload function just load the data , and on click of the button show your div
<script>
// CSS for loaded content
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "UserCSS(English).css"
}).appendTo("head");
// Loaded content by button
$(document).ready(function(){
$(".searchbutton").click(function(){
document.getElementById("CourseContent").style.display = "block";
});
});
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("loader").style.display = "none";
$("#CourseContent").load("Userpage.html #Content");
}