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
)
});
}
}
Related
I have an input and a clear button. If the user type something in the input field and blur it, change() will be trigger and do something. But if I want to click clear button and trigger click(), change() will still be triggered. How do I solve this?
I tried this, but it doesn't work. var clear will never be true.
$("#inputid").change(function() {
var clear = false;
$("#clearbtn").click(function() {
// if clear button is clicked, do something
clear = true;
});
if (clear) {
return;
}
// if clear button is not clicked, do something else
...
this is quite tricky
the problem is onchange event is called before the clear button click event is called
to overcome this you can introduce a timer in the onchange event so that it waits for user's immediate action
like this:
$(document).ready(function(){
var clear = false;
var isTimerOn = false;
function HandleChange(){
if(clear){
// if clear button is clicked, do something
$("#inputid").val("");
}else{
// if clear button is not clicked, do something else
alert("do something else");
}
clear = false;
isTimerOn = false;
}
$("#inputid").change(function() {
isTimerOn = true;
setTimeout(HandleChange, 80);
});
$("#clearbtn").click(function() {
clear = true;
if(!isTimerOn){
HandleChange();
}
});
});
here's fiddle: https://jsfiddle.net/6d9r1qsc/
You should move the click event outside of the change event.
$("#clearbtn").click(function() {
// if clear button is clicked, do something
$("#inputid").val("");
});
Show Confirmation Box when user leaving tab/ or Browser close like "continue" or "exit".
I tried window.onUnload event also but not working.
But this event called only once. and second time round it does not execute the function
var areYouReallySure = false;
var internalLink = false;
var allowPrompt = true;
function areYouSure() {
if (allowPrompt) {
if (!areYouReallySure && !internalLink && true) {
areYouReallySure = true;
var ConfMsg = "click Cancel"
return ConfMsg;
}
} else {
allowPrompt = true;
}
//}
}
//var allowPrompt = true;
window.onbeforeunload = areYouSure;
How to code for reload and cancel button ,which come on prompt?
onbeforeunload function will call when you try to close the tab not on the button click.
In your code as you are using this areYouReallySure variable. So first is false so it is working but after you have set as true inside of if condition. That's why it is not working because in second time is not return anything.
window.onbeforeunload = funcRef
funcRef is a reference to a function or a function expression.
The function should assign a string value to the returnValue property of the Event object and return the same string.
The WindowEventHandlers.onbeforeunload event handler property contains the code executed when the beforeunload is sent. This event fires when a window is about to unload its resources. The document is still visible and the event is still cancelable.
CODE SNIPPET
//This function will call on before close tab
function areYouSure() {
return "You have made changes, are you sure you would like to navigate away from the page?"
}
window.onbeforeunload = areYouSure;
Bootstrap Warnings Image I have two different types of bootstraps alerts (warning and danger). Danger alerts are always suppose to be on the page no matter what. Warning alerts happen when user clicks on the dropdown list carriers it displays a bootstrap warning notification. User has to click on 'x' for it to close. I need it to work when user click anywhere on the page or by clicking on the 'x'.
HomeController.cs
case "Carrier":
var carrierid = (from foo in db.Carriers
where foo.ID == warningid
select foo.WarningID).Single();
if (carrierid != null)
{
warning = (from warnings in db.Warnings
where warnings.IsActive == true && warnings.Id == carrierid
select warnings.WarningBody).SingleOrDefault();
if (warning != null)
{
warning = ("<div class=\"alert alert-warning alert-dismissible\" id=\"myWarning\" role=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">×</span></button><strong>" +
warning + "</strong></div>");
}
else
{
warning = "";
}
}
else
{
warning = "";
}
return Json(warning, JsonRequestBehavior.AllowGet);
default:
break;
warningwriter.js
//// warning display script takes a value of warningid and warningcaller
$(document).ready(function () {
var warningid = 0;
var warningcaller = "Universal";
loadWarnings(warningid, warningcaller);
});
$('#Phones').change(function () {
var warningid = $(this).val();
var warningcaller = "Phone";
loadWarnings(warningid, warningcaller);})
$('#Carriers').change(function () {
var warningid = $(this).val();
var warningcaller = "Carrier";
loadWarnings(warningid, warningcaller);})
function loadWarnings(warningid, warningcaller) {
$.getJSON("../Home/LoadWarnings", { warningID: warningid, warningCaller: warningcaller },
function (warning) {
var select = $('#warnings');
select.append(warning);
});
};
As Martin suggested, it's something you need to do in javascript. I haven't tested this, but it would be something like:
$(document).click(function (event) {
$(".alert").hide();
});
This is basically, clicking anywhere on the page will hide any displayed alert.
Since you have two different types of bootstraps alerts (danger and warning). You have to use ".alert-warning" because that is the one you want to get rid of when user did a mouse click anywhere on page. ".alert" is all of the bootstraps alerts, however, if you need to get rid of a certain type you can call the contextual classes(e.g., .alert-success, .alert-info, .alert-warning, and/or .alert-danger. https://v4-alpha.getbootstrap.com/components/alerts/
$(document).click(function (event) {
$(".alert-warning").hide();
});
$(document).ready(function () {
$("#myWarning").click(function () {
$(".alert").alert("close");
});
});
By doing this, u are making two things wrong:
You are binding the click event to an element, that possibly
doesnt exist when the page is loaded.
You are binding the click
event to a restricted element. This means that the alert wont be
closed when u click anywhere on the page. In this case, only clicks on #myWarning will close the alert.
Finally, you should use what #Bryan already posted :)
Edit:
Assuming that u have a set of alerts that u always want to close on page load, add to this elements a way to identify them, for example a class "close-on-screenclick"
$(document).click(function () {
$(".close-on-screenclick.alert").alert("close");
});
.This should close those elements whenever a click is made on the screen
I'm having an issue trying to hide a button I've created with p5.js:
var quit_button;
var pause = false;
function keyPressed() {
if (keyCode == '80') { // If p is pressed on the keyboard
if (pause === true) {
quit_button.hide()
pause = false;
} else {
pause = true;
}
}
}
function restart() {
quit_button.hide() // This isn't working
pause = false;
setup()
}
function setup() { //Start-up screen
createCanvas(600, 400);
}
function draw() {
background('#fae'); //This creates a new canvas
if (pause === true) {
quit_button = createButton('quit')
quit_button.position(300,200)
quit_button.mousePressed(restart)
text("Game has been paused. Press P to resume.", 100, 100)
} else {
}
}
When I run the code and press p to pause my snake game, the game pauses (as expected). However, if I press p to unpause or if I click 'quit', the quit button is still there.
If the game is paused, you're creating a new button every single frame. That's 60 buttons per second. So you have a bunch of buttons just sitting on top of each other. To see what I mean, right-click your button and click inspect element and look at all the buttons on your page.
So you need to make sure you only ever create one button. You can do this by checking whether quit_button has already been initialized, and if it has then skip the creation step:
if(!quit_button){
quit_button = createButton('quit')
}
You could also move this creation code to the beginning and then have it hidden by default.
I need to change the back button functionality of my phonegap project, which I've succeeded in doing without any problem. The only issue now, is that I need to further change the functionality based on if the user has a certain field selected.
Basically, if the user has clicked in a field with the id of "date-selector1", I need to completely disable the back button.
I was attempting to use document.activeElement, but it only returns the type of the element (input in this case), but I still want the functionality to work when they are in a general input, but not when they are in an input of a specific id.
EDIT
I tried all of the suggestions below, and have ended up with the following code, but still no success.
function pluginDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onBackKeyDown() {
var sElement = document.activeElement;
var isBadElement = false;
var eList = ['procedure-date', 'immunization-date', 'lab-test-done', 'condition-onset', 'condition-resolution', 'medication-start-date', 'medication-stop-date', 'reaction-date'];
console.log("[[ACTIVE ELEMENT: --> " + document.activeElement + "]]");
for (var i = 0;i < eList.length - 1;i++) {
if (sElement == $(eList[i])[0]) {
isBadElement = true;
}
}
if (isBadElement) {
console.log('Back button not allowed here');
} else if ($.mobile.activePage.is('#main') || $.mobile.activePage.is('#family') || $.mobile.activePage.is('#login')) {
navigator.app.exitApp();
} else {
navigator.app.backHistory();
}
}
if you're listening for the back button you can add this if statement:
if (document.activeElement == $("#date-selector1")[0]) {
/*disable button here, return false etc...*/
}
or even better (Thanks to Jonathan Sampson)
if (document.activeElement.id === "date-selector1") {
/*disable button here, return false etc...*/
}
You can have a flag set when a user clicks on a field or you can have a click event (or any other type of event) when a user clicks on the field that should disable the back button.
From the documentation it looks like for the specific page that the backbuton is conditional on you can drop back-btn=true removing that back button.
http://jquerymobile.com/test/docs/toolbars/docs-headers.html
If you need complex conditional functionality you can just create your own button in the header or footer, style it using jquery-mobile widgets and implement your own click functionality.