Disable a Javascript on rollover

Using JavaScript with Hype
1

Hi Guys,
I made a slide show visible HERE
As you can see the javascript pause of 3 Sec is working good.

setTimeout(function() { hypeDocument.continueTimelineNamed('gallery_premi', hypeDocument.kDirectionForward); }, 3000);

When the photo come in, I set 3 sec pause on the timeline with this java above.
The problem is: the Java still running even when I click on the arrows next/prev, and boom! unusable!

So I would stop/disable/cancel this “Pause Javascript” once I’m rollover the slideshow area, so the user can manually next and prev the pics.
Then, when rollout, the automatic slideshow could continue (but this is not strictly necessary)

I tried to set a much longer pause (like few minutes) when rollover the slide show, but the 3 sec pause win :wink:

Thanks a lot guys!

2

Hi Nim!

Without a project file to look at any specific recommendation would be complete guess work.

So here is a general approach that You will need to adapt to your needs clearTimeout().

You would run this with the “On Mouse Over” event of your button.

But note that You need to create a global variable for this to work - as shown in the code below - but something not currently present in your code.

var myVar;

function myFunction() {
    myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}

function myStopFunction() {
    clearTimeout(myVar);
}
1 Like
3

Thanks Jim,
I tried to implement your solution, but as I’m not a dev, It doesn’t works.
Here it goes the file. I cleaned out all the other stuff cause for obviously issues of Copyright I cannot share everything (sorry) and It’s easier to work up.

Tnx
Nim

onlyslide.zip (321.6 KB)

4

Hi Nim!

Thank You for your project example, but without the (confidential) images I cannot gauge if my code is working properly. So I’ve created project from scratch using Hype’s rectangles in place of your images - but functionally everything will be the same.

Next I owe You an apology - I led You the wrong direction with the example code I provided above. I stated You needed a global variable in the code to make things work, but the example code I showed used a local variable. I did not check the code carefully. Sorry to have wasted your time.

And off we go to New Horizons…

Hype Project: SetInterval_SlideShow_JHSv1.hype.zip (17.8 KB)

Instead of “setTimeout” we are now going to use “setInterval”. “SetInterval” works very similar to “setTimeout” as You will see. I prefer to use “setInterval” for repeated procedures such as a slide show. “startSlideShow” is a global variable - really ;->  It is used both in the “slideShow” and “stopSlideShow” functions.

Note: You can substitute your own terms for the function names & global variable.

 function slideShow(hypeDocument, element, event) {
       startSlideShow = setInterval(function(){ myTimer() }, 3000);
       // "startSlideShow" is a global variable

function myTimer() {
   hypeDocument.continueTimelineNamed('gallery_premi', hypeDocument.kDirectionForward);
   }

}


  function stopSlideShow(hypeDocument, element, event) {
  clearInterval(startSlideShow); // "startSlideShow" global variable
}

**Operation:**

Page opens:
“On Scene Load” runs the “slideShow” function. Slide show displays a new image every (3) seconds, and then loops back to the start and runs the images again.

Arrow buttons:
“On Mouse Over” - runs the “stopSlideShow” function. User can click arrows to advance to next or previous slide. “On Mouse Out” - runs the “slideShow” function and the automated slide show continues.

1 Like
5

@JimScott It is actually a global variable Jim. In other words it can be used by both functions. The problem here is scope. Even though it's global it is still only declared in the current scope which is inside this Hype function.

I think what you wanted to say was "you need a variable that belongs to global scope or the document or even window" :slight_smile: so that you can use it across functions in Hype. The thing is that when using Javascript in Hype everything you add is contained in a function and if you declare variables using var then it will be available within the scope of that function. Furthermore if you wrote another function inside the Hype function and declared a variable using var in that function then the scope for that variable will be local to that function.

In your further example you then used "startSlideShow" and stated this as a global variable. Which is true but the reason it's global (or available to use across Hype functions) is because when created it searched up the chain (scope) to see where or if it had been declared somewhere and when it reached the top (global scope) and found that it hadn't been declared it basically declared itself therefore becoming declared in global scope. Hope that seems clear enough. :slight_smile:

1 Like
6

JIM! YOU ARE THE MAN!!!
Thanks soooo much! It works Perfectly!!!

I was pretty near with your first solution but I didn’t declare the function “On scene load”, so…nada.

@DBear thanks you too for your clarification!

2 Likes
7

Exactly - thanks!

1 Like