JavaScript question

[Vico Eventuin]

I want to build an interaction with JS. I want to use a button to increase the value of a number of a meter as long as the button is clicked and hold it. On release of the button the number has to stay at the last value. Pushing and holding it again has to further increae the value.

How to build this with Some JS in CP?

Help is very Welcome!

[TLCMediaDesign]

This code will increment a variable by 1 every 1/2 second.

You need to create a variable in Captivate called myVal;

The button you press is called "myButton"; Do not have any action assigned to the button.

On slide enter, execute this JS:

var timer = null;

var btn = document.getElementById("myButton");

btn.addEventListener("mousedown",buttonPress,false);

btn.addEventListener("mouseup",clearPress,false);

function clearPress()

{

     btn.removeEventListener("mousedown",buttonPress,false);

     clearInterval(timer);

}

function buttonPress()

{

     timer=setInterval(function(){window.myVal++;},500);

}

[Vico Eventuin]

Many thanks for your solution! Wil try this out on friday, no acces to my pc before that.

Will let you know if this worked for me.

Vico

[Vico Eventuin]

Works like a charm.....

But only works once.

"Pushing and holding it again has to further increase the value." doesn't work

Would be nice if I could use 2 buttons, one for increase and one for decrease, with the possibility to keep changing the value by pushing the plus or minus buttons several times.

Vico

[TLCMediaDesign · Accepted solution]

Sorry, I read it as it needs to only work once.

Remove btn.removeEventListener("mousedown",buttonPress,false) from the clearPress function.

[Vico Eventuin]

Fantastic!

Would be nice if I could use 2 buttons, one for increase and one for decrease, with the possibility to keep changing the value by pushing the plus or minus buttons several times.

Is that posible ?

[Vico Eventuin]

David, thanks again for your solution.

One last request.

How can I get a second button on the same slide to do the opposite of the first, so one button increases the value and the other button decreases the value.

Hope you can help me out!

[TLCMediaDesign]

I'll have a look at it later, busy right now. Would it be allowed to go negative?

[Vico Eventuin]

Great! No negative numbers should be allowed.

[dan561]

Building on from TLC's solution:

My buttons are named myButtonUp and myButtonDown.

var timer = null;

var btnUp = document.getElementById("myButtonUp");

var btnDn = document.getElementById("myButtonDown");

btnUp.addEventListener("mousedown", buttonPressUp, false);

btnUp.addEventListener("mouseup", clearPress,false);

btnDn.addEventListener("mousedown", buttonPressDn, false);

btnDn.addEventListener("mouseup", clearPress, false);

function clearPress()

{

     clearInterval(timer);

}

function buttonPressUp()

{

     timer = setInterval(function(){ window.myVal++;},500);

}

function buttonPressDn() //prevents values lower than 0

{

     if(window.myVal > 0){

       timer=setInterval(function(){ window.myVal--;

          if(window.myVal < 1){

              clearPress();

           }

        },500);

    }

}

[Vico Eventuin]

GREAT!

This doesn't on mobile because you don't have a mouse to keep pressed, right?

Is it also possible to make it work on desktop AND mobile?

[TLCMediaDesign]

If you include the fastclick javascript library it should work. It really helps everything on mobile.

[Vico Eventuin]

Will try, thanks.

I guess the problem is that "mousedown" and "mouseup" don't work with mobile.

[dan561]

Take a look at

http://tutorials.jenkov.com/responsive-mobile-friendly-web-design/touch-events-in-javascript.html

I haven't tried this myself (yet), but this looks very well explained.

[dan561]

OK, had a chance to play with touch events and they seem to work just fine on my iPad.

Simply insert the following in the code with all the other addEventLIstener lines:

btnUp.addEventListener("touchstart",buttonPressUp,false);

btnUp.addEventListener("touchend",clearPress,false);

btnDn.addEventListener("touchstart",buttonPressDn,false);

btnDn.addEventListener("touchend",clearPress,false);

[Vico Eventuin]

Works like a charm.

Many thanks!

[Vico Eventuin]

