I want to say THANKS! for this video, it fit right into the project that I was working on, the other Tab methods I checked out really didn't fit in with the rest of the project.
Hey, thank for this all, you are the best, i really love your tutorials, i even cannot express my respect to you, I'm really grateful, thank you, thank you bro Yours sincerely Little Ninja
tanks a lot to make this video , you know i was crazzy to learn this thing , i try my level best to find it everywhere but i did't get, one day i visited you'r youtube channel , there i found , now i am so happy that i know this , and i got this
curious why doesnt it work if the conditional e.target.tagName == 'li'; why does it have to be upper case? i confused EDIT: had something to do with taglist being returned in caps meh -.-
How does the if(panel == targetPanel) comparison work? I understand that targetPanel contains either #about or # contact, but what is the value of panel? Do we just infer that panel contains either #about or #contact also?
@Parmesan yep I understand what you mean, but what value exactly in the current panel matches target value? The current panel is just an element , whereas the target value is either"contact" or "about".
@@zoebai7991 The current Pannel is an element the targetPannel is also an element as the dataset returns an id which is then used to save that element. The attributes of both are not being compared the elements themselves are to see if they are the same one.
@@patrickmckenna6520 are you sure about that? I think "e.target" would return the element, and "e.target.dataset.target" would return the value of attribute data-target
e.target returns the li element clicked e.target.dataset returns a mapping where i think the key is target and the value is the entire div if u console log e.target.dataset.target AKA targetpanel it shows the entire div
Nice video! Just one thing to notice.. in the event listener added to tabs we could have checked whether the target li tag was already having class set as active or not and only proceed to change it when it wasn't active. This way setting the class attribute in the li tag would have been of some use.
It's just a custom data attribute like 'src' in link tags or 'class' or 'id' in div tags. Those are all html standard. If you want a custom one, you just preface it with "data-'name'". So, 'data-target', 'data-key', 'data-whatever' are all legal custom attributes.
In the last if you are comparing element from Node list to a string which contains id. How does it work that "if"? It returns true while there are a lot of other data inside this node so how it know that it has to mach this exactly id not for example class or element name?
Ok.. I looked into it a tiny.. and found the concept or property, opacity. Of cause from color to background color should also work. I have to test this regarding flickering and "large" div element with lot's of information and components (tag's) on.
Question.. on line 66 why do we need to put "capital" "LI"? I tried with a lowercase and it doesn't work. what's the difference between the lowercase and uppercase "LI" tag?
Hey, this is just the way the document object describes target elements - in uppercase. In JavaScript, lowercase strings do not equal uppercase strings, they are considered different.
Its correct way to remove active class from all tabs? if (panel === targetPanel) { panel.classList.add('active'); Array.from(tabLi).forEach(function (li) { li.classList.remove('active'); }); e.target.classList.add('active'); } else { panel.classList.remove('active'); } Or this method? if (panel === targetPanel) { panel.classList.add('active'); const activeLi = tabs.querySelector('.active'); activeLi.classList.remove('active'); e.target.classList.add('active'); } else { panel.classList.remove('active'); }
For those using the Css of the earlier files, this may not work. Just change .tab to .panel i your Css file.
Thanks for your info man!
I couldn't figure how to fix this problem. Can you help?
i read the whole code 3 times to check the error then came to comments
it worked out for me thanks
i love this! Thank you net ninja! You are truly the programming sensei that we need
I appreciate that! :) thanks so much for watching
I want to say THANKS! for this video, it fit right into the project that I was working on, the other Tab methods I checked out really didn't fit in with the rest of the project.
Hey, thank for this all, you are the best, i really love your tutorials, i even cannot express my respect to you, I'm really grateful, thank you, thank you bro
Yours sincerely
Little Ninja
tanks a lot to make this video , you know i was crazzy to learn this thing , i try my level best to find it everywhere but i did't get, one day i visited you'r youtube channel , there i found , now i am so happy that i know this , and i got this
Holy Cow! You are the best! Thank you.
curious why doesnt it work if the conditional e.target.tagName == 'li';
why does it have to be upper case? i confused
EDIT: had something to do with taglist being returned in caps meh -.-
Best so far...
How does the if(panel == targetPanel) comparison work? I understand that targetPanel contains either #about or # contact, but what is the value of panel? Do we just infer that panel contains either #about or #contact also?
@Parmesan yep I understand what you mean, but what value exactly in the current panel matches target value? The current panel is just an element , whereas the target value is either"contact" or "about".
@@zoebai7991 The current Pannel is an element the targetPannel is also an element as the dataset returns an id which is then used to save that element. The attributes of both are not being compared the elements themselves are to see if they are the same one.
@@patrickmckenna6520 are you sure about that? I think "e.target" would return the element, and "e.target.dataset.target" would return the value of attribute data-target
e.target returns the li element clicked
e.target.dataset returns a mapping
where i think the key is target and the value is the entire div
if u console log e.target.dataset.target AKA targetpanel it shows the entire div
Nice video! Just one thing to notice.. in the event listener added to tabs we could have checked whether the target li tag was already having class set as active or not and only proceed to change it when it wasn't active. This way setting the class attribute in the li tag would have been of some use.
Great! This is what I've been looking for! Thank you Ninja!! :)
Absolutely brilliant. Thanks.
Thanks Brother!
This is with the Spread operator && arrow functions
tabs.addEventListener('click', (e) => {
if (e.target.targetName == 'li') {
const targetPanel = document.querySelector(e.target.dataset.target);
[...panels].forEach((panel) => {
log('foreach: ', panel);
if (panel == targetPanel) {
panel.classList.add('active');
} else {
panel.classList.remove('active');
}
});
}
});
Thank you very much!!!!
Hello, could someone explain what this "Data-target" actually is and how it works? Thank you very much!
It's just a custom data attribute like 'src' in link tags or 'class' or 'id' in div tags. Those are all html standard. If you want a custom one, you just preface it with "data-'name'". So, 'data-target', 'data-key', 'data-whatever' are all legal custom attributes.
In the last if you are comparing element from Node list to a string which contains id. How does it work that "if"? It returns true while there are a lot of other data inside this node so how it know that it has to mach this exactly id not for example class or element name?
console.log('TARGET: ' + targetPanel.outerHTML);
panels.forEach(function (panel) {
console.log('LOOP: ' + panel.outerHTML);
Nice.. is there simple way to fade in a active content and or fade out none-active?
(for all browsers)
Ok.. I looked into it a tiny.. and found the concept or property, opacity.
Of cause from color to background color should also work.
I have to test this regarding flickering and "large" div element with lot's of information and components (tag's) on.
your best
Great series
Thank you Ninja master.
useful tutorial thanks
Question.. on line 66 why do we need to put "capital" "LI"? I tried with a lowercase and it doesn't work. what's the difference between the lowercase and uppercase "LI" tag?
Hey, this is just the way the document object describes target elements - in uppercase. In JavaScript, lowercase strings do not equal uppercase strings, they are considered different.
@@NetNinja thank you for the reply! What should I search to read more about this in the documentation? Thanks again!
On line 48 of html, there is a class of active. Can someone explain why is it there. There was no change in execution even if I removed the class
1. getElementsByClassName, getElementsByTagName returns *HTMLCollection*
Array.from(titlesByClass).forEach(function(title){
console.log(title);
});
2. querySelector, querySelectorAll returns *NodeList*
titles.forEach(function(title){
console.log(title);
});
i want to click somewhere in this document and remove active class, how to do that?
thank you so much
tagName() returns all uppercase , it's a javascript weird part.
i got a job by this vidoe
kon si company me ha bhai ??
Why ''LI'' is in capital in the first if ?
yeah i also didn't understand
Its correct way to remove active class from all tabs?
if (panel === targetPanel) {
panel.classList.add('active');
Array.from(tabLi).forEach(function (li) {
li.classList.remove('active');
});
e.target.classList.add('active');
} else {
panel.classList.remove('active');
}
Or this method?
if (panel === targetPanel) {
panel.classList.add('active');
const activeLi = tabs.querySelector('.active');
activeLi.classList.remove('active');
e.target.classList.add('active');
} else {
panel.classList.remove('active');
}
why the "li" need to be uppercase "LI" ??
Why did we use capital "LI" in e.target.tagName == "LI"
html is not case sensitive you can use LI also and li also
It would be better if you showed the end result while you were building it.