ok, now how to make it appear in the same page in screens with varying dimensions. i made it in a bigger screen but now if I open it in a device with smaller screen, the line is misplaced. please make a video on it as well
Thanks for help i do not copy your html code but I use css of display block and animation and js for active tab show as active. at this time 4:14 Am I am bussy in making tool website. Comming soon awsome website
you need to mention the class name active in the HTML page, so when you open the page it will show the tab in which you mention active class name to the tab. still, if you have doubts please DM me on Instagram.
Yes, it is easy just follow my steps 🙂 1) There is a class name "tab_box" that change the justify-content property value to "justify-content: space-between; " (in the CSS file) 2) Now let's change the indicator which is the class name "line" and change the top property to "0px"(in the CSS file)
Hey bud, thank you for this wonderful video. Small qn tho, i tried inputting the javascript portion into a js file(instead of script tag in html file) but the line portion wont work. Any idea why?
Are you talking about the blue color line indicator? or the entire js code is not working? if the js code is not working can you check js file is appropriately linked to the HTML file........ or DM me on Instagram with screenshots of the code.
@@simplecode933 talking about the blue color line indicator. I cant make it move to the other tabs after pressing them. It only stays at 'Home'. This is only if i input the code in the js file tho. Works perfectly fine if i input under script tag in html file.
Nice video. It is very helpful. how The line left px will change based on the screen size. How to fix the line positioning left automatically for the different screen size
Use a psuedo ::after element for each button and position it relative to be a little lower than the original button. Keep its display none and then onclick you can enable the display for the psuedo element you can give its height like 10px and width will be 100% so same as original button
It’s my first day I got the hang of it don’t worry add interest and as a beginner copy and remember which code functions what sooner and this will practice your mind to code without assistance after that.
U are so Simply and smart Thank you
Thank you 😊
ok, now how to make it appear in the same page in screens with varying dimensions. i made it in a bigger screen but now if I open it in a device with smaller screen, the line is misplaced. please make a video on it as well
How can I separate the codes in Tab 1 from Tab 2, so that the first code does not affect the second code?
Please tell me the code that opens the first tab when entering.
source code please?
best way to do it bought me about an hour
What if i want to fill the whole page with the tab contents
nice animated tabs button
how can i do this responsive for mobile?
Really really nice background music 👌 bro🤘 keep going 💯
Thank you 😊
awesome🤩
Thank you 😊
what about if you want the box to stay in place if it has a lot of content?
Great Tutorial!
Brilliant logic sir great🎉
Thank you and keep supporting ❤️
thanks for the solution
Thank you and subscribe for more videos ☺️
Thanks for help i do not copy your html code but I use css of display block and animation and js for active tab show as active. at this time 4:14 Am I am bussy in making tool website. Comming soon awsome website
Greatt ❤ logic
Nice project thanks brother
Most welcome
@@simplecode933 And if there are still blocks with tabs, how then to rebuild it all??
Follow all code but still cannot work.
please Help me when i open a site the first tab should be always open please help me in this
you need to mention the class name active in the HTML page, so when you open the page it will show the tab in which you mention active class name to the tab.
still, if you have doubts please DM me on Instagram.
I'm having an issue where the line does not pop up and is hidden behind everything. I copied everything and looked everything over, any solutions?
Are you talking about indicator? Send me the picture of that issue on my Instagram 🙂
Bruv, you saved my lifeeeeeeeeee
Thank you and keep supporting ❤️
Great video, thank you! 💓💓👍👍
Thank you too
please can i get the course code
*source code
Very helpful, thanks!!
you are welcome 🙂
What is the Source code to this do you have a GitHub Account?
Thanks a lot for this video. 😘
Welcome ❤️
Subscribe for more videos 🙂
Beautiful
Thank you
how do you only have 1.3K followers wtf
When positionning the line, how do you know the property top should be at 62px exactly please ?
Yes, I put it like randomly 55px, 60px and 62px...... It fits on 62px
or you can just use bottom: 0;
OP Brother/Sister
Thank you and keep supporting ❤️
Thanks bro you saved me❤
Welcome ❤️
Subscribe for more videos 🙂
Hi, thank you for the solution! How can I make the line fill in the left space when Home is pressed and the right space when Cont Us is pressed?
Yes, it is easy just follow my steps 🙂
1) There is a class name "tab_box" that change the justify-content property value to "justify-content: space-between; " (in the CSS file)
2) Now let's change the indicator which is the class name "line" and change the top property to "0px"(in the CSS file)
@@simplecode933 Perfect, thank you so much!
Welcome 😊 and keep supporting me 🙂
Doesn;t work on 11 buttons
merhaba videonuz kesinlikle harşka ancak keşke videonun kodlarını da paylaşsaydınız harika olurdu
niye bedavaya paylassin, millet gelip kopyalasin videoyu izlemesin diye mi? izle videoyu yazarak yap iste
Hey bud, thank you for this wonderful video. Small qn tho, i tried inputting the javascript portion into a js file(instead of script tag in html file) but the line portion wont work. Any idea why?
Are you talking about the blue color line indicator? or the entire js code is not working?
if the js code is not working can you check js file is appropriately linked to the HTML file........ or DM me on Instagram with screenshots of the code.
@@simplecode933 talking about the blue color line indicator. I cant make it move to the other tabs after pressing them. It only stays at 'Home'. This is only if i input the code in the js file tho. Works perfectly fine if i input under script tag in html file.
@@anthonylie4588 Did you remember to put the script import at the bottom of the html file?
thanks from Ukraine !!!💙💛🤟🤟
Thank you too🧡
code pls
i love it too
Thank for your support ❤️
It is simple
I think It are hard
please build animaiting web page with html css and more js
Okay sure 😊
thank u
You're welcome!
Nice video. It is very helpful. how The line left px will change based on the screen size. How to fix the line positioning left automatically for the different screen size
Use a psuedo ::after element for each button and position it relative to be a little lower than the original button. Keep its display none and then onclick you can enable the display for the psuedo element you can give its height like 10px and width will be 100% so same as original button
Not a fan of many of the code practices used here...
It’s my first day I got the hang of it don’t worry add interest and as a beginner copy and remember which code functions what sooner and this will practice your mind to code without assistance after that.
Thanks very simple!
You're welcome!🙂
Life saver 🫂
btns.forEach(btn => btn.classList.toggle(“active”, btn === e.target);
😑😑😑