hey,
I have some problem, i try to find solution on web or here in search but no results
look at the video and see the code.
when i hover container in
Repeater fast its stuck on hover mode.
$w('#dataset2').onReady(() => {
$w('#CatgContainer').onMouseIn((event) => {
let $item = $w.at(event.context);
$item('#boxCategoryHover').show("float", floatOptions);
})
$w('#CatgContainer').onMouseOut((event) => {
let $item = $w.at(event.context);
$item('#boxCategoryHover').hide("float", floatOptions);
})
})
Hi Topink ,
Basically, when you hover the container it shows the $item(’ #boxCategoryHover ') , so now the mouse lays on the $item(’ #boxCategoryHover ') , which means the mouse out function (hide) should be for $item(’ #boxCategoryHover ') instead of $w(’ #CatgContainer ') .
Hope this helps!
Best,
Mustafa
Unfortunately this cannot be happened
but i try that
$w('#dataset2').onReady(() => {
$w('#CatgContainer').onMouseIn((event) => {
let $item = $w.at(event.context);
$item('#boxCategoryHover').show("float", floatOptions)
})
$w('#boxCategoryHover').onMouseOut((event) => {
let $item = $w.at(event.context);
$item('#boxCategoryHover').hide("float", floatOptions)
})
})
Unfortunately it’s still the same problem
Thanks,
Yair
Ok, it looks like when #dataset2 getting ready, it takes sometime so the event doesn’t work properly.
Try to move the code to be below the page onReady function instead of dataset.
$w.onReady(function () {
$w('#CatgContainer').onMouseIn((event) => {
let $item = $w.at(event.context);
$item(' #boxCategoryHover ').show();
})
$w('#CatgContainer').onMouseOut((event) => {
let $item = $w.at(event.context);
$item(' #boxCategoryHover ').hide();
})
Wow works great! You are the man
Thanks!
Yair
@mhammouz I’m having the same issue. I have a team page with team photos and then a colored, transparent overlay box with some text and a .png. The page works properly if I don’t move the mouse too fast, but if I do, some of the hover/overlays don’t go away as they should. Here’s the code I am using. Any help would be greatly appreciated!
$w.onReady(function () {
$w('#photo').onMouseIn((event) => {
let $item = $w.at(event.context);
$item('#overlayBox').show();
})
$w('#overlayBox').onMouseOut((event) => {
let $item = $w.at(event.context);
$item('#overlayBox').hide();
})
});
So why not just add effect options like the original forum poster did?
https://www.wix.com/corvid/reference/$w.EffectOptions.html
Have a look at this code example for a brief example, it isn’t in a repeater like you are using, however you can adapt the code example and your own code to suit as you will need the $item when using a repeater.
https://www.wixcreate.com/image-fading-in-and-out
https://www.wix.com/corvid/reference/$w.Repeater.html
@givemeawhisky Thanks for the tip, but the example you provided suffers from the same issue. The example is supposed to fade back in upon the mouse not being over the image. If you do anything other than move the mouse very slowly over the image, you can see that it can get stuck not showing. If I were to put this into a repeater, the same issue would arise.
Basically, the functionality I’m looking for is that the only hidden element that shows is the one the mouse is hovering over and if it’s not hovering over any, then none will show. I don’t know how to address the issue where the pointer is moved quickly and the onMouseOut doesn’t register.
@ericberglund
That is just it, you can’t control how fast the user moves the mouse, so you can only code it to work as it should do.
$w.onReady(() => {
$w( '#button12' ).onMouseIn((event) => {
let $item = $w.at(event.context);
$item( ‘#box1’ ).show();
})
$w( '#button12' ).onMouseOut((event) => {
let $item = $w.at(event.context);
$item( ‘#box1’ ).hide();
})
})
@Eric B.
like what GOS says, you can’t control how fast the user moves the mouse, but you can come up with cool tricks to bypass this.
since you have a gallery of images, each image should be in 1 container, lets call it ‘TrueContainer’, add another container lets call it, ‘ContainerBackground’, that is attach inside TrueContainer but is not attach to the images. Make sure it so that the ContainerBackground is behind all your images in terms of layers.
add the code so that when the mouse touch the background, the hover overlay go away. This is like a just in case situation, where if the hoveroverlay does not fade when mouse isn’t over image, the mouse will fade if its not on image but on background. it just an assurance technique.
I use this and it works everytime, just hard to do depending on how many images you have, because the more ContainerBackground you have within TrueContainer, the smoother it will be.