Though the code is working fine, on my iPad the release of the button triggers the playhead to start again ;(

Any suggestions?

var timer = null;

var btnUp = document.getElementById("myButton");

var btnDn = document.getElementById("myButton2");

btnUp.addEventListener("mousedown", buttonPressUp, false);

btnUp.addEventListener("mouseup", clearPress, false);

btnDn.addEventListener("mousedown", buttonPressDn, false);

btnDn.addEventListener("mouseup", clearPress, false);

btnUp.addEventListener("touchstart", buttonPressUp, false);

btnUp.addEventListener("touchend", clearPress, false);

btnDn.addEventListener("touchstart", buttonPressDn, false);

btnDn.addEventListener("touchend", clearPress, false);

function clearPress() {

    clearInterval(timer);   

}

function buttonPressUp() { //prevents values higher than 99

    if (window.myVal < 99) {

        timer = setInterval(function () {

            window.myVal++;

            if (window.myVal > 98) {

                clearPress();

            }

        }, 100);

    }

}

function buttonPressDn() { //prevents values lower than 0

    if (window.myVal > 0) {

        timer = setInterval(function () {

            window.myVal--;

            if (window.myVal < 1) {

                clearPress();

            }

        }, 100);

    }

}

[chrismay_at_delta]

is the "Execute Javascript" command set in the "On Success" of the button?

The "Continue playing project" might be checked in the "On Success" options.

If so, try creating an advanced action with the same JS and set the On Success to that advanced action. This will eliminate the "Continue to play" option and if you do not have a pause set on the button, the script will run regardless if the movie is paused or playing and will not affect the playhead status of playing or paused. Meaning that is the playhead is playing and the user clicks the button, the playhead will continue to play, and if the playhead is paused, the playhead will remain paused after the user clicks the button.

[Vico Eventuin]

Execute Javascript is set On Enter of the page.

Continue to play is NOT checked.

There is a Pause set on the buttons.

There is NO action set on the ON SUCCES of the button.

There are more buttons on the slide that also have a Pause in their timing.

Problem is only present on mobile device not on PC.

It happens whenever the button is pressed and hold for more than one second.

example on:

http://test.vico-design.nl

[dan561]

You can place a "next" button on the page that will pause until it's clicked. Or add cp.Pause(); as the last line of each of the button press functions (before the last closing curly bracket). Or make sure that both buttons have a pause in their timing.

The main problem seems to be that there's nothing actually pausing the slide.

[chrismay_at_delta]

ahhhh, the press and hold is also know as the long tap

If you look in the Mobile Palette, you can see that if you have the Gesture Configuration on, that the long tap is enabled.

Long tap = pause/play movie.

Unchecking the Gesture Configuration will turn all of the gesture controls off. If you can live with that. then it is an easy solve, uncheck Gesture Configuration.

If you need to only disable the long tap, you will need to publish and then alter the CPM.js file.

[Vico Eventuin]

That did the job, many thanks.

Would also love to show a different image on Hold of the button than on release of the button, how would that be don in the above code?

Like img 1 is on the slide when entered and img 2 is shown on Hold of the button, img 1 will then be invisible.

Release of the btn will Hide im 2 and Show img again.

[chrismay_at_delta]

to disable the long tap, search for the following in the CPM.js file:

cp.m_gestureHandler.enabled&&cp.toggleMoviePlayPause

and replace with "

/*cp.m_gestureHandler.enabled&&cp.toggleMoviePlayPause*/

Save the CPM.js and the long tap will be disabled.

[chrismay_at_delta]

assuming your images are named img1 and img2 in the properties window.

on the buttonPressDn function add:

cp.hide("img1");

cp.show("img2");

function buttonPressUp() { //prevents values higher than 99

    if (window.myVal < 99) {

          cp.hide("img1");

          cp.show("img2");

        timer = setInterval(function () {

            window.myVal++;

            if (window.myVal > 98) {

                clearPress();

            }

        }, 100);

    }

}

And then do the opposite on the clearPress function.

[Vico Eventuin]

Thanks again, you helped me a lot!