Forums

Kenneth

I've got two problems using script and a man's best friend (google) can't give me an answer.

http://www.kapittel-wervik.be/kclub

Problem 1:

This gives an error in firebug: $ not defined

<script src=\"js/jquery.js\" type=\"text/javascript\" charset=\"utf-8\"></script>
	
<script type=\"text/javascript\">
     $(document).ready(function() {

	});
</script>

But when I use the next lines of code, it does

<script src=\"js/jquery.js\" type=\"text/javascript\">
     $(document).ready(function() {

	});
</script>

I can get it defined but why doesn't it work like it should and like it works on all the other sites?

Problem 2:

The following just doesn't do anything

		<script src=\"js/jquery.js\" type=\"text/javascript\">
			$(document).ready(function() {
				var img = new Image();
				$(img).load(function() {
					$(this).hide();
					$('#FeaturedEventImage').removeClass('loading').append(this);
					$(this).fadeIn();
				})
				.attr('src', 'images/affiches/event_small.png');
			});
		</script>

apostrophe

Wordpress uses a couple of other javascript libraries as well as jQuery and they also use the $ sign. So you have a conflict going on.
I always use the google hosted version of jQuery thus:

<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></script>

But if you want to use the version bundled with Wordpress you can use this line:

<?php wp_enqueue_script(jquery); ?>

And as regards the conflict, change $ to 'jQuery' so you would have:

      <script type=\"text/javascript\">
         jQuery(document).ready(function() {
            var img = new Image();
            jQuery(img).load(function() {
               jQuery(this).hide();
               jQuery('#FeaturedEventImage').removeClass('loading').append(this);
               jQuery(this).fadeIn();
            })
            .attr('src', 'images/affiches/event_small.png');
         });
      </script>

Kenneth

Still no success

		<?php wp_enqueue_script(jquery); ?>
		<script type=\"text/javascript\">
			Jquery(document).ready(function() {
				var img = new Image();
				Jquery(img).load(function() {
					Jquery(this).hide();
					Jquery('#FeaturedEventImage').removeClass('loading').append(this);
					Jquery(this).fadeIn();
				})
				.attr('src', 'images/affiches/event_small.png');
			});
		</script>

this now gives me "Jquery not defined" so still the same error.

When i put

		<script src=\"js/jquery.js\" type=\"text/javascript\">
			Jquery(document).ready(function() {
				var img = new Image();
				Jquery(img).load(function() {
					Jquery(this).hide();
					Jquery('#FeaturedEventImage').removeClass('loading').append(this);
					Jquery(this).fadeIn();
				})
				.attr('src', 'images/affiches/event_small.png');
			});
		</script>

I don't get the error but the script doesn't do anything. When i'm learning something i try to do stuff myself instead of copy-paste from other sites. But even a copy-paste from the original site doesn't do anything

apostrophe

First thing I notice is

Jquery

should be

jQuery

and the second thing is the path to your image. I'm guessing it is in with your theme files so the path should look something like this:

'<?php bloginfo('template_directory'); ?>/images/affiches/event_small.png'

James

If you give a SCRIPT element a SRC then any code residing within it will NOT run. You have to include two SCRIPT elements; one to get jQuery and another for your code:


<script src=\"path/to/jquery.js\"></script>
<script>
// Your code...
</script>

Kenneth

I finally found the problem.

The problem wasn't the function I called, but when I called it:

		<?php wp_enqueue_script('innerfade', '/wp-content/themes/kclub/js/jquery.innerfade.js', array('jquery') ); ?>

		<?php wp_head(); ?>

		<script type=\"text/javascript\">
		jQuery(document).ready(function($) {
			$('#left_photo').innerfade({
				animationtype: 'slide',
				speed: 750,
				timeout: 2000,
				type: 'random',
				containerheight: '1em'
			});
		});
		</script>

I have to "wp_enqueue" the script before <?php wp_head(); ?> and the script itself has to come after <?php wp_head(); ?> I placed everything above <?php wp_head(); ?>

Spent hours and hours on this and I can't believe it was something so small like this. But it makes sense

treehouse : what would you like to learn today?

Forums

Strange behaviour Jquery