Can't get both features to work

JavaScript
1

Hi,

I have a jquery based feature in my sidebar at http://www.ephemeralproject.com/about/. This is set up with the following code

<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') . '/custom/jquery-ui-personalized-1.5.2.packed.js' ?>"></script>

I also want to setup this http://css-tricks.com/rotating-feature-boxes/. I have the feature boxes working and everything is fine.

The only problem is that in order for the feature boxes to work on my site I need to add the following code into my head

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

By adding this the feature box now works but the jquery from the sidebar does not work.

Can anyone advise me on how these can both work together?

Many thanks

2

jQuery already comes queued in WordPress’s wp_head() function so there is no need to call it again, what i suggest you do is take advantage of wp_enqueue_script() which allows you to append your own scripts into the wp_head() function.

3

Ahhh, got ya.

Sorry, too long on the comp :wink:

All working now :smiley:

4

D’oh, it wasn’t working after all. The jquery for the feature box doesn’t work like in this demo http://css-tricks.com/examples/RotatingBlocks/

function rotate() {
?>

	<script>
		// DOM Ready
		$(function() {
		
			var current;
					
			function rotate() {
			
				// This seems like a sucky way to do it, but you can't select by classes because they execute in order
							
				if (current == 1) {
					$("#block-1").removeClass().addClass("active");
					$("#block-2").removeClass().addClass("non-active-top");
					$("#block-3").removeClass().addClass("non-active-bottom");
				} else if (current == 2) {
					$("#block-1").removeClass().addClass("non-active-bottom");
					$("#block-2").removeClass().addClass("active");
					$("#block-3").removeClass().addClass("non-active-top");
				} else {
					$("#block-1").removeClass().addClass("non-active-top");
					$("#block-2").removeClass().addClass("non-active-bottom");
					$("#block-3").removeClass().addClass("active");
				}
			
			}
			
			$("#rotator div").click(function() {
			
				// Enables reversing, idea via Andrea Canton: https://twitter.com/andreacanton/status/24954634279849985
				current = this.id.substr(6);			
				rotate();
			
			});
		
		});
	</script>
	
<?php
  
  }
add_action('wp_enqueue_scripts', 'rotate');