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);
})
})
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(); })
@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.
$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(); }) })
@Mustafa Hammouz 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(); }) });
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
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