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!
Sorry, I read it as it needs to only work once.
Remove btn.removeEventListener("mousedown",buttonPress,false) from the clearPress function.
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);
}
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
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
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.
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 ?
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!
Copy link to clipboard
Copied
I'll have a look at it later, busy right now. Would it be allowed to go negative?
Copy link to clipboard
Copied
Great! No negative numbers should be allowed.
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);
}
}
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?
Copy link to clipboard
Copied
If you include the fastclick javascript library it should work. It really helps everything on mobile.
Copy link to clipboard
Copied
Will try, thanks.
I guess the problem is that "mousedown" and "mouseup" don't work with mobile.
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.
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);
Copy link to clipboard
Copied
Works like a charm.
Many thanks!
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);
}
}
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.
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:
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.
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.
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.
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.
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.
Copy link to clipboard
Copied
Thanks again, you helped me a lot!