CodingForums.com - Help w/ Event.observe / Scriptaculous

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Help w/ Event.observe / Scriptaculous (http://www.codingforums.com/showthread.php?t=143745)

Help w/ Event.observe / Scriptaculous

I have two questions for you guys...
1) how can I effeciently use Event.observe so that fadeOut() gets triggered every time a link is clicked?
2) every link features a different url... I am not sure how I can make fadeOut() point to the right url when a link is clicked... any suggestion?

THANK YOU TONS!!! ^_^

Code:

<div id="countries_wrapper">

<div class="continent" id="continent_EU"><h1>Europe</h1><br/><a class="country" href="/fr/">francais</a><br/><a class="country" href="/uk/">english</a><br/><a class="country" href="/de/">deutsch</a><br/><a class="country" href="/it/">italiano</a><br/><a class="country" href="/es/">espanol</a></div>

<div class="continent" id="continent_NA"><h1>North America</h1><br/><a class="country" href="/us/">united states</a><br/><a class="country" href="/ca-en/">canada francais</a><br/><a class="country" href="/ca-fr/">canada english</a></div>

<div class="continent" id="continent_LA"><h1>Latin America</h1><br/><a class="country" href="/es/">espanol</a></div> 

<div class="continent" id="continent_AS"><h1>Asia</h1><br/><a class="country" href="/jp/">japanese</a><br/><a class="country" href="/ch/">chinese</a></div>

<div class="continent" id="contient_INT"><h1>International</h1><br/><a class="country" href="/int/">english</a></div>

</div>



<script type="text/javascript" charset="utf-8">

//<![CDATA[

        function fadeOut(){

                var href = country.href; 

                new Effect.Fade('container', { duration:2.0, 

                        afterFinish:function(){

                                new Effect.Morph('wrapper',{style:'background:#080808', duration:1.0, 

                                        afterFinish:function(){ location.href = href }  

                                });

                }

        });

        }

//]]>

</script>

fyi, there are some really nice effects available for scriptaculous... you don't need to write your own. i'd suggest looking up Effect.Phase... it even supports toggling which means you can use it for fading in and out with every load\unload very easily. anyway... just have onclick or onmousedown inside your <a> call your function and have it fwd the url as a variable.

Code:

<a class="country" onclick="fadeout('put your url here');">english</a>

then you can have your function reference it

Code:

<script type="text/javascript" charset="utf-8">

//<![CDATA[

        function fadeOut(url){

                blah blah window.location=url

        }

//]]>

</script>

Your HTML is a bit of a mess, so I might be missing something but the following should work:

Code:

document.observe('dom:loaded', function() {  //need to do it once everything's loaded

  //then grab 'all a-tags inside countries wrapper' and call 'observe' on them with arguments:

  $$('#countries_wrapper a').invoke('observe', 'click', function(e) {

    e.stop();

    fadeOut(this.href); //in an event observer, 'this' is the element being clicked

  });

});

where fadeout is the same as yours, but with 'href' as it's argument.

Alternatively, you could use event-delegation and attach just one observer to the container:

Code:

document.observe('dom:loaded', function() {

  $('countries_wrapper').observe('click', function(e) {

    if(e.element().match('a')) { //if it's an 'a' tag

      e.stop();

      fadeOut(e.element().href);

    }

  });

});