Help with some js animation

[darkitten]

Hi.

I`m new here, i know html & css but i`m a total stranger to javascript & its libraries.

BUt i found once a very cute thing on an old Joomla Bamboo template for joomla, and because i got the "tadaam - cool!" reaction from ppl i shown it to, i want to be able to replicate it in an normal html website.

I was able to replicate it on a joomla site a while ago, just for testing, but now i`m unable to do so and i`m stuck.

the effect should look like this:

http://joomla-love.com/j-m-charm/

if you click on the red juice image, a pannel drops down bouncing. yey!

i`ve put together a little html page, where i tried to make it again, here:

http://joomla-love.com/j-m-bounce/slidepanel.html

and nothing happens

the javascript code used is :

	<script type="text/javascript">
 
	var mySlide = new Fx.Slide('panou', {
		duration: 2000, 
		transition: Fx.Transitions.bounceOut
	}).hide();
 
	$('carligu').addEvent('click', function(e){
		e = new Event(e);
		document.getElementById("panou").style.display="block";
		mySlide.toggle();
 
		e.stop();
	});
	
   </script>

i added this libraries:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>

and i believe any of you can see the html & css used. but if needed, i`ll paste it too.

Help, pretty please!
What am i doing wrong?

[ReFreezed]

Fx.Slide is undefined, so it seems you're missing a JavaScript library. My guess is that mootools-more.js is missing after comparing the two pages, as it looks like Fx.Slide is defined in that file.

[darkitten]

ok, so i went here:

http://mootools.net/more/

and downloaded the mootools-more thing, with everything on it, plus the 125 version, cuz the effect when found was a few years back, added them, still nothing happens

http://www.joomla-love.com/j-m-bounce/slidepanelv2.html

[ReFreezed]

Well, the Fx.Slide problem is fixed but now the console reveals that addEvent is undefined. (Always check the console!) There is a conflict between jQuery and MooTools: the global $ is the jQuery library and not MooTools, thus the addEvent method does not exist. (jQuery doesn't have that method.) Try calling jQuery.noConflict() right before your script (or simply don't include the jQuery library if you don't use it... It seems kinda overkill to have both libraries, right?)

[darkitten]

i`ll try my best to understand what you`re saying. You`re most probably right, but i`m really at zero with javascript. promised myself i`ll get a book to learn it right from the start, but stuff keeps getting in the way...

So i have no idea what the console is or how to call jQuery.noConflict()

But i`ll try to remove the jquery ones, see what happens, and be back...

[ReFreezed]

I meant simply add that jQuery call like this:

<script type="text/javascript">

    jQuery.noConflict();
 
    var mySlide = new Fx.Slide('panou', {
        duration: 2000, 
        transition: Fx.Transitions.bounceOut
    }).hide();
 
    $('carligu').addEvent('click', function(e){
        e = new Event(e);
        document.getElementById("panou").style.display="block";
        mySlide.toggle();
 
        e.stop();
    });
    
</script>

And every browser has a JavaScript console that shows errors and warnings. Check this link to see where to find it.

[darkitten]

i don`t know how to edit the previous post, just i`ll reply again

i went & removed the jquery libraries, left only mootools.

it works alot like expected, thank you very much!

but it certainly doesn`t bouce!

and what if inside ther site there is need for some jquery thing? how can i go with the "no conflict" feature?

but even so, if it would bounce, would be awesome!

[darkitten]

ok, we wwwer writing at same time
i`ll go check with the no conflict thing..

[darkitten]

ok, i went and changed the script with the code you provided with "no conflict"
in v4 i added the jqueries libraries also again, i v5 i removed them again. but both v4 or v5 don`t do anything

http://www.joomla-love.com/j-m-bounce/slidepanelv4.html

http://www.joomla-love.com/j-m-bounce/slidepanelv5.html

[ReFreezed]

The addEvent error is fixed by including MooTools before jQuery in v5, but nothing is still happening. No errors or anything. Now I don't know what's wrong, sorry. :S

[darkitten]

changing the order worked! Thank you so much refreezed!

http://www.joomla-love.com/j-m-bounce/slidepanelv6.html

Now the only issue left is that it just slides, without doing the "bouncing" also... like here: http://joomla-love.com/j-m-charm/
What can be wrong in there?

[darkitten]

sorry, this was a double post by mistake, had some issues when loading ...

[ReFreezed]

Ok nice.

Fx.Transitions.bounceOut is undefined this time, so I'm guessing it uses a standard sliding transition instead of bouncing. I can't find in what file it is defined on that original page after a quick search, but my guess is that it's missing from mootools-yui-compressed.js.

Maybe you could try changing

http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js

into

http://ajax.googleapis.com/ajax/libs/mootools/1.4.3/mootools-yui-compressed.js

Edit: or, try changing Fx.Transitions.bounceOut to Fx.Transitions.Bounce.easeIn

[darkitten]

ok, i chnaged it with 1.4.3:

http://www.joomla-love.com/j-m-bounce/slidepanelv8.html

and also with mootools -core:

http://www.joomla-love.com/j-m-bounce/slidepanelv7.html

still no bouncing

[darkitten]

OMG, it got fixed!!!

I have re-read the page like for 10th time, and it says:

Fx.Transitions Method: bounce

Makes the transition bouncy. Must be used as Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.

but in my code it jus says:

transition: Fx.Transitions.bounceOut

but that is how it was in the original template, that that is still as it is in that joomla installation. so smth must still be wrong. But, howevere, once i replaced "bounce.Out" with "Bounce.easeOut" it got bouncy....

do you think this is a valid solution?
http://www.joomla-love.com/j-m-bounce/slidepanelv9.html