Mootools css effect not working

Can anyone shed some light on this? I can’t get mootools to work in WordPress either

Google isnt kicking up anything that can help me

URL?

Can someone tell me how to modify this code into the dollar safe mode, as I am assuming this is the reason I can’t get this plug in to work:

//Simple Animated Menu for Mootools 1.2 v1
//Released June 2008
//Dedicated to the public domain by www.consideropen.com
var navArrowSlider = function(navWrap, navElementsArray, activeID, arrowY, leftOffset) {
	var youAreHere = new Fx.Tween($(navWrap), {
		duration: 1200,
		transition: Fx.Transitions.Elastic.easeOut
	});

	$$(navElementsArray).each(function(item){
		item.addEvent('mouseenter', function() {
			var thisPos = item.getPosition(navWrap).x  + item.getSize().x - leftOffset;
			youAreHere.cancel();
			youAreHere.start('background-position', thisPos + 'px ' + arrowY + 'px');
		});
	});

	var currentArrow = function() {
		youAreHere.cancel();
		var activePos = $(activeID).getPosition(navWrap).x  + $(activeID).getSize().x - leftOffset;
		youAreHere.start('background-position', activePos + 'px ' + arrowY + 'px');
	};

	//correct IE rendering problem (without this, it wont go to the active nav onload)
	var activePos = $(activeID).getPosition(navWrap).x  + $(activeID).getSize().x - leftOffset;
	$(navWrap).setStyle('background-position', activePos + 'px ' + arrowY + 'px');       

	//works to set image to starting position in other browsers
	currentArrow(); 

	$(navWrap).addEvent('mouseleave', currentArrow);
}; 

window.addEvent('domready', function() {
	navArrowSlider(
		'nav_wrap', // ID of nav wrap
		'#nav_wrap ul li', // Array selector of nav elements
		'active_nav', // ID of current nav element
		'20px', //  Background position y of background image
		'20' //  INT ONLY - How far left from the right edge of the nav element that the image settles
	);
});

I’m very much still learning and I just don’t understand it and can’t find any examples or tutorials that cover this

This is the dollar safe mode:

turn

var X = new Class({
    initialize: function(element){
        this.element = $(element);
    }
});

into

(function(){

    var $ = document.id;

    this.X = new Class({
        initialize: function(element){
            this.element = $(element);
        }
    });

})();

Im not looking for a free ride, but I CAN’T FIND ANYTHING THAT ACTUALLY HELPS.

Sorry apljdi, I didn’t see your post.

My site isn’t online yet, im using xampp til it’s completed as I am trying to learn how to do a lot of things from scratch (had some experience with Javascript)

I’m just assuming that there is some kind of conflict. But it’s hard to tell as firefox and IE8 aren’t showing me anything. And firebug isn’t bringup any errors in the script…it’s just not doing anything.

That’s going to make it hard to help. I’d suspect a conflict too but there is nothing I can do to try to debug it. I wouldn’t use that ‘$’ alias because several libraries use it and it can cause trouble. You can isolate the alias, which I see you’ve been working on, but I just avoid it altogether. That’s your call. I also notices a double ‘$’ in your code. I know that’s valid in PHP but is it valid in javascript? I’m much weaker there than in PHP so I’m not sure.

When I’m jacking with javascript there are a couple of things I do that help me.

1. Through some alerts in the code. You can check variables and you can also isolate where the script fails. If an alert before a function fires but one after it doesn’t then you know the problem involves that function.
2. Since you are running firebug you can use console.log to do much the same as the above in a considerably less irritating way.
3. Try to make the script do something blatantly obvious, like set the background of your target div to solid red. That way you know for sure that you are targeting what you mean to be targeting.

Ok, thanks for the advice, ill work on it.

The above code is using the mootools framework, apparently the $$ is valid in 1.2 but they have updated it. Im just going to keep going through it. As it’s not my plug in and someone elses tho, I might just try and rebuild it bit by bit. Which of course means learning javascript just to have an arrow pointing at the <span> tag.

I just want a nice bit of animation in my menu! *sigh*