Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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>

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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>
    Last edited by ohgod; 07-08-2008 at 09:30 PM.

  • #3
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    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);
        }
      });
    });
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com


  •  

    Posting Permissions

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