WordPress.org

1. aneesuddin
   Member
   Posted 3 years ago #

   Chaps and Chapettes

   I'm having this problem right now.

   I have a very basic mootools function that increases the height of a div with hidden overflow to reveal some content.

   My mootools effect works without error on a static version and not at all on the wordpress version even though I have enqueued the scripts correctly and am not running any other scripts. It doesn't even render any errors. i am at a loss!

   This is how I am referencing the mootools libraries:
   

   <?php wp_enqueue_script('mootools', get_bloginfo('template_directory') .'/js/mootools/mootools.js' , 'false' , '1.2.0'); ?>
   <?php wp_enqueue_script('filterExpand' , get_bloginfo('template_directory') .'/js/mootools/filterExpand.js' ,  array( 'mootools' ) , '1.2.0'); ?>
   <?php wp_head(); ?>

   This is the expand function:
   

   window.addEvent('domready', function() {
   	var el = $('myElement');
   
   	var anotherEl = $('FilterElement');
   	// Or we just use Element.morph
   	$('maximizeFilterElement').addEvent('click', function(e) {
   		e.stop();
   		// Changes the element's style to .myClass defined in the CSS
   		anotherEl.morph('.filterElementMax');
   	});
   
   	$('minimizeFilterElement').addEvent('click', function(e) {
   		e.stop();
   		// You need the same selector defined in the CSS-File
   		anotherEl.morph('div.filterElementMin');
   	});
   });

   This is the css:
   

   .filterElementMax
   	{height: 500px;}
   div.filterElementMin
   	{height: 22px;}

   This is the div:
   

   <div id="FilterElement" class="middle filterElementMin">

   The smarter ones than I amongst you (no doubt, most of you) will be able to spot to cause of the problem. Help!

2. Minklet
   Member
   Posted 2 years ago #

   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

3. s_ha_dum (was apljdi)
   Member
   Posted 2 years ago #

   URL?

4. Minklet
   Member
   Posted 2 years ago #

   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.

5. Minklet
   Member
   Posted 2 years ago #

   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.

6. s_ha_dum (was apljdi)
   Member
   Posted 2 years ago #

   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.

7. Minklet
   Member
   Posted 2 years ago #

   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*

Topic Closed

This topic has been closed to new replies.