Skip to main content
Inspiring
August 14, 2018
Answered

JavaScript question

  • August 14, 2018
  • 5 replies
  • 3888 views

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!

    This topic has been closed for replies.
    Correct answer TLCMediaDesign

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

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

    5 replies

    Inspiring
    October 5, 2018

    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?

    Inspiring
    October 5, 2018

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

        }

    }

    Inspiring
    October 5, 2018

    Oops - the first if statement should read

    if(jsVal < 00){

    Sorry!

    chrismay_at_delta6226261
    Inspiring
    September 13, 2018

    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.

    Inspiring
    September 13, 2018

    Thanks again, you helped me a lot!

    chrismay_at_delta6226261
    Inspiring
    September 13, 2018

    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_delta6226261
    Inspiring
    September 13, 2018

    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.

    Inspiring
    September 13, 2018

    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.

    TLCMediaDesign
    Inspiring
    August 14, 2018

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

    }

    Inspiring
    August 14, 2018

    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