Show and hide not working

Ask the community
,
1

Hi guys, I need help understanding why my show and hide code doesn’t work.

(Be forewarned, I’m ‘coding’ challenged, so please be gentle :blush:)

In this example, I simply have a box, named “sunbox” … and in that box, I have an image of the sun… named “sunimage”

I’ve set the box to be “Hidden”.

Here is my code:

export function sunbox_mouseIn ( event ) {
$w ( ‘#sunbox’ ). show ();
$w ( ‘#sunimage’ ). show ();
}

export function sunbox_mouseOut ( event ) {
$w ( ‘#sunbox’ ). hide ();
$w ( ‘#sunimage’ ). hide ();
}

Whenever I rollover the area of where the box is, nothing happens. I can’t for the life of me, figure what is wrong with the code.

Any help, would be immensley helpful and greatly appreciated!

Cheers,
Val

2

Open the property panel of the ‘sunbox’ element and make sure the mouseIn and mouseOut function are toggled on.

3

JD’s comment may work but also something to consider is that the image can be connected to the hover part of the box, you don’t actually need to handle that through code

To do that click the bolt symbol and add a hover interaction to your box then choose an image that should appear on hover.

4

Hi Amanda, thank you for your reply. Indeed, the hover states would normally be the way to go. The reason I’m instead trying to do this through code is because I’m trying to figure out a way I can control an animated gif to play when only on rollover.

The “sun” image was just a test for what I’m trying to achieve. But in actual fact, what I have is a character with no mouth and with animated eyes thats in a loop, and I also have a mouth gif that would animate through about 5 different frames, then it would stop on a smile. I will place it on top of his face. I don’t want the mouth animated gif to be looped, so I’ve set it to not loop. However, when using the “Hover Interaction” method, whenever i rollover, it seems that the mouth animation has already played through it’s 5 frames and now is static by the time it’s revealed on mouseover.

So I was hoping to control this mouth gif by using code to play the gif animation ONLY on rollover. It’s a tough one to explain, I hope the images gives you some more insight.

5

Hi again J.D… (this is the updated version of the exact images I’m trying to hide and show)

I can’t figure it out, I’ve made sure as you’ve said, to have them toggled on…

1535×695 41.3 KB

1542×750 36.8 KB

6

@valym777 I don’t understand your code:

  1. You wrote that mouthbox should show up on hover. But if it’s hidden you cannot hover on it (as it’s hidden).

  2. You wrote .show() on both - mouesIn and mouseOut and you don’t use .hide() at all.

7

@jonatandor35 I hastily copied and pasted the code to recreate the error, because in my frustration, I had deleted the lot. So this was my bad for when I took the screenshot, it indeed had the wrong coding. Again, sorry about that. Here it is again, with the adjusted coding, screenshot of what I have.

1519×780 42.1 KB

8

@valym777 Your code is still unclear. As I said, if an item is hidden, you cannot hover over it (because it is not there).

9

@jonatandor35 Of course, I’m a shmo :slight_smile: I did, indeed have it set to “hidden”, which I thought was required. The code does the hidding for me, so … yes, I’m learning now :slight_smile: Thank you J.D.

However, it seems once I “mouseout”, it doesn’t seem to re-apear on the second mousein… but it doesn’t matter, because ultimitatley, my theory of getting the gif animation to play from start to finish was proven wrong, even with this method. Seems that the gif animation, while on page load, will automatically play the frames, and does NOT re-start on any sort of “hover” actions, including this coding. Not a big deal I suppose, it just looked weird for my animated character to have a looping mouth for just a few words, hence I wanted just about 5 frames to play and then stop. Anyway, thank you again J.D.

10

@valym777 I’m not sure what you were trying to do, but if you wanted to show it up once the mouse got into the area of the hidden element, you should put it in a transparent box (which will never be hidden), and apply the onMouseIn and onMouseOut to his parent box.

11

@valym777
So if i understand correctly,
You have a man with moving eye’s
this image will keep looping?
Then you have a mouth that moves
but when not on rollover, the mouse does not moves,
Then when on “mouseIn” it loops 1 time.

Is this correct?
Ifso, i downloaded the images to test hingst out.
Kind regards,
Kristof.