I wrote a javascript code which if you are browsing with Firefox and if the window is resized to pop up an alert box. However, my knowledge is not enough to see where is the mistake in the code I wrote. If someone can help me I will be really grateful. Thanks in advance.
$('FirefoxChecker').ready(function() {
if (navigator.userAgent.indexOf("Firefox") > 0) && (window.onresize){
alert("Some text here");
};
});
Incorrectly formatting your conditional statement
$('FirefoxChecker').ready(function() {
if (navigator.userAgent.indexOf("Firefox") > 0 && window.onresize){
alert("Some text here");
}//; no semicolon
});
You can have as many conditions as you want in one statement for example
if( condition1 && conditio2 || condition3) { }
Your initial statement was a disconnection between eachother.
if( condition1) && (condition2) {} //is incorrect of course
YET! We can do something like this and what it does is clean the statement up or make the statement more accurate.
//group1 //group2
if( (condition1 && condition2) || (condition3 && condition1) )
1 2 2 3 3 1
I've added numbers below and they correspond to each parenthesis that it belongs to.
As others have said window.onresize is not a testable property, but you get that and hopefully can move forward on that. We can test onresize though like so
if("onresize" in window) {}
window.onresize is an event not property.
Edit: As mentioned by EasyBB in comments, onresize is a property of the window but its in initial value is null unless we define one. It expects a value to be an eventHandler which will be invoked when resize event takes place.
Try this:
window.onresize = function() {
if (navigator.userAgent.indexOf("Firefox") > 0) {
alert("Some text here");
}
};
To invoke something when resize is done, try this:
var timeOut;
window.onresize = function() {
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (navigator.userAgent.indexOf("Firefox") > 0) {
alert("Some text here");
}
}, 200);
};
Related
So the problem is... It doesn't work. And more correctly... how can i better execute those nested ifs?
document.body.onkeypress = function(e) {
e = e || window.event;
if (e.keyCode == '38') { //arrow up
}
if (e.keyCode == '40') { //arrow down
if (top == 1) {
window.setTimeout(show2, 100);
alert('2 layer works');
}
if (top == 2) {
window.setTimeout(show3, 100);
}
if (top == 3) {
window.setTimeout(show4, 100);
}
}
}
I've tried everything. Please help me...
Start with this example. It shows how to hook up the keydown event to the document body correctly. From here you should be able to modify it to add the additional logic you have in your example. Be careful to make sure external variables like top are set correctly.
function handleKeyDown(e) {
console.log('got keyDown event. e.keyCode =', e.keyCode)
}
document.body.addEventListener("keydown", handleKeyDown, false);
<p>Press a key</p>
Where do you change the top value...? Also the first if statement, if its blank like you showed us here, will throw in an error, or at least won't do anything. Why do you say e = e || window.event ..? Also, this might be just me, but don't call the functions like that. Better ( again, at least in my opinion ) to do:
document.body.addEventListener("keypress", e => {
// Get rid of that e = e || window.event, I have no clue why you'd do that.
if (e.keyCode == 38) {
// Actually give it some parameters to do here, leaving it empty will either
// throw an error or in "best" case won't do anything.
}
if (e.keyCode == 40) {
// Again, you said you did var top = 1. It will work here.
if (top == 1) {
window.setTimeout(show2, 100);
alert('2 layer works');
}
// But you dont INCREMENT the top variable anywhere, so this wont work.
if (top == 2) {
window.setTimeout(show3, 100);
}
// But you dont INCREMENT the top variable anywhere, so this wont work.
if (top == 3) {
window.setTimeout(show4, 100);
}
}
})
This question is really, really badly formatted and you haven't provided much information. Show us the error you get, use console.log all the time, it's your best friend.
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 this little piece of code that is supposed to do something if some if conditions are met. It does not work as it should and I could not figure out why. The code is a bit lengthy please bear with me.Any kind of help is really appreciated!
First I have a button in my html, when it is click it will trigger function
function coverCard() {
if (2 > 1) {
GodAn();
} else {
if (bbbbb === 0) {
do something
} else {
do sth
}
}
}
This function will lead to GodAn function shown as follow
function GodAn() {
var a = 1
if (a < 2) {
document.getElementById("coverCard").onclick = Alert.render("do option 1 please")
bbbbb = 0;
} else {
document.getElementById("coverCard").onclick = Alert.render("do option 2 please")
bbbbb = 2;
}
}
Finally following is the function defining what is shown in the dialog box and what will happen when its ok button is clicked
function CustomAlert() {
this.render = function (dialog) {
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">ok</button>';
}
if (bbbbb === 0) {
this.ok = function () {
alert("do option1")
console.log(bbbbb)
}
}
else this.ok = function () {
alert("do option 2")
console.log(bbbbb)
}
}
var Alert = new CustomAlert();
What I expect to happen is when the html button is clicked, the dialog box will show "do option 1 please", (which it always does) and then alert "do option1". However sometimes in the CustomAlert function the "do option 2" alert will be wrongly triggered, even when the global var bbbbb is reset to 0. (console.log also confirms bbbbb is 0).
I have uploaded the original html file and the link is here:
https://wetransfer.com/downloads/313ba63c7a101f917cbc9e6f9a4c5ade20170226122032/43cedb
This really drives me crazy so somebody please shed some light here please?
Here is the jsFiddle link to my code
https://jsfiddle.net/5bn0ux5k/
It seems to me that whether alert 1 or alert 2 is triggered is a pure random event while it is expectedly set to just alert 1(option 1)
A few issues:
You assign a new value to the button onclick handler, ... when you click it. This seems wrong, and all the more so because you do not assign it a function:
document.getElementById("coverCard").onclick = Alert.render("do option 1 please")
What happens here is that the render method is executed immediately. This is all very confusing, because it looks like you wanted to do this:
document.getElementById("coverCard").onclick = function () {
Alert.render("do option 1 please");
};
... which would make the render method execute on the next click, but then in your description you say you actually do want the render method to execute upon the first click, not on the next. So in that latter case, you should just execute the render method, and not assign anything to the onclick method:
Alert.render("do option 1 please");
Doing the mix of both is wrong: the render method does not return a function, so its result should not be assigned to an onclick property. So I'll assume you want just to execute render.
The second issue is that you decide the assignment for this.ok at the moment the page loads, i.e. when new CustomAlert() is executed:
if (bbbbb === 0) {
this.ok = function() {
alert("do option1")
console.log(bbbbb)
}
} else
this.ok = function() {
alert("do option 2")
console.log(bbbbb)
}
Your decision is based on the value of b, which at that moment is random. Later, when you click the button, you change the value of b to zero, but that does not influence that earlier decision any more: this.ok will not magically change because of setting b to zero.
You can correct this, by putting the condition on b inside the this.ok function, like this:
this.ok = function() {
if (bbbbb === 0) {
alert("do option1")
} else {
alert("do option 2")
}
console.log(bbbbb)
}
Now you will have the correct option mentioned in the alert.
In PHP, the different if-elseif-scenarios rule each other out, right? I am a little confused, I don't seem to figure out why this is not the case in JavaScript here. Can anybody tell me how to simplify this?
(This statement is connected to radio-buttons and is supposed to style the selected radio button differently. However, when I do not include all the remove-parts, clicking one and then another one leaves me with both of them styled as "selected")
$("#item-upload-form input").on("change", function() {
var hello = $("input[name='category_select']:checked", "#item-upload-form").val();
if(hello == 1){
$("#handy").addClass("selected");
$("#pc").removeClass("selected");
$("#notebook").removeClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
$("#handy").removeClass("selected");
$("#notebook").removeClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
$("#pc").removeClass("selected");
$("#handy").removeClass("selected");
}
});
I think #Katana314 had the right answer to the question you're asking. Javascript isn't refreshing the page on each call so the class will stay on the element until you remove it. Might be a little cleaner this way...
$("#item-upload-form input").on("change", function() {
var hello = $("input[name='category_select']:checked", "#item-upload-form").val();
// find any element that has the selected class and remove it
$('.selected').removeClass('selected');
// then add it to which ever element needs it.
if(hello == 1){
$("#handy").addClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
}
});
Because you're using two selectors and checking hello with the value will only work for those whose both value returns the same value. If both selector value results in different values then your condition never match.
So, it will only match if both values are the same.
Let's keep only calls to addClass(). The code would look like this:
if(hello == 1){
$("#handy").addClass("selected");
} else if (hello == 2){
$("#pc").addClass("selected");
} else if (hello == 3){
$("#notebook").addClass("selected");
}
What happens when you click on radio buttons?
R: Each time it will run only ONE branch. Successive clicks will only addClass to current element, and maintain classes of previous elements.
Why not let jQuery do all of the work for you - this way you can add/remove selections without updating your code:
$("#item-upload-form input").on("change", function (ele) {
$("#item-upload-form input").each(function( ) {
if ($(this).prop('checked')){
$(this).addClass("selected")
} else{
$(this).removeClass("selected") ;
}
});
});
To answer your question, yes, if-else-blocks will stop evaluating if a match is found.
Suggestion 1:
Try using === instead of ==.
=== checks both if the value and type are the same.
== 1 will pass as true for many things, including '1' == 1 and true == 1. I don't know what hello actually is, but you might be getting a false positive.
Suggestion 2:
Here is a revised code suggestion (instead of if-else blocks)
$("#handy").toggleClass("selected", (hello === 1));
$("#pc").toggleClass("selected", (hello === 2));
$("#notebook").toggleClass("selected", (hello === 3));
I want to do is put a character and length restriction in an input using this rules:
A combination of at least ten numbers, letters and punctuation marks
(like ! and &)
and if the user didnt complete the rules the input value will be back to empty again.
My problem is I'm still a beginner and my current code wont work as i wanted. Can anyone help me with this please.
Current output: http://jsfiddle.net/5kcsn/271/
Script:
$(document).ready(function () {
$('#example').on('blur', function () {
$('#example').change(inputVerify);
inputVerify()
})
$('#example').on('keydown', function () {
$('#example').change(inputVerify);
inputVerify()
})
$('#example').change(inputVerify);
function inputVerify(value) {
return /^(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{10,20}$/.test(value) && /[a-z]/.test(value) && /\d/.test(value)
};
});
I don't want to tell you "how to do it better in general", but what about giving live feedback instead of reverting a bad entry? This way the user can a) see as soon as it is correct, b) correct his former entry:
$("#example").on('keydown',function(){
if(!inputVerify($("#example").val())){
$("#example").css("border","1px solid red");
} else {
$("#example").css("border","1px solid black");
}
});
function inputVerify(value){
return /^(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{10,20}$/.test(value)
&& /[a-z]/.test(value)
&& /\d/.test(value)
};
You should really do this only on blur, it should look something like this:
$(document).ready(function(){
$('#example').on('blur', function(){
if( !inputVerify() ) {
$(this).val('');
}
});
});
function inputVerify(value){
return /^(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{10,20}$/.test(value)
&& /[a-z]/.test(value)
&& /\d/.test(value)
};
You see, your inputVerify function returns true or false and you would have to remove the input yourself by $(this).val('');.
The jsFiddle: http://jsfiddle.net/5kcsn/272/
Please note that I have not tested your regex, as I am not too familiar with them, yours seem to work though.
Try this, note I did not check your regular expression:
$(document).ready(function () {
$('#example').keydown(inputVerify);
function inputVerify(event) {
var value = $(this).val();
if (!(/^(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{10,20}$/.test(value)
&& /[a-z]/.test(value)
&& /\d/.test(value))) {
$(this).val('');
}
};
});
Link to JSFiddle
The function inputVerify catches the event passed by the keydown handler and uses the $(this) which refers to the element the event is triggered on to get the value of the input.
And then, if the regex tests fail, empty the input.