i have the following problem on this website: http://client1.studdo-media.nl/
when i open the dev tools for Chrome i see the following JS errors:
client1.studdo-media.nl/:8 Uncaught ReferenceError: $ is not defined
client1.studdo-media.nl/:23 Uncaught ReferenceError: $ is not defined
client1.studdo-media.nl/:47 Uncaught ReferenceError: $ is not defined
I know WordPress needs a noConflict Wrapper for JQuery to work with $.
I removed the wrong code in the header.php file and replaced it with correct, wrapped JQuery, and placed it in the body to make sure JQuery is loaded.
This is my header.php file right now
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class('blog-page'); ?>>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/mercurius/assets/css/jquery.fullPage.css" />
<script type="text/javascript" src="/wp-content/themes/mercurius/assets/js/jquery.fullPage.js"></script>
<script>
jQuery( document ).ready( function( $ ) {
$('a[href*=#]:not([href=#])').click(function() {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1500);
return false;
}
});
});
</script>
<script>
jQuery( document ).ready( function( $ ) {
$('#someID').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
});
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-81168606-1', 'auto');
ga('send', 'pageview');
</script>
<!-- parallax header -->
<script>
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
jQuery(".carousel .fill").css("transform","translateY(" + (scroll)/2 + "px)");
});
</script>
<!-- Header Section -->
<header id="header">
note: everything under header opening tag is not relevant for this question and therefore not pasted here.
The correct code is loaded by WordPress right after the open tag.
I cant seem to find out why the old (wrong) code is still loaded into my website. Note:the wrong code seems to be added before the
<!DOCTYPE html>
see this image: wordpress script tag before
I have no caching enabled.
Edit: the scripts tags were loaded by another file in my themes folder, so it has not much to do with header.php.. (answer by lassemt)
