1. #1
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Question Fade in/fade out on mouse over acting strange

    Fade in/fade out on mouse over acting strange


    Hi

    I really need some help trying to get a bit fading to work.

    I have a couple of divs with a class name of options. Inside af these divs there's an img with a link around it:

    Code:
    <div class="options"><!--The only important CSS is opacity:0;-->
        <a href="#"><img height="25" width="19" src="/img/icons/reset.png" alt="Reset" /></a>
    </div>
    <script type="text/javascript">
    Ext.onReady(function(){
        Ext.select('.options').on('mouseover', function(e,el){
            var el = Ext.get(el.getAttribute('id')); //If I don't do this line, el won't be an Ext.core.Element
            console.log(el);
            if(el != null){                            //When mouse over the img, while still over the .otions, el is null... 
                el.setOpacity(1, {
                    duration: 500,
                    easing: 'easeIn',
                });
            }
        }).on('mouseout', function(e,el){
            var el = Ext.get(el.getAttribute('id'));
            if(el != null){
                el.setOpacity(0, {
                    duration: 500,
                    easing: 'easeIn',
                });
            }
        });
    });
    </script>
    I simply attach mouseover and mouseout events and fade in or out. The main problem is that I don't want it to fade out when I hover over child elements of the options-div.

    I tried using mouseenter, mouseleave instead but still the same result.

    Any suggestions?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    mouseover and mouseout bubble. So you are asking to hear about any mouseover event that takes place within the .options element.

    mouseenter and mouseleave are what you need.

    There was a bug with those in an earlier release. What release are you using?

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Default


    Oh, I see. I just ran out of things to try and thought I'd give the mouseover/out a shot.

    I only tried the mouseenter/leave with PR2. But in the meantime I've upgraded from PR2 to PR3 but the problem is still the same.

    When I mouse over the .options div it fades in, which is all good. But when I mouse over the link tag inside of the div, the mouse leave event is fired, followed by the mouse enter event.


    I really appreciate your help!

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yep.

    Mouseenter is bust. I'll take another look at it.

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Default


    Well, that explains a lot.

    And saves some of my developer pride


    That would be great. Thank you.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    If you add

    Code:
    Ext.EventManager.contains = function(event){
        var parent = event.browserEvent.currentTarget,
            child = this.getRelatedTarget(event);
    
        if (parent && parent.firstChild) {
            while (child) {
                if (child === parent) {
                    return false;
                }
                child = child.parentNode;
                if (child && (child.nodeType != 1)) {
                    child = null;
                }
            }
        }
         return true;
    };
    Does it work?

  7. #7
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Default


    Sort of.

    With that code, the events fire correctly and the div doesn't fade away when I mouse over the a tag. Better than before.

    But if I hover over the a tag and mouse out of the .options div, nothing happens because el is null and I therefore can't set its visibility.

    Same problem when I mouse enter directly onto the a tag.

    Enter/leave on the .options alone = No problem.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    try
    Code:
    Ext.onReady(function(){
        var img;
        Ext.select('.options').on('mouseover', function(e){
            img = e.getTarget.child('img');
            console.log(img);
            if(img != null){
                img.setOpacity(1, {
                    duration: 500,
                    easing: 'easeIn',
                });
            }
        }).on('mouseout', function(e){
            if(img != null){
                img.setOpacity(0, {
                    duration: 500,
                    easing: 'easeIn',
                });
            }
        });
    });

  9. #9
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
    lasseok is on a distinguished road

      0  

    Default


    Nope, that doesn't work at all I afraid.

    I've attached the error message I get in Firebug and in Chrome's inspector. This is the one from Chrome:

    • Uncaught TypeError: Object function (selector, maxDepth, returnEl){
      if (selector) {
      return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
      }
      return returnEl ? Ext.get(this.target) : this.target;
      } has no method 'child'
      • Ext.select.on.on.img.setOpacity.durationmath:138
      • (anonymous function):5
      • anonymous:5
      • Ext.EventManager.createListenerWrap

    The name of my page is math.
    Attached Images

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    i made a mistake in that code. take a closer look

Similar Threads

  1. How to fade in a window
    By jaques in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Jul 2010, 12:20 PM
  2. FX fade in IE8
    By pkli in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 4 Apr 2010, 1:01 AM

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar