PDA

View Full Version : Fade in/fade out on mouse over acting strange



lasseok
5 Mar 2011, 2:59 AM
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:



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

Animal
5 Mar 2011, 3:24 AM
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?

lasseok
5 Mar 2011, 4:41 AM
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!

Animal
5 Mar 2011, 4:53 AM
Yep.

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

lasseok
5 Mar 2011, 5:02 AM
Well, that explains a lot.

And saves some of my developer pride :)


That would be great. Thank you.

Animal
5 Mar 2011, 5:16 AM
If you add



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?

lasseok
5 Mar 2011, 5:33 AM
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.

Animal
5 Mar 2011, 5:19 PM
try


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',
});
}
});
});

lasseok
6 Mar 2011, 2:15 AM
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[/URL]
anonymous:5[URL="http://www.sencha.com/forum/chrome-devtools://devtools/devtools.html?docked=true&toolbar_color=rgba%28230,230,230,1%29&text_color=rgba%280,0,0,1%29"] (http://www.sencha.com/forum/chrome-devtools://devtools/devtools.html?docked=true&toolbar_color=rgba%28230,230,230,1%29&text_color=rgba%280,0,0,1%29)
Ext.EventManager.createListenerWrap




The name of my page is math.

Animal
6 Mar 2011, 6:14 AM
i made a mistake in that code. take a closer look

lasseok
6 Mar 2011, 1:07 PM
I suppose you're refering to this line:


img = e.getTarget.child('img');

Didn't catch that earlier. The closest I get is this:


img = e.getTarget(false,false,true).child('img'); //getTarget() alone returns the DOM element

But in that scenario, img is logged as null. What I'm I missing?

Animal
6 Mar 2011, 10:20 PM
OK, I made another mistake! ;)

The Element.down() and Element.child() methods have swapped places in 4.0

down() means find a descendant node at any depth, child() means an immediate child. So you in fact need down('img')

lasseok
7 Mar 2011, 12:31 AM
It happens :)

But, even with the modified code, we're kind of back at the beginning:



var img;
Ext.select('.options').on('mouseenter', function(e){
img = e.getTarget(false,false,true).down('img');
console.log(img);
if(img != null){
img.setOpacity(1, {
duration: 500,
easing: 'easeIn',
});
}
}).on('mouseleave', function(e){
if(img != null){
img.setOpacity(0, {
duration: 500,
easing: 'easeIn',
});
}
});


This code works, but if I mouse over the a-wrapped img tag, it fades away.

Animal
7 Mar 2011, 1:41 AM
I added this code to the end of the setup function in examples/view/data-view.js



var img;
p.body.on('mouseenter', function(e){
img = Ext.fly(e.getTarget()).down('img');
img.animate({
to: {
opacity: 1
}
});
}).on('mouseleave',function(){
img.animate({
to: {
opacity: 0
}
});
});


(I assigned the new Panel to the var p in the previous statement of course!)

And then mouseleave the Panel fades the first image out. Mouseentering it fades it in again.

lasseok
7 Mar 2011, 2:40 AM
Yup, works like a charm!


Thank you very much.

lasseok
8 Mar 2011, 8:02 AM
I did some more testing and it looks like things aren't entirely as they should be in your example.

If I load the DataView example with your modifications to the code and then mouseenter the panel from outside the the bottom left corner and onto fx. zacks_grill.jpg, I get an "img is null" error.

Same thing happens if I just randomly move the mouse over the images in the example.

Sometimes, it'll fade away the image that I mouseenter together with the Ext.fly(e.getTarget()).down('img'); image.

Is that still due to a bug or is it the code that select the image that needs to be adjusted?

Animal
8 Mar 2011, 9:26 AM
That's just that example. If you mouseenter quickly enough, the target of the mouseover (mouseenter is a fake event triggered by a DOM mouseover event) will be the image, and so .down('img') from there won't get anything.

I suppose it should test whether the target is an img, and only go down into it to look for an img if it is not.

Animal
8 Mar 2011, 9:32 AM
So maybe




var img;
p.body.on('mouseenter', function(e){
var t = e.getTarget();
img = t.tagName.toLowerCase() === 'img' ? Ext.get(t) : Ext.fly(t).down('img');
img.animate({
to: {
opacity: 1
}
});
}).on('mouseleave',function(){
img.animate({
to: {
opacity: 0
}
});
});