I have a problem with the delay() of jquery. I'm using an if, else if condition with a variable:
var myvar = false;
function OpenAnimation(Clicked) {
if (myvar == true) {
$(Clicked).removeClass('open_peak');
myvar = false;
} else if (Clicked == 'an ID') {
$(Clicked).delay(500).queue(function () { $(this).addClass('open_peak') });
myvar = true;
}
The function is working fine with each ID passed in it. BUT the second time I run the function for an ID that already had and "lost" .open_peak (which is OnClick by the way), the class .open_peak does not apply to that element.
So when I open a window it goes:
} else if (Clicked == 'an ID') {
$(Clicked).delay(500).queue(function () { $(this).addClass('open_peak') });
myvar = true; //which tells me that a window(element) is indeed open
}
And when I close it:
if (myvar == true) {
$(Clicked).removeClass('open_peak');
myvar = false;//No window is opened
}
I have a lot more codes in there but it's .open_peak that isn't applying.
Here is a JSFiddle where you can see the issue: http://jsfiddle.net/at3eyLoL/
From the jQuery docs:
Note that when adding a function with .queue(), we should ensure that .dequeue() is eventually called so that the next function in line executes.
Add $( this ).dequeue(); in the function that is called after the delay.
Related
I have used a plugin "isInViewport js" which lets you know when an element is in viewport and lets you do something when that happens.
So I have written a counting function which is a number counter function. This executes when an element earn is in viewport.
But this counting function starts executing every time the element comes into viewport. I want this function to execute not more than once.
This is the code I had written which runs fine but not as I expect:
$('.earn').on('inview', function (event, visible) {
console.log('inview');
if (visible == true) {
console.log('inview count');
counting();
} else {
$('#counter').text(0);
$('#counter2').text(0+"$");
}
});
The pusedocode for what I am looking for is:
if(count of function == 0){
executeFunction();
}
else{
}
Could someone please provide a solution for this through javascript or jquery?
If you just need counting to run once, you can do something like this in your inview handler.
if (visible == true) {
console.log('inview count');
if (!this.is_counted) { // 'this' should refer to your element.earn
counting();
this.is_counted = true;
}
}
I have a flip toggle button().I am writing a function on change of toggle button,on change I am declaring js confirm box ,if confirms true the button remains in changed state,else it will revert in its previous state.My issue is the function is getting iterating(looping).Please suggest
To me it looks quite ok. Maybe you just forgot to encapsulate your code in $(document).ready - this is necessary because otherwise your Javascript function will be loaded before the HTML DOM has been loaded - so your function will fail to access the DOM elements.
$(document).ready(function() {
$("#btn").on("change", function() {
var txt;
var btnStatus = $("#btn").val();
console.log("btnstataus>>>>>" + btnStatus);
var r = confirm("Are you sure to change?");
if (r == true) {
if (btnStatus == "on") {
$("#btn").val("on");
} else {
$("#btn").val("off");
}
} else {
if (btnStatus == "on") {
$("#btn").val("off");
} else {
$("#btn").val("on");
}
}
});
});
Here is a working sample of your code:
https://plnkr.co/edit/AdzcN04F1fsLe9xw454j?p=preview
I am looking to fix my function to work, whenever the element enabled. at present it's not working..
here is my try:
var x = function () {
input = $('#username');
if (input.prop('disabled')) {
console.log('i am enabled'); // how to trigger this?
}
}
x();
$('#enable').on('click', function(){
$('#username').removeAttr('disabled');
})
Live Demo
Note: my App always remove the attribute disabled
I have created a fiddle (modified your fiddle) Hope this is the solution you require
fiddle
Code Snippet:
if (typeof attr !== 'undefined' && attr !== false) {
console.log('i am disabled'); // how to trigger this?
}
I'm trying to change the text of a button using jquery before calling a javascript interface method on android. But this statement does not get executed. Here is the code.
$("#send_btn").click(function() {
if(sendto_number_flag == 1 && sendto_msg_flag ==1 ) {
$(this).html("Sending...");
//above statement gets executed after the Java.sendSMS gets executed.
//I have tried with other statements like .addClass() .hide(), nothing works
var output = Java.sendSMS($("#sendto_number").val(), $("#sendto_msg").val());
//above statement executes fine and returns valid data
if(output == "true") {
$(this).html("Sent Successfully");
}
else if(output == "Network Error"){
$(this).html("Check Connection and Retry");
}
else {
$(this).html("Check Details and Retry");
}
}
});
HTML Tag
<button type="button" class="button button_red" id="send_btn" value="Send">Send</button>
Try adding some delay for java.sendSMS call. Something like this.
$("#send_btn").click(function() {
if(sendto_number_flag == 1 && sendto_msg_flag ==1 ) {
$(this).html("Sending...");
//above statement gets executed after the Java.sendSMS gets executed.
//I have tried with other statements like .addClass() .hide(), nothing works
var Variables = {};
Variables.$obj = $(this);
Variables.ResizeTimer = setTimeout(
function(){
var output = Java.sendSMS($("#sendto_number").val(), $("#sendto_msg").val());
//above statement executes fine and returns valid data
if(output == "true") {
$(Variables.$obj).html("Sent Successfully");
}
else if(output == "Network Error"){
$(Variables.$obj).html("Check Connection and Retry");
}
else {
$(Variables.$obj).html("Check Details and Retry");
}
},1000);
}
});
I have a problem; for some reason, my function is being called at the start of the webapplication while the page is loading.
My code is as follows
function validateName(element) {
var len = element.value.length;
//checks if the code is than 6 characters
if (len == 0) {
element.style.backgroundColor="red";
if (element.id == "firstname")
{
document.getElementById('firstNameError').style.display = "block";
}
else if (element.id == "lastname") {
document.getElementById('lastNameError').style.display = "block";
}
return true;
} //if == 0
else {
element.style.backgroundColor="green";
if (element.id == "firstname")
{
document.getElementById('firstNameError').style.display = "none";
}
else if (element.id == "lastname") {
document.getElementById('lastNameError').style.display = "none";
}
return false;
} // if != 0
}
The logic of this function is to validate the text boxes where the user enters their name. Basically,the problem i am facing is as soon as I open up my web page, the text boxes are red, and say 'Your first name cannot be blank!' (which is the firstNameError). Then, once I enter the text in my text box, it doesn't change, it still stays red, and displays the error.
This is how i am calling the function:
function init() {
var firstName = initToolTip("firstname", "firstnameTip");
var lastName = initToolTip("lastname", "lastnameTip");
var promoCode = initToolTip("promocode", "promocodeTip");
//opens the TOS window when you click 'terms and conditions' link
document.getElementById("clickedTOS").onclick = function() { sAlert(document.getElementById("TOS").innerHTML) };
//checks the length of the promo code
promoCode.onblur = validatePromoCode(promoCode);
//checks the validity of a name (is not blank)
firstName.onblur = validateName(firstName);
lastName.onblur = validateName(lastName);
//document.getElementById('submitButton').onmousedown = validateForm();
}
I don't understand why it's being called as soon as the page loads, since it's set, to be called onblur.
can anyone suggest ways to fix this?
You need to pass function references to onblur, not the result of immediately calling a function. Change to this:
function init() {
var firstName = initToolTip("firstname", "firstnameTip");
var lastName = initToolTip("lastname", "lastnameTip");
var promoCode = initToolTip("promocode", "promocodeTip");
//opens the TOS window when you click 'terms and conditions' link
document.getElementById("clickedTOS").onclick = function() { sAlert(document.getElementById("TOS").innerHTML) };
//checks the length of the promo code
promoCode.onblur = function() {validatePromoCode(promoCode);};
//checks the validity of a name (is not blank)
firstName.onblur = function() {validateName(firstName);};
lastName.onblur = function() {validateName(lastName);{;
//document.getElementById('submitButton').onmousedown = validateForm();
}
This changes each onblur assignment to take an anonymous function reference that will be executed later when the onblur event happens, not immediately like your current code was doing.
You're not passing the function to onblur in init; you are passing the result of the function.
See the following example:
var Afuntion=function(){
console.log("hello from function");
return 22;
}
Element.onblur=Afunction("something");//Element.onblur is now 22 and
// "hello from function" is logged
Element.onblur=Afunction; //now onblur has a reference to the function
Element.onblur();//this will log "hello from function" and return 22
Youre not using a library like jQuery to make attaching/adding event listeners easy so it's a bit of a pain to set the event listener using pure JS and read the event in the function. There must be some info on SO how to do this already anyway
In your case you could try this:
promoCode.onblur = function(){ validatePromoCode.call(promoCode,promCode);};