On mousedown replay timeline or timelines

1

Hi
Im trying to put som code in the Head HTML to replay a timeline “on mouse down”
But I can’t get it to work?
I can get it to stop playing sounds but not a timeline?
Any suggestions?

This is the code right now:

.user-is-clicking:focus  {
  outline: none!important;
  
}

</style>


<script>

document.onmousedown = myMouseDownHandler;

    
    function myMouseDownHandler() {
     var focusrules_  = document.querySelectorAll('.focusrule')

var i;

	
	for (i = 0; i < focusrules_.length; i++) {
	
  focusrules_[i].classList.add('user-is-clicking');
  
  //Rickes Stop sound when using tab and mouse
  var myAudio = document.getElementById("13");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("14");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("15");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("16");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("17");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("18");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("19");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("20");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("21");
myAudio.pause();
myAudio.currentTime = 0;

var myAudio = document.getElementById("22");
myAudio.pause();
myAudio.currentTime = 0;




   
}


	}



document.onkeydown = myKeyDownHandler;

    function myKeyDownHandler() {
     var focusrules_  = document.querySelectorAll('.focusrule')

var i;

	
	for (i = 0; i < focusrules_.length; i++) {
	
  focusrules_[i].classList.remove('user-is-clicking');
   
}


	}


	

	
	

	






 	//</script>

Cheers
Rickard

2

Can you share a Hype document with us?

3

Sure thing here you go.
I got some help earlier to get the tab index right. Now I don’t get the blue square if I klick on the items but I get it when using the keys.
And I put the "stop sounds under that same code but when I try to replay all or any of the timelines I don’t get it to work. Probably because I’m not a programmer :frowning:

hkk_7-9_stjalkgronsaker 2.zip (2.2 MB)

4

I don't think the blue outline (signaling focus) is automatically added on elements when clicking, but it will show up when tabbing + spacebar(ing) between these different objects.

You could create your own css class and add + remove that class during the individual timelines to get around that.

Take a look in your browser's developer console -- there are a few errors showing up. When adding code, add a function and make sure it doesn't generate errors before adding more. With a lot of additional JavaScript code running all at once it becomes difficult to diagnose what's going wrong.

5

Hi
Thanks I will take a look at the console.
But all the functionality works fine in the file.

But if I just want to put the javascript in the head HTML to use “on mousedown” and then replay a timeline?

Sorry if its a stupid question.

6

Not a stupid question :slight_smile:. There’s API to start timelines that can be used:

hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
  • You will need to rename ‘Main Timeline’ if you want to trigger a different timeline
  • In a <script> in the Head the hypeDocument variable won’t be defined though; this is typically passed in through functions within Hype. If you know that there will only be a single hype document on the web page, you could simply get it via:
    var hypeDocument = Object.values(HYPE.documents)[0];
    But you can only do this after the document has been created; typically this would be fine as long as it is in your mousedown handler (to fetch it each time), otherwise you will need to wait and fetch it during a HypeDocumentLoad event or set a global variable on your first On Scene Load.