Just want to understand a principle of JavaScript, I'm a bit new to this.
I'm adding some styling to some element which are slides which I'm scrolling through.
The "current" div have a transform: none applied, the two others get styled depending on where I am on the slider.
I'm using this code which is working fine.
el.style.transform = i === e.current ? 'none' : i > e.current ? 'translateX(100%)' : 'translateX(-100%)'
My question is how do I add / toggle a class to the current el, and remove it back when it's not the current anymore.
I've tried some couple options using the same principle but can't find the right way to achieve it.
el.classList = i === e.current.toggle('classname') : i > ? e.current.toggle('classname')
el.classList.toggle() = i === e.current ? 'active' : i > e.current ? 'prev' : 'next'
Can somebody give me a heads up on how to achieve what i want to do? I've tried to go through some others post on Stack Overflow and to look on element.classList docs everywhere i could find it, but I'm stuck at this point and JS knowledge is not my strong point.
Thanks!
toggle takes the class name e.g. el.classList.toggle('classname'). You don't pass a variable to a function like this el.classList.toggle() = 'classname'. But you might be better off calling add or remove depending on if the item is the current one since you also need to ensure the other classes aren't still there.
el.classList[i === e.current ? 'add' : 'remove']('active');
However since you also want prev and next probably best not to try and be too clever with ternaries and make it readable:
if (i > e.current) {
el.classList.remove('current', 'prev');
el.classList.add('next');
} else if (i < e.current) {
el.classList.remove('current', 'next');
el.classList.add('prev');
} else {
el.classList.remove('prev', 'next');
el.classList.add('current');
}
If you aren't worried about overwriting other classes you could simplify this using className as it overwrites any existing classes:
if (i > e.current) {
el.className = 'next';
} else if (i < e.current) {
el.className = 'prev';
} else {
el.className = 'current';
}
Related
I read Jquery: How to check if the element has certain css class/style and have got this working -
if ($(".box").css('display') == 'block')
{
console.log("message 2 - Div with box class exists and css Block exists")
}
I read how to create jquery slide left and right toggle and got this working -
$(".box").animate({width: "toggle"});
I can't seem to combine the two above together though. These two attempts failed -
// ($(".box").css('display') == 'block').animate({width: "toggle"});
// ($(".box").css('display') == 'block').animate({width: "toggle"});
var datebox = ($(".box").css('display') == 'block')
datebox.animate({width: "toggle"})
datebox.animate({width: "toggle"})
Update 1
I tried Cucunber's suggestion and got this error -
Uncaught TypeError: ".box".each is not a function
Update 2
I solved the problem highlighted in Update 1 by adding $ to ('.box'), Cucunber updated his answer below based on the issue I faced.
Update 3
I tinkered with Cucunber's solution and eventually solved my problem with this code.
$(".box" ).each(function( index ) {
if ($(this).css('display') == 'block' ) {
console.log( index + ": " + $( this ) );
}
})
The sentence '$('.box').css('display') == 'block' returns boolean statement. If you know, .animate method should be used with the html element (selector). Try to use something like this:
'$('.box').css('display') == 'block' && $('.box').animate({width: 'toggle'})
combine it with '.each()' and the final result will be:
$('.box').each(function(){ $(this).css('display') == 'block' && $(this).animate({width: 'toggle'}) })
my demo jsfiddle
What I want is a reverse transition when I click the < li > again, but the commentted code didn`t work,and the code below works fine
let dbclickre = true;
function flipped() {
if (dbclickre) {
document.querySelector(".linkrec").setAttribute("Id", "flipped");
} else {
document.querySelector(".linkrec").removeAttribute("Id", "flipped")
}
dbclickre = !dbclickre;
}
below is the commentted code (I think when i firstly click the last < li > ,js will excute the if statement(and indeed it works fine),but when i click again , the else statement didn't excude(but i have set #flipped .reverse {background: whitesmoke} ) . why this happening???)
// const dbclickre = document.querySelector(".reverse");
// function flipped() {
// if (dbclickre.style.backgroundColor = 'white') {
// document.querySelector(".linkrec").setAttribute("Id", "flipped");
// } else {
// document.querySelector(".linkrec").removeAttribute("Id", "flipped")
// }
// }
Instead of relying on background color for checking the state of flip, you could check for existence of Id attribute. Here the the changed code:
const dbclickre = document.querySelector(".reverse");
function flipped() {
if ( document.querySelector(".linkrec").getAttribute("Id") == undefined ) {
document.querySelector(".linkrec").setAttribute("Id", "flipped");
} else {
document.querySelector(".linkrec").removeAttribute("Id", "flipped")
}
}
Edit:
Why element.style would not work?
From MDN Web Docs:
The style property is used to get as well as set the inline style of an element.
Hence, the style property would not work with embedded or external CSS.
Also, it may not be a good idea to use hard-coded colors as the condition, because changing colors in the respective CSS classes would completely break the functionality.
I have this following script to toggle (show and hide):
function btnClass1(where, pval, nval){
var x=$("#btn1-Bln ").val();
if (x == 'Show '){
where.title='Show ';
}
else{
where.title='Hide ';
}
where.value=(where.value == nval) ? pval : nval;
container=document.getElementById("containerXd");
container.style.display=(container.style.display == 'inline-block') ? 'none' : 'inline-block';
container.style.visibility=(container.style.visibility == 'visible') ? 'hidden' : 'visible'
;
I have many IDs to toggle, say, it's about 24 different IDs.
When I use the code it works fine, I just change #btnClass1 to #btnClass2 and 3, etc as well as #btn1-Bln, and containerXd.
But, I feel it's not efficient to build every IDs with new block of the script (again and again).
In this case, I need a simple script to represent all IDs in a web page.
Do you have other best suggestion for me, please
You just need to add two new params to your function for the buttonSelector and the containerSelector. In your example, you would pass in "#btn1-Bln" and "containerXd" for these new params, respectively. Then, use these new variables rather than the hard-coded strings in your function body. This will allow you to use your single existing function with any buttons and containers.
http://jsfiddle.net/fqwvy/12/
I want to "Color" the feilds inbetween "From" and "To", i managed to get it to color the picked feild, but i really dont know how to aproach this.
I also want to reset the css color, when something else is picked, is there an easy way to do this?
Any suggestions are welcome :)
fiddle_requires_some_code_to_post();
You need to loop through your <tds> between your "from" and "to" and set them. You have both the ids already, so it's pretty straightforward. You'll want to make sure your "to" index is set to your "from" index if nothing is selected.
Demo:
evT = end_time[to_color.value] ? end_time[to_color.value] : evF;
for( var index = evF - 1; index < evT; index++ ) {
$("#color"+(index+1)).css("background-color","red");
};
To clear all the colors you can do something like this, which says "all the <tds> with id starting with color":
$( 'td[id^="color"]' ).css( "background-color", "" );
Something along the lines of:
if(evF < evT){
for(i=evF + 1; i < evT; i++){
$("#color"+ i).css("background-color","red");
}
}
Then you will have an else if statement and do the reverse of when evT is greater than evF.
Also, I didn't see any code that cleared out the background color of red on subsequent selections. That would be good to add.
Sorry, my JS is not the best, I need some help on something I am sure is simple.
Basically I have my parent node (it can change, but that's okay, I'm getting the Parent correctly), but I now need to know if every child checkbox of that parent is checked (if so return 1) or if 1 or more child checkboxes is unchecked return 0.
Any help would be great!
I think :not combined with :checked is what you want
var numUnchecked =
$(parentNode).find("input[type='checkbox']:not(:checked)").length;
if (numUnchecked > 0)
alert("Some not checked");
Here's a fiddle
So for your specific question, it would be something like this
function areAllChecked() {
var parentNode = $("#parent");
var numUnchecked =
parentNode.find("input[type='checkbox']:not(:checked)").length;
return numUnchecked > 0 ? 0 : 1;
}