I have to ask you guys, what is wrong in this code, I created a preloader for my website but I failed at the javascript:
<!-- script for preloader -->
<script type="text/javascript/jquery">
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded')
}, 1500);
});
</script>
<!-- preloader* -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-one"></div>
<div class="loader-section section-two"></div>
</div>
So the preloader stops as soon as the <body> tag get the class="loaded". But for some reasons the <body> doesn't receive the class.
I don't know if it helps, but here's the whole file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= $view->render('head') ?>
<link href="packages/pagekit/theme-hello/css/theme.css" rel="stylesheet">
<?php $view->script('theme', 'theme:js/theme.js') ?>
<?php $url = $_SERVER['REQUEST_URI']; if($url == "/arn_architekten/bilderbuch"): ?>
<style type="text/css">
html {
background-color: #000 !important;
background-image: none !important;
}
</style>
<? endif ?>
</head>
<body>
<!-- Render logo or title with site URL -->
<a href="<?= $view->url()->get() ?>">
<?php if ($logo = $params['logo']) : ?>
<img src="<?= $this->escape($logo) ?>" alt="">
<?php else : ?>
<?= $params['title'] ?>
<?php endif ?>
</a>
<!-- Render widget position -->
<?php if ($view->position()->exists('sidebar')) : ?>
<?= $view->position('sidebar') ?>
<?php endif; ?>
<!-- script for preloader -->
<script type="text/javascript/jquery">
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded')
}, 1500);
});
</script>
<!-- preloader* -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Render content -->
<?= $view->render('content') ?>
<!-- Insert code before the closing body tag -->
<?= $view->render('footer') ?>
</body>
</html>
Hope somebody can help me there and sorry for my bad english ^^.
change your script as below it might caused an issue
Update
Add jquery min js this is issue if you don't load jquery js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>add this line top of the function or inside head tagUpdate 1 Update your head tag as below
For more info find this fiddle
Hope it helps.