www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 19

Thread: Help with some js animation

  1. #1
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14

    Question Help with some js animation

    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 :

    Code:
    	<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?

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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.

  3. #3
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    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

  4. #4
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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?)
    Last edited by ReFreezed; 12-04-2012 at 08:05 AM.

  5. #5
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    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...

  6. #6
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    I meant simply add that jQuery call like this:
    Code:
    <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.

  7. #7
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    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!

  8. #8
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    ok, we wwwer writing at same time
    i`ll go check with the no conflict thing..

  9. #9
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    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

  10. #10
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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

  11. #11
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    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?

  12. #12
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    sorry, this was a double post by mistake, had some issues when loading ...
    Last edited by darkitten; 12-04-2012 at 01:19 PM.

  13. #13
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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
    Code:
    http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js
    into
    Code:
    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
    Last edited by ReFreezed; 12-04-2012 at 02:04 PM. Reason: More research...

  14. #14
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    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

  15. #15
    Join Date
    Dec 2012
    Location
    Purrrville
    Posts
    14
    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:
    Code:
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles