My site is built with Wordpress, and recently I've been adding some basic javascript to it: RossPW
However, all the javascript I've added doesn't seem to work, and I can't figure out why for the life of me!
For example, I added the following simple snippet to the header, to fade in the -- but this doesn't work:
<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>
To try and troubleshoot this so far, I have tried two things:
1) Properly added wp_enqueue to the header.php (this has been known to cause some problems with wordpress in the past:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
2)I also tried included javascript as an external .js file here, with some basic JS to animate the header or scroll to the top -- this hasn't worked either.
Any help would be much appreciated -- thanks!
UPDATE: In order to ensure that js/jquery are loaded properly. I've tried this basic alert -- which does in fact work!
<script type="text/javascript">
alert('ALERT!')
</script>
However, all the other javascript I've written does not -- and I can't figure out why. The javascript I've written seems to be fine, as seen here: jsfiddle/v9NSR/
My site is built with Wordpress, and recently I've been adding some basic javascript to it: RossPW.
However, all the javascript I've added doesn't seem to work, and I can't figure out why for the life of me!
For example, I added the following simple snippet to the header, to fade in the -- but this doesn't work:
<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>
To try and troubleshoot this so far, I have tried two things:
1) Properly added wp_enqueue to the header.php (this has been known to cause some problems with wordpress in the past:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
2)I also tried included javascript as an external .js file here, with some basic JS to animate the header or scroll to the top -- this hasn't worked either.
Any help would be much appreciated -- thanks!
UPDATE: In order to ensure that js/jquery are loaded properly. I've tried this basic alert -- which does in fact work!
<script type="text/javascript">
alert('ALERT!')
</script>
However, all the other javascript I've written does not -- and I can't figure out why. The javascript I've written seems to be fine, as seen here: jsfiddle/v9NSR/
Share Improve this question edited Dec 27, 2012 at 6:20 RossPW asked Dec 27, 2012 at 3:53 RossPWRossPW 3992 gold badges4 silver badges8 bronze badges 5- Sure you're loading in document.ready? – elclanrs Commented Dec 27, 2012 at 3:55
-
Try adding the script at the end of
bodyor wrapping the call inwindow.onLoad(or, better yet if you're using jQuery,$(document).ready() – John Dvorak Commented Dec 27, 2012 at 3:55 - make sure jQuery has been loaded when execute your codes – liunian Commented Dec 27, 2012 at 3:57
-
In addition to running the code before jQuery is loaded, you're running it before the
<body>element is rendered/available for manipulation (your code is in the<head>section) – Ian Commented Dec 27, 2012 at 4:53 - 1 Wordpress is the culprit -- here's a solution I found that proved to work: [wp.tutsplus./articles/… I either have to "enqueue" my script.js file using the crazy wordpress approach, or if I place scripts inside the DOM, I have to preface them : jQuery(document).ready(function($) { $('body').hide(); $('body').fadeIn(1000); }); [1]: wp.tutsplus./articles/… – RossPW Commented Dec 27, 2012 at 6:35
4 Answers
Reset to default 3Two Things to fix -
- Error: SyntaxError: illegal character Source File: http://rosspw./wp-content/themes/rosspw2013/js/rosspw.js Line: 21, Column: 5 Source Code: }); ;​
- Try adding this JS code just before you are closing the body tag.
Let me know if it works for you or not.
Try to use Firebug for debugging.
For better Understanding Check this screenshot -
As you are using jquery before its been loaded.
The first thing you had wrong in your code was using the $ sign to call jQuery. When you are coding jQuery in WordPress, you have to make sure there is no conflict with the code libraries as WordPress may use other libraries and it might mess up.
The proper way to use jQuery in WordPress is jQuery(); instead of $(); which in your case would be:
<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>
Another way to do it would be to wrap the jQuery code with the jQuery $.noConflict() function, such as:
jQuery.noConflict();
(function( $ ) {
$(function() {
// your code here
});
})(jQuery);
Check this out for more information and full documentation about the noConflict function.
Hope it works for you!
It looks like you are calling your jquery functions before the script tag that is loading jquery.js.
Line 70-71:
$('body').hide();
$('body').fadeIn(3000);
This gives an exception: Uncaught ReferenceError: $ is not defined
But jquery.js isn't loaded until line 94:
<script type='text/javascript' src='http://rosspw./wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
You can do one of two things:
- Move your jquery.js reference to the top of the page.
Call your jquery functions after the document has been loaded. Something like:
function fadeInBody() { $('body').hide(); $('body').fadeIn(3000); } window.onload = fadeInBody;
try adding jquery on the footer just before wp_footer() followed by your script
<?php
wp_enqueue_script('jquery');
wp_enqueue_script('myscript', 'myscript.js', array('jquery'));
wp_footer();
?>
then on you external script:
$(document).ready(function () {
$('body').hide();
$('body').fadeIn(3000);
});