How to make an element disappear and reappear?

1

Hello! I am using a rectangle element for audio and am wondering how to make the element disappear around 5 seconds after mouse stops moving and reappear whenever the mouse is moved?

Thanks so much!

2

Here’s a few ways to do this:

This one seems right on the money (load it in a New JavaScript function within Hype ‘on scene load’ and instead of running an alert, use a Hype API function to run a timeline)

var inactivityTime = function () {
    var t;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeypress = resetTimer;

    function logout() {
        alert("You are now logged out.")
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(logout, 3000)
        // 1000 milisec = 1 sec
    }
};
1 Like
3

Hi Daniel! Thanks so much for this! What do you mean by use a Hype API function instead of running an alert? I’m not sure what running an alert is either.

this is an example of a scene I want to do this in for the audio player controls.
Untitled Scene 40.zip (950.6 KB)

The other time I’m interested in doing it is on scenes with a rectangle element that holds a vimeo video embed. I’d like it for the arrows, though.
erika and alvaro together.zip (238.0 KB)

Thanks so much!

4

Can you resend this? The file seemed to be incomplete... If you can make a zip file of the actual .hype file that would be helpful.

5

Hi Carey!

Another approach…
Put the script below in the “Head HTML” of your project. The Timeline named “Audio Holder” controls the visibility of the Rect element named “audioHolder” using both “Display” & “Opacity” properties (the 1 second fadeout from 4 to 5 second mark). The Rect element “audioHolder” is a stand-in for your own audio element of course.

In the demo below the beige colored rectangle represents the boundaries of the Hype document. Moving the mouse into this rectangle starts the 5 second clock. If desired You can reset~stop this clock when You move into the actual “audioHolder” element - but that’s your homework - all the code is there; it is a matter of stopping~restarting the “Audio Holder” timeline via an “On Mouse Over” ~ “On Mouse Out” for the “audioHolder” element.

Demo here.

Hype Project Demo: MouseMoveContainer.hype.zip (15.4 KB)

<script>
var hypeContainer = document.getElementById(hypeDocument.documentId());
	hypeContainer.addEventListener("mousemove", function(event) {
	    mouseMoveHypeContainer(event);
	});

function mouseMoveHypeContainer(e) {
    hypeDocument.continueTimelineNamed('Audio Holder', hypeDocument.kDirectionForward, true)
}
</script>
1 Like
6

Hi Jim! I tried that in this scene, but on scene load instead of mouse over because I don’t know that someone would necessarily mouse over the audio holder and because on cell phones there is no mouse over. But, I can’t get it to work. Does something need to be different?

Thanks so much!!

11 Justo Tarata emptied.zip (640.1 KB)

7

Bummer! I'm out of time for at least a day to have another adjustment re: mobile. But quickly - try using "On Mouse Down (Touch Start)" in place of "On Mouse Over", and "On Mouse Up (Touch End)" in place of "On Mouse Out" for the "audioHolder" element and so control the "Audio Holder" timeline.

Please note: My code actually works on mobile (the clock runs with the first touch). It's just that the nature of your "homework" will change... Try the suggestion in the paragraph above to pause~reset the timer so that it does not disappear (as it currently will) when the user is manipulating the "audioHolder" element.

Or give Daniel's suggestion a go.

The change You would make to the code he presented as an example:

instead of running an alert, use a Hype API function to run a timeline

is exactly what I did in my code (Hype API)...

hypeDocument.continueTimelineNamed('Audio Holder', hypeDocument.kDirectionForward, true)

so to adjust it:

 function logout() {
        hypeDocument.continueTimelineNamed('Audio Holder', hypeDocument.kDirectionForward, true)
    }

of course You would want to change the function's name to something more descriptive than "logout()".

Bye for now.

1 Like
8

??

9

yup! I didn’t think of cell phones when I first posted this… But it needs to work for phones too…Not sure how exactly though… It could disappear a few seconds after scene load and then when tapped, come back?

thanks @JimScott! I’ll try that and be in touch about it!

10

Hi @JimScott! Thanks so much. I think it’s close… I did what is in the demo file but once it disappears, it doesn’t come back when the mouse moves. Also, I’m not sure how this works on mobile because I can’t test it. Thanks so much (whenever you have time!) 11 Justo Tarata emptied.zip (640.5 KB)

11

Excellent Jim, your script also works as a "on scene load" function.

1 Like
12

Hi @caverbook

It may be a good idea to keep these questions linked to the other questions if they are relating to the same project. Whilst playing a timeline would achieve, in essence, what you are asking, it would mean that you would have to create many timelines for all the videos that you have in your project. If you used Hype's API (which just means the built in methods for manipulating things when creating functions in Hype) to create the effects then you could add this script on a scene by scene basis:

// element is the scene
	video = element.querySelector('.video'); // this could be any value for any element with the class name
	element.addEventListener("mousemove", reset);
	var timer;

	reset();

	function mousemove(e) {
			console.log('restarting')
			hypeDocument.setElementProperty(video, 'opacity', 0, 0.4, 'easeinout')
	}
	
	function reset(){
		hypeDocument.setElementProperty(video, 'opacity', 1, 0.4, 'easeinout')
		clearTimeout(timer)
		timer = setTimeout(mousemove, 5000)
	}

Doing this, you won't have to create individual timelines for all your videos plus you can add this code to your existing project without having to change anything.

@JimScott as Greg has said you can use this on scene load so not sure why you put it in the Head HTML :slight_smile: Also, just for you, using an anonymous function with another function call inside it is a bit redundant. You can just call the mouseMoveHypeContainer() function with a reference to it.

hypeContainer.addEventListener("mousemove", mouseMoveHypeContainer);

2 Likes
13

Thanks!