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
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    attaching events to enumerated elements (prototype/scriptaculous)

    Evidently I'm failing to grasp something... I'm trying to grab all the <div> elements below, add an opacity effect to the images in them, and add mouseover handlers to the enclosing hrefs to turn the opacity on and off.

    But the code below has the effect that mousing over ANY of the hrefs toggles the opacity effect on just the bottom image.

    Code:
    Event.observe(window, 'load', function() {
    	
    	$$("div.insetcontent").each(function(oBox){
    		oLink = oBox.childElements()[0];
    		oLinkImg = oLink.childElements()[0];
    		new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5});
    		Event.observe(oLink, 'mouseover', function() {new Effect.Opacity(oLinkImg, {duration:0, from:0.5, to:1.0})});
    		Event.observe(oLink, 'mouseout', function() {new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5})});
    	});
    
    });

    Code:
    <div class="insetcontent" id="b1"><a id="l1" href="/about/simon.html" title="Read more"><img id="i1" src="/img/snippets/pc5.jpg" width="107" height="57" alt="Simons experience is focussed on portfolio and asset management" /><p>Simons experience is focussed on portfolio and asset management</p></a></div>
    
    <div class="insetcontent" id="b2"><a id="l2" href="/about/simon.html" title="Read more"><img id="i2" src="/img/snippets/pc5.jpg" width="107" height="57" alt="Simons experience is focussed on portfolio and asset management" /><p>Simons experience is focussed on portfolio and asset management</p></a></div>
    
    <div class="insetcontent" id="b3"><a id="l3" href="/about/simon.html" title="Read more"><img id="i3" src="/img/snippets/pc5.jpg" width="107" height="57" alt="Simons experience is focussed on portfolio and asset management" /><p>Simons experience is focussed on portfolio and asset management</p></a></div>
    
    <div class="insetcontent" id="b4"><a id="l4" href="/about/simon.html" title="Read more"><img id="i4" src="/img/snippets/pc5.jpg" width="107" height="57" alt="Simons experience is focussed on portfolio and asset management" /><p>Simons experience is focussed on portfolio and asset management</p></a></div>

  • #2
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    without 'var' in front, oLink and oLinkImg will be global, and over-written each iteration.

    Additionally, you might want to consider using prototype's down() method, rather than childElements()[0], with a tagname of 'a' and 'img' to avoid fetching entire arrays when you know you only want one element.
    My thoughts on some things: http://codemeetsmusic.com
    And my scrapbook of cool things: http://gjones.tumblr.com

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Aha. Of course - I was thinking that those vars needed to be global, cos I'm iterating through them. Didn't occur to me that in putting them inside a function, I'm making them specific to each instance of the function. If that makes sense Thank you.

    On a kind-of-related matter - it's the same code, anyhow - this is what I've currently got:

    Code:
    $$("div.insetcontent").each(function(oBox){
    		var oLinkImg = oBox.down('img');
    		new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5});
    		Event.observe(oBox, 'mouseover', function() {new Effect.Opacity(oLinkImg, {duration:0, from:0.5, to:1.0})});
    		Event.observe(oBox, 'mouseout', function() {new Effect.Opacity(oLinkImg, {duration:0, from:1.0, to:0.5})});
    	});
    And, while it works as it should, it doesn't work as I want. I've attached the mouseover/out handlers to the containing div. This does highlight the image as you rollover the box, but as you move your mouse between the image and the paragraph, it flickers between opacity. And even worse, sometimes it seems to get mixed up and the image doesn't always return to semi-opaque when you mouse out of the box.

    Is there a way to avoid this? I have a feeling it's... event bubbling, or something, but don't know enough about it.


  •  

    Posting Permissions

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