toggle class in jquery using if else statement
up vote
-1
down vote
favorite
I am working on a website in which I want to toggle class when boolean condition is true. I am using the following code in order to add toggle class:
xAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight);
The above code is working in a way that when this condition is true .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight x-axis-hello-world will
be added and vice-versa
Problem Statement:
I am wondering what changes I should make in the code above so that x-axis-hello-world should be added only when .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight
and 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight conditions are met.
javascript jquery toggle
asked Nov 22 at 17:33
john
1,8201667148
add a comment |
up vote
-1
down vote
favorite
I am working on a website in which I want to toggle class when boolean condition is true. I am using the following code in order to add toggle class:
xAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight);
The above code is working in a way that when this condition is true .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight x-axis-hello-world will
be added and vice-versa
Problem Statement:
I am wondering what changes I should make in the code above so that x-axis-hello-world should be added only when .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight
and 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight conditions are met.
javascript jquery toggle
asked Nov 22 at 17:33
john
1,8201667148
1
Have you triedxAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight && 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight);?
– Phiter
Nov 22 at 17:36
Please clarify: IsxAxisa jQuery object, likexAxis = $("someSelector")OR a JS element likexAxis = document.getElementByID("someID")?
– Louys Patrice Bessette
Nov 22 at 18:21
No xAxis is not a jQuery object. It is an HTML element.
– john
Nov 22 at 19:35
Ok.. A jQuery element. So why then you use plain JS against it?.classListis a JS property..toggle()is a jQuery method. And in your case, you should look for the.toggleClass()method.
– Louys Patrice Bessette
Nov 23 at 2:37
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I am working on a website in which I want to toggle class when boolean condition is true. I am using the following code in order to add toggle class:
xAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight);
The above code is working in a way that when this condition is true .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight x-axis-hello-world will
be added and vice-versa
Problem Statement:
I am wondering what changes I should make in the code above so that x-axis-hello-world should be added only when .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight
and 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight conditions are met.
javascript jquery toggle
asked Nov 22 at 17:33
john
1,8201667148
I am working on a website in which I want to toggle class when boolean condition is true. I am using the following code in order to add toggle class:
xAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight);
The above code is working in a way that when this condition is true .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight x-axis-hello-world will
be added and vice-versa
Problem Statement:
I am wondering what changes I should make in the code above so that x-axis-hello-world should be added only when .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight
and 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight conditions are met.
javascript jquery toggle
javascript jquery toggle
asked Nov 22 at 17:33
john
1,8201667148
asked Nov 22 at 17:33
john
1,8201667148
asked Nov 22 at 17:33
john
1,8201667148
asked Nov 22 at 17:33
john
1,8201667148
asked Nov 22 at 17:33
john
1,8201667148
1,8201667148
1
Have you triedxAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight && 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight);?
– Phiter
Nov 22 at 17:36
Please clarify: IsxAxisa jQuery object, likexAxis = $("someSelector")OR a JS element likexAxis = document.getElementByID("someID")?
– Louys Patrice Bessette
Nov 22 at 18:21
No xAxis is not a jQuery object. It is an HTML element.
– john
Nov 22 at 19:35
Ok.. A jQuery element. So why then you use plain JS against it?.classListis a JS property..toggle()is a jQuery method. And in your case, you should look for the.toggleClass()method.
– Louys Patrice Bessette
Nov 23 at 2:37
add a comment |
1
Have you triedxAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight && 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight);?
– Phiter
Nov 22 at 17:36
Please clarify: IsxAxisa jQuery object, likexAxis = $("someSelector")OR a JS element likexAxis = document.getElementByID("someID")?
– Louys Patrice Bessette
Nov 22 at 18:21
No xAxis is not a jQuery object. It is an HTML element.
– john
Nov 22 at 19:35
Ok.. A jQuery element. So why then you use plain JS against it?.classListis a JS property..toggle()is a jQuery method. And in your case, you should look for the.toggleClass()method.
– Louys Patrice Bessette
Nov 23 at 2:37
1
1
Have you tried
xAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight && 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight);?– Phiter
Nov 22 at 17:36
Have you tried
xAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight && 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight);?– Phiter
Nov 22 at 17:36
Please clarify: Is
xAxis a jQuery object, like xAxis = $("someSelector") OR a JS element like xAxis = document.getElementByID("someID") ?– Louys Patrice Bessette
Nov 22 at 18:21
Please clarify: Is
xAxis a jQuery object, like xAxis = $("someSelector") OR a JS element like xAxis = document.getElementByID("someID") ?– Louys Patrice Bessette
Nov 22 at 18:21
No xAxis is not a jQuery object. It is an HTML element.
– john
Nov 22 at 19:35
No xAxis is not a jQuery object. It is an HTML element.
– john
Nov 22 at 19:35
Ok.. A jQuery element. So why then you use plain JS against it?
.classList is a JS property. .toggle() is a jQuery method. And in your case, you should look for the .toggleClass() method.– Louys Patrice Bessette
Nov 23 at 2:37
Ok.. A jQuery element. So why then you use plain JS against it?
.classList is a JS property. .toggle() is a jQuery method. And in your case, you should look for the .toggleClass() method.– Louys Patrice Bessette
Nov 23 at 2:37
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435922%2ftoggle-class-in-jquery-using-if-else-statement%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435922%2ftoggle-class-in-jquery-using-if-else-statement%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Have you tried
xAxis.classList.toggle('x-axis-hello-world', .20 <= xAxis.firstElementChild.offsetHeight / window.innerHeight && 40>=xAxis.firstElementChild.offsetHeight / window.innerHeight);?– Phiter
Nov 22 at 17:36
Please clarify: Is
xAxisa jQuery object, likexAxis = $("someSelector")OR a JS element likexAxis = document.getElementByID("someID")?– Louys Patrice Bessette
Nov 22 at 18:21
No xAxis is not a jQuery object. It is an HTML element.
– john
Nov 22 at 19:35
Ok.. A jQuery element. So why then you use plain JS against it?
.classListis a JS property..toggle()is a jQuery method. And in your case, you should look for the.toggleClass()method.– Louys Patrice Bessette
Nov 23 at 2:37