Highlighted

JavaScript question

Participant ,
Aug 14, 2018

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

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

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

Views

935

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

JavaScript question

Participant ,
Aug 14, 2018

Copy link to clipboard

Copied

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!

Adobe Community Professional
Correct answer by TLCMediaDesign | Adobe Community Professional

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

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

Views

936

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 14, 2018 0
Adobe Community Professional ,
Aug 14, 2018

Copy link to clipboard

Copied

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);

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2018 2
Participant ,
Aug 14, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 14, 2018 0
Participant ,
Aug 20, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
Adobe Community Professional ,
Aug 20, 2018

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
Participant ,
Aug 20, 2018

Copy link to clipboard

Copied

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 ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
Participant ,
Sep 03, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 03, 2018 0
Adobe Community Professional ,
Sep 04, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 04, 2018 0
Participant ,
Sep 04, 2018

Copy link to clipboard

Copied

Great! No negative numbers should be allowed.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 04, 2018 0
Engaged ,
Sep 04, 2018

Copy link to clipboard

Copied

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);

    }

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 04, 2018 2
Participant ,
Sep 04, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 04, 2018 0
Adobe Community Professional ,
Sep 05, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 05, 2018 0
Participant ,
Sep 05, 2018

Copy link to clipboard

Copied

Will try, thanks.

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 05, 2018 0
Engaged ,
Sep 05, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 05, 2018 0
Engaged ,
Sep 05, 2018

Copy link to clipboard

Copied

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);

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 05, 2018 2
Participant ,
Sep 05, 2018

Copy link to clipboard

Copied

Works like a charm.

Many thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 05, 2018 0
Participant ,
Sep 13, 2018

Copy link to clipboard

Copied

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);

    }

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Contributor ,
Sep 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Engaged ,
Sep 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Participant ,
Sep 13, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Contributor ,
Sep 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 1
Participant ,
Sep 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Contributor ,
Sep 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Contributor ,
Sep 13, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 2
Participant ,
Sep 13, 2018

Copy link to clipboard

Copied

Thanks again, you helped me a lot!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2018 0
Participant ,
Oct 05, 2018

Copy link to clipboard

Copied

One more challenge.

I would like the number (myVal) to always have 2 digits, so not 1, 2, 3 etc but 01, 02, 03 etc.

Any ideas?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2018 0
Engaged ,
Oct 05, 2018

Copy link to clipboard

Copied

Hmmm

You'll have to do the incrementing, then if the value is only a single digit, cast the value to a string before passing it back to Captivate. That'll need another variable in the js.

Something like this:

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

var jsVal = parseInt(window.myVal); //read the value of myVal from CP and cast it to an integer

    if (window.jsVal < 99) {

          cp.hide("img1");

          cp.show("img2");

        timer = setInterval(function () {

            jsVal++;

             if(jsVal < 10){

                    window.myVal =  "0" + jsVal.toString(); //cast jsVal to a string and append a zero in front

             }

             else {window.myVal = jsVal;

            }

            if (jsVal > 98) {

                clearPress();

            }

        }, 100);

    }

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2018 2
Engaged ,
Oct 05, 2018

Copy link to clipboard

Copied

Oops - the first if statement should read

if(jsVal < 00){

Sorry!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2018 0
Engaged ,
Oct 05, 2018

Copy link to clipboard

Copied

Don't know why the system isn't letting me edity my own comments.

Let's try that again:

if(jsVal < 99){

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2018 1
Most Valuable Participant ,
Oct 05, 2018

Copy link to clipboard

Copied

You can only edit when it is the last one in a thread.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 05, 2018 1
Participant ,
Oct 06, 2018

Copy link to clipboard

Copied

Thanks again, works like a charm!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2018 0