Develop Reference

Toggling on off button does not update the function

Using cesium JS, I want to add a button that would use the cesium zoom/camera feature to go to a new point when created and that is using my "myFunction" but I want it to continuously update it's position until the button is clicked again to turn it off.
When someone clicks the button it should toggle the camera to the new points being made and will continue to do so until someone "turns it off" or rather clicks the button again.
I've tried doing this with the code below but when I click the button nothing happens, I have tried using a variable that will get turned either true/false when clicked, and within my other function it will loop the "myFunction" until the button is clicked again or "false" any suggestions?
document.getElementById("camButton").addEventListener("click", myFunction2);
var buttonState = false;
function myFunction2() {
if (buttonState == false) {
buttonState = true;
} else {
buttonState = false;
}
}
function myFunction() {
if (buttonState == false) {
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
payload["geometry"]["coordinates"][0],
payload["geometry"]["coordinates"][1],
5000000
)
});
}
}

Having trouble adding a pause function on javascript game

I am trying to figure out how when the page loads the game is "paused" and the user has to hit enter to play and when the user does so the game starts.
Here are the current keystates to control the player when the game is active. I feel like I'm almost there (correct me if I'm wrong), but I just can't get what makes the canvas "pause" when the page is loaded and how to make it "play" when the enter button is pushed.
keystate = {};
document.addEventListener('enter', function(evt){
keystate[evt.keyCode] = true;
});
document.addEventListener('keydown', function(evt){
keystate[evt.keyCode] = true;
});
document.addEventListener('keyup', function(evt){
delete keystate[evt.keyCode];
});

I have two ways,
One simple, but not so nice
One hard, can be nice
The first ay is just alerting something with comfirm(text).
Here is the code for that way :
var gameBrightness = 10;
function pause() {
var pause = confirm("You paused the game, click 'OK' to continue your game and the other button to go to options");
if (pause == false) { //Didn't click on OK
var options = confirm("Click on 'Ok' to not change brigthness, but the other one to change the brightness to a random value");
if (options == true) { //Clicked on OK
ReDopause();
return;
}
else { //Didn't click on OK
brightness = Math.floor(Math.random() * 20);
document.getElementById("brightness").innerHTML = brightness;
ReDopause();
return;
}
}
}
var ReDopause = function() {
pause();
}
<button onclick="pause()">Pause</button>
<span id="brightness">brigthness : 10</span>
The second way I havn't made but it is in each movements or timers add an if statment. Like this:
var pause = false;
setInerval(tick, 100);
function tick() {
if (pause == false) {
....
}
}
At the bginnning you should have a canvas which isn't visible which is the pause menu. Here gow you do the CSS for that:
#pause {
display: none;
...
}
When you pause set pause to true, set your main canvas to document.getElementById("mainCanvas").style.display = "none" this will make the canvas dissapear but still with all it's drawings. Then show the pause canvas like this : document.getElementById("mainCanvas").style.display = "initial". The when "Continue" is clicked: set pause to false and to the contrary of this.

Button to trigger seperate line of code HTML Javascript Soundjs

Okay, basically, I want to create a button that triggers a new javascript function. I want the button to click and stay clicked (then click again to toggle off).
My code (without button):
function playSound(target) {
//Play the sound: play (src, interrupt, delay, offset, loop, volume, pan)
var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_ANY, 0, 0, false, 1);
if (instance == null || instance.playState == createjs.Sound.PLAY_FAILED) { return; }
target.className = "gridBox1 active";
instance.addEventListener ("complete", function(instance) {
target.className = "gridBox1";
});
}
I want a clickable button to trigger a new set of sounds that loop, this is what I have come up with:
<button id="buttonEv" onclick="myFunction()">Evolve</button>
<script>
function myFunction() {
function playSound(target) {
//Play the sound: play (src, interrupt, delay, offset, loop, volume, pan)
var instance = createjs.Sound.play(1, {loop:2});
instance.on("loop", handleLoop);
if (instance == null || instance.playState == createjs.Sound.PLAY_FAILED) { return; }
target.className = "gridBox1 active";
instance.addEventListener ("complete", function(instance) {
target.className = "gridBox1";
});
}
}
$('#buttonEv').click(function(event){
if($(this).hasClass('active')){
$(this).removeClass('active')
} else {
$(this).addClass('active')
}
});
</script>
The button clicks and stays clicked, though not affecting the sounds
Make sense? Any ideas? Thanks!

