i am trying to add jQuery to my page, I am getting this error though: ReferenceError: preview is not defined
I have a js file in the js directory of my theme:
jQuery(document).ready(function() {
function preview() {
var hoverhome = 'url("images/Screen2.png") no-repeat';
var empty = '';
//home
$('nav .home a').hover(function() {
$('.viewport').css('background-image', hoverhome);
});
$('nav .home a').onmouseout(function() {
$('.viewport').css('background-image', empty);
});
}
});
I have this in my functions file:
function add_my_script() {
wp_enqueue_script(
'preview',
get_template_directory_uri() . '/js/scriptfile.js',
array('jquery')
);
}
This is in my html head tag:
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title('|','true','right'); ?><?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/scriptfile.js? ver=1.7.1'></script>
<?php wp_head(); ?>
</head>
and this is in my header to call the function:
<div class="viewport">
<script type="text/javascript"><!--//--><![CDATA[//><!--
preview();
//--><!]]></script>
</div>
finally, this is my css:
.viewport
{
height: 400px;
width: 400px;
position: relative;
top: -90px;
margin: 0 auto;
}
But. I'm getting this error in firebug:
ReferenceError: preview is not defined
-
The preview() function is created after document is ready, so you can't use it in the <script> section. Just use preview() right after you define it, in the document.ready function.Kamil T– Kamil T2013年05月31日 07:56:14 +00:00Commented May 31, 2013 at 7:56
-
@Yvette what do I need to check? I don't see a link..Chris– Chris2013年05月31日 07:59:16 +00:00Commented May 31, 2013 at 7:59
-
related: stackoverflow.com/q/3773356/218196, stackoverflow.com/q/15478041/218196Felix Kling– Felix Kling2013年05月31日 08:08:58 +00:00Commented May 31, 2013 at 8:08
3 Answers 3
You have defined preview inside a function. That scopes it to that function, so it isn't a global and you can't call it from anywhere other than inside that function.
Get rid of the
jQuery(document).ready(function() {
});
wrapper. It isn't doing anything useful and it is breaking your code.
You also need to make sure that you define preview in either the same script as the one that calls it or an earlier one. (Or you need to delay execution as described below).
Note that if you call preview before the elements it touches exist, then it isn't going to do anything. So you also need to make sure that when you call it, you are doing so after they exist. Putting the call directly in the header probably won't do that. Move the call to the footer or wrap it in a document.ready event handler (as you are currently doing for the function declaration).
Comments
The preview() function is called before it is defined.
The function is defined in
jQuery(document).ready(function()
{
...HERE
}
and HERE is executed only after the entire HTML has been loaded.
Remove the preview() call, and add it after the definition:
jQuery(document).ready(function()
{
function preview()
{
var hoverhome = 'url("images/Screen2.png") no-repeat';
var empty = '';
//home
$('nav .home a').hover(function()
{
$('.viewport').css('background-image', hoverhome);
});
$('nav .home a').onmouseout(function()
{
$('.viewport').css('background-image', empty);
});
}
preview();
});
1 Comment
You should NOT add
<script type='text/javascript' src='<?php bloginfo('template_url'); ?>/scriptfile.js? ver=1.7.1'></script>
to your <head>.
You should hook your function add_my_script like this(you can add the following snippet just after your add_my_script function):
add_action( 'wp_enqueue_scripts', 'add_my_script' );
After hooking it to wp_enqueue_scripts, WordPress will automatically add your script when it calls wp_head(); in your header file.
To avoid scoping errors, rmove the document ready wrapper:
function preview() {
//the rest of your code here
}
Call the function after the DOM is ready: Your code should be like:
<div class="viewport">
<script type="text/javascript"><!--//--><![CDATA[//><!--
jQuery(document).ready(function($){
preview();
});
//--><!]]></script>
</div>
6 Comments
$ in your preview function by jQuery