- This topic has 3 replies, 2 voices, and was last updated 4 years, 7 months ago by
.
-
Posts
-
Hello,
I’ve ran into some trouble I can’t figure out myself. I’m following these two tutorials on applying a pre loader to my website. –
https://ihatetomatoes.net/create-css3-spinning-preloader/
https://ihatetomatoes.net/create-custom-preloading-screen/I’ve made it to the end, but something still doesn’t quite work. I made a child theme and did all my edits there. I added all the HTML necessary for the spinner at header.php after <head> tag. All the CSS at style.css. But now there’s the part to make the spinner spin for 3 seconds and then initiate the loading exit animation. I tried to add that Jquery line (pasted at the end of doc.) to GP hooks section. Tried to hook the line in wp_head, wp_footer, before_footer, but no success. The spinner spins and never initiates the exit animation… So then I tried to add the “loaded” class manually by applying it to header.php “body(‘loaded’)” like this, then the spinner spins for about 0.5 secs and initiates the exit animation… So I can’t figure this out on my own, could you please help me?
$(document).ready(function() { setTimeout(function(){ $('body').addClass('loaded'); $('h1').css('color','#222222'); }, 3000); });Lead Developer
Hi there,
If you’re adding that script to a Hook Element, you can do this:
<script> jQuery(document).ready(function($) { setTimeout(function(){ $('body').addClass('loaded'); $('h1').css('color','#222222'); }, 3000); }); </script>Let me know if that does it or not 🙂
Hey Tom,
That worked! Thanks a lot!
You’re welcome 🙂
- You must be logged in to reply to this topic.