Javascript onMouseDown function, testing when you have left clicked

setInterval(mouse, 20);
function mouse(){
if(onMouseDown == true){
//Code for when you are holding mouse down
}else{
//Code for when the mouse isn't being held
}
}
This is the basic idea for my code. When the left mouse button is being held down I want it to execute set code, then when the mouse is not down it to preform another task. How do I do this. Thank you :)

function detectLeftButton(evt) {
evt = evt || window.event;
var btn = evt.which || evt.button;
return (btn == 1);
}
document.onmousedown = function() {
if(detectLeftButton(this.event)) {
// Code when mouse is down
}
}
document.onmouseup = function() {
if(detectLeftButton(this.event)) {
// Code when mouse is not held
}
}
In the above code when the person presses his left mouse button down anywhere in the webpage, code will be run and when he presses it up, another set of code will be executed. Fiddle (updated).
Learn more here.
Hope that helps.

Use the mousedown and mouseup events along with setInterval/clearInterval
(function(){
var downTimer = null;
var upTimer = null;
function runWhileDown(){
//code to run while mouse is down
}
function runWhileUp(){
//code to run while mouse is up
}
document.addEventListener("mousedown",function(){
//Stop the runWhileUp code from running
if(upTimer) clearInterval(upTimer);
//make sure the previous interval is stopped
if(downTimer) clearInterval(downTimer);
//start the new timer
downTimer = setInterval(runWhileDown,20);
});
document.addEventListener("mouseup",function(){
//Stop the runWhileDown code from running
if(downTimer) clearInterval(downTimer);
//make sure the previous interval is stopped
if(upTimer) clearInterval(upTimer);
//start the new timer
upTimer = setInterval(runWhileUp,20);
});
//If you need the runWhileUp code to run at the start
upTimer = setInterval(runWhileUp,20);
})();
JSFiddle

Keydown effect, alert if keyup before effect finishes

My goal: Press and HOLD space key while an effect occurs (to simulate a fingerprint scan). If user releases key before effect finishes, I want to display a confirm message. The keydown part works fine and proceeds to function "process", but no error message is displayed on keyup if it is released before the effect finishes. This is what I have...
var active = false;
$(document).one("keydown", function(e) {
if ((e.keyCode == 32) && (active == false)) {
active = true;
$(".panel_1").slideDown(5000, function() {
active = false;
$(".panel_1").slideUp(2000, function() {process(); })
});
}
});
$(document).one("keyup",function(e) {
if ((e.keyCode == 32) && (active == true)) {
var r=confirm("Oops! You must HOLD down the space key until scan is complete. Press OK to try again, or Cancel to return to homepage.");
if (r==true) {
reset();
}
else {
window.location.replace("home.html");
}
}
});

Verify that you are releasing the key during the first slideDown animation. According to your code, once it starts to slide up your active gets set to false and then makes it so the keyup event will not trigger.
Also as a side note I'd recommend using triple = in JavaScript.

Your code seems to work here: http://jsfiddle.net/D52eq/ but note that the confirmation message occurs only if the space bar is released during the .slideDown() phase of the effect - you're setting active = false; before the .slideUp() call.
If you want the confirmation if the space bar is released before completion of the entire animation and process() call then try this:
$(document).one("keydown", function(e) {
if ((e.keyCode == 32) && (!active)) {
active = true;
$(".panel_1").slideDown(5000).slideUp(2000, function() {
process();
active = false;
})
}
});
Note that then you can just chain the .slideDown() and .slideUp(), you don't need to supply a callback function to .slideDown(). Also I've replaced active == false with !active.
Demo: http://jsfiddle.net/D52eq/1/