How to get this jQuery to work

[Ben @ Inbound Creative]

Hi guys and girls,

I've found a solution to a problem I'm having on Stack Overflow.

The jQuery works perfectly for what I need, but I have no idea how to save it for use on my site.

I know how to enqueue the script. I'm just not sure what is supposed to go around the jQuery for it to work.

Any help would be appreciated.

Here's the code within a demo here - http://jsfiddle.net/VB4QC/

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[Sridhar Katakam]

Create a file named say, term-rotator.js under js directory (create if not existing) in your child theme having this code:

jQuery(document).ready(function($) {

	var terms = ["term 1", "term 2", "term 3"];

	function rotateTerm() {
		var ct = $("#rotate").data("term") || 0;
		$("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn().delay(2000).fadeOut(200, rotateTerm);
	}
	$(rotateTerm);

});

Then add this in child theme's functions.php:

//* Enqueue Term rotating script
add_action( 'wp_enqueue_scripts', 'enqueue_term_rotator' );
function enqueue_term_rotator() {

	wp_enqueue_script( 'term-rotator',  get_stylesheet_directory_uri() . '/js/term-rotator.js', array( 'jquery' ), '1.0.0', true );

}

---

Genesis Tutorials | Follow me on Twitter

[Ben @ Inbound Creative]

Hi Sridhar,

Thanks for taking the time to help.

I've done this and it hasn't worked.

Is there a chance that because this is being executed out of the loop that it isn't working.

This is the full code of the homepage template

<?php
/*
Template Name: Home
*/

get_header();
?>

<div id="header">

	<a href="/" id="logo">
	
		<img src="/images/logo.png" alt="Advice Media">
		
	</a>

	<div class="text" role="main">
		
		<h1>We create content</h1>
		<h1>that <span id="rotate">this</span>. Period.</h1>
		
		<a href="#contact" id="contactlink">Let's talk</a>
		
	</div>
	
	<div class="content" id="scrolldown">

		<a href="#start"><img src="/images/arrow.png" alt="Scroll down"></a>

	</div>

</div>

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[Ben @ Inbound Creative]

Nevermind. It was because I hadn't called the footer on the template. No idea why that was impacting it, but it's working now.

---

Award winning web design in Liverpool | UK based Genesis Framework web designer and developer

[Author]

Posts