Wordpress site, creating preloader for content div using Jquery and CSS, I found simple and great one here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
//A page can't be manipulated safely until the document is "ready."
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("content").style.display = "block";
}
});
</script>
<style type="text/css">
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#content {
display: none;
}
</style>
<body onload="myFunction()" style="margin:0;">
<div id="loader"></div>
<div id="content" class="site-content container clear">
Preload this text.
</div>
And the error is: myFunction is not defined at onload ((index):420)
Is there a workaround for WordPress or maybe other, simple way of adding preloader for particular div id?
you have to load the javascript in the header of the page, using the wordpress action wp_head. stick this in your child-themes functions.php:
function my_scripts() {
?>
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("content").style.display = "block";
}
});
</script>
<?php
}
add_action('wp_head', 'my_scripts');
edit: just to clear up - you don't have to load all javascript in the header, but the error you got is because you call the function before it's being defined. hence, it should work if you stick the function in between the head tags.
I think there is a better way to use jQuery with WordPress:
<script type="text/javascript">
jQuery.noConflict()(function($){
"use strict";
$(document).ready(function() {
//A page can't be manipulated safely until the document is "ready."
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
$("#loader").hide();
$("#content").show();
}
});
});
</script></div>