I have a little problem with my tab menu. Namely, the buttons lose focus as soon as the visitor clicks anywhere on the website. I am aware that this is normal, but I would like to keep the focus or otherwise keep the style. I've tried a few things now, but I can't get anywhere, maybe you could help me. Thank you very much!
The Menu:
<div id="tab_bar">
<button id="blink1" class="tab_bar_item_left tab_button tablink" onClick="openLink(event, 'link1')" autofocus>link1</button>
<button id="blink2" class="tab_bar_item_left tab_button tablink" onClick="openLink(event, 'link2')">link2</button>
<button id="blink3" class="tab_bar_item_left tab_button tablink" onClick="openLink(event,'link3')">link3</button>
<button id="blink4" class="tab_bar_item_left tab_button tablink" onClick="openLink(event, 'link4')">link4</button>
<button id="blink5" class="tab_bar_item_right tab_button tablink" onClick="openLink(event, 'link5')">link5</button>
<button id="blink6" class="tab_bar_item_right tab_button tablink" onClick="openLink(event, 'link6')">link6</button>
</div>
The Content Div:
<div id="link1" class="content" style="display: flex;">
<div id="link1_content">
<h1>Some Text</1>
</div>
</div>
The Script:
<script type="text/javascript">
function openLink(evt, animName) {
var i, x, tablinks;
x = document.getElementsByClassName("content");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" tab_bar_item_left tab_button tablink", "");
}
document.getElementById(animName).style.display = "flex";
evt.currentTarget.className += " tab_bar_item_left tab_button tablink";
}
function checkMenu(evt, animName) {
if (document.getElementById(animName).style.display == 'flex') {
document.getElementById("b" + animName).focus();
}
}
</script>
The Button Style:focus:
#site #menu #tab_box #tab_bar .tab_button:focus {
color: rgba(255, 255, 255);
background-color: rgba(20, 33, 45);
}
Related
I'm trying to get this function to change the display to the "active" div on the first click then back to "Insurance" on the second click.
Currently, it doesn't change to "active" until the second click of the button, then it rotates back and forth as it should.
Why does it take 2 clicks initially? How do I get it to work with the first click of the button?
var timesClicked = 0;
function openDiv(evt, divName, divName2) {
if (name1 === 'Insurance' && timesClicked < 1) {
evt.currentTarget.className += " active";
}
var name1 = divName;
var name2 = divName2;
timesClicked++;
if (name1 !== 'Insurance' && timesClicked > 1) {
// timesClicked = 0;
// openDiv(evt, 'Insurance', 'Insurance2');
// console.log("switch back");
// return;
name1 = 'Insurance';
name2 = 'Insurance2';
evt.currentTarget.className.replace(" active", "");
timesClicked = 0;
}
var i, tabcontent, tabcontent2, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
tabcontent2 = document.getElementsByClassName("tabcontent2");
for (i = 0; i < tabcontent2.length; i++) {
tabcontent[i].style.display = "none";
tabcontent2[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(name1).style.display = "block";
document.getElementById(name2).style.display = "block";
if (timesClicked === 1) {
evt.currentTarget.className += " active";
}
}
document.getElementById("defaultOpen").click();
<button class="tablinks" onclick="openDiv(event, 'Insurance', 'Insurance2')" id="defaultOpen"></button>
<div class="dw12">
<button class="tablinks" onclick="openDiv(event, 'Retiree-Medical', 'Retiree-Medical2')"><div class="tab---icon"><img class="tab-img" src="images/retiree-medical_icon.png" alt="Retiree Medical"/></div><div class="shadow-div"></div><p class="bold-title"><strong>RETIREE MEDICAL</strong></p><p class="small-title">CLICK FOR MORE</p></button>
</div>
Your approach is quiet cumbersome for what I think it supposed to do. In fact if your only objective is to toggle visibility of elements with only 2 possible states: on or off, than you can do this without any javascript, by utilizing a hidden checkbox and based on it's state display or hide certain siblings via CSS:
#tab1:checked ~ #Retiree-Medical,
#tab1:checked ~ #Retiree-Medical2,
#tab1:not(:checked) ~ #Insurance,
/*note, you can't use #Insurance2 directly because it's not sibling of #tab1*/
#tab1:not(:checked) ~ .some-child #Insurance2,
/*or you can use * to make it more universal */
#tab1:not(:checked) ~ * .tab1toggle.checkedonly,
#tab1:checked ~ * .tab1toggle:not(.checkedonly) {
display: none;
}
label {
user-select: none;
/* prevent text selection on double click */
}
label>button {
pointer-events: none;
}
.div {
display: block;
}
.red {
background-color: pink;
display: inline-block;
}
<div class="content">
<!-- must be above any elements it controls -->
<input id="tab1" type="checkbox" checked hidden>
<!-- using label to redirect clicks to the checkbox -->
<label class="dw12 div" for="tab1">
<!-- to prevent this button from capturing clicks we must disable it in css via pointer-events style -->
<button class="tablinks"><div class="tab---icon"><img class="tab-img" src="images/retiree-medical_icon.png" alt="Retiree Medical"/></div><div class="shadow-div"></div><p class="bold-title"><strong>RETIREE MEDICAL</strong></p><p class="small-title">CLICK FOR MORE</p></button>
</label>
<div id="Insurance">Insurance</div>
<div class="some-child">
<div class="another-child">
<div id="Insurance2">Insurance2</div>
</div>
</div>
<div id="Retiree-Medical">Retiree-Medical</div>
<div id="Retiree-Medical2">Retiree-Medical2</div>
<div class="red">
<div class="tab1toggle checkedonly">generic div1 checked</div>
<div class="tab1toggle checkedonly">generic div2 checked</div>
<div class="tab1toggle checkedonly">generic div3 checked</div>
<div>
<div>
<div>
<div class="tab1toggle checkedonly">generic div4 checked, has multiple parents</div>
</div>
</div>
</div>
<div class="tab1toggle checkedonly">generic div5 checked</div>
<div class="tab1toggle">generic div6</div>
<div class="tab1toggle">generic div7</div>
<div class="tab1toggle">generic div8</div>
<div class="tab1toggle">generic div9</div>
<div class="tab1toggle">generic div10</div>
</div>
</div>
I was about to drop a question, but I actually noticed my error and I solved it. So instead of deleting this post I'll post it to help some people out there.[The error was I wrote getElemenstByClassName(), instead of getElementsByClassName() which is funny and depressing at the same time]
Also, show / bring back divs button is also there.
Here is the code:
var y = document.getElementsByClassName('ex')
var i;
function removeSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'none';
}
}
function hideSamples() {;
for (i = 0; i < y.length; i++) {
y[i].style.opacity = '0%';
}
}
function removeSamples2() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'block';
}
}
function hideSamples2() {;
for (i = 0; i < y.length; i++) {
y[i].style.opacity = '100%';
}
}
body {
background-color: rgb(25, 25, 25);
}
img,
.ex1,
.ex2,
.ex3,
.ex4,
.ex5 {
height: 150px;
width: 150px;
}
p {
color: rgb(255,0,0);
}
<button type="button" onclick="removeSamples()">Remove Samples</button>
<button type="button" onclick="hideSamples()">Hide Samples</button>
<button type="button" onclick="removeSamples2()">Bring back Samples</button>
<button type="button" onclick="hideSamples2()">Show Samples</button>
<div class="ex">
<img class="ex1" src="https://64.media.tumblr.com/af3438bac361d21ee1013338e4489b6f/b6f413ba8130992f-76/s1280x1920/0c9dab7eacac2a07eba7f340690514654d3e7aae.jpg">
</div>
<div class="ex">
<img class="ex2" src="https://i.pinimg.com/736x/a7/8d/e7/a78de7602e65161098cf1713da457e7a.jpg">
</div>
<div class="ex">
<img class="ex3" src="https://i.pinimg.com/originals/ec/83/3d/ec833d04025d2ca263df3b04bbc8723c.jpg">
</div>
<div class="ex">
<img class="ex4" src="https://i.pinimg.com/originals/cc/b7/e9/ccb7e9b09ec4a48478b2ff9561010000.png">
</div>
<div class="ex">
<img class="ex5" src="https://i.pinimg.com/originals/5b/cd/01/5bcd015992afa05979c8b9b448fb2939.jpg">
</div>
<p>Text</p>
Hi opacity get value between 0 and 1
but you used 0% and 100%!!!
Fix your code like this:
let y = document.querySelectorAll('.ex')
let i;
function removeSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'none';
y[i].style.opacity = 0;
}
}
function showSamples() {
for (i = 0; i < y.length; i++) {
y[i].style.display = 'block';
y[i].style.opacity = 1;
}
}
Here, I'll do a brief explanation about the code above and a brief explanation about for in JavaScript.
First you make a multiple containers with the same class
<div class="ex">
</div>
<div class="ex">
</div>
<div class="ex">
</div>
<div class="ex">
</div>
Then, put something in that container to see what is happening
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now add some CSS
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now let's insert some basic Js (JavaScript) code We will declare x variable to be document.getElementsByClassName('ex') it'll help us to write x.style.display instead of document.getElementsByClassName('ex').style.display because we will be calling it multiple times. We will leave i variable undefined for now.
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Let's make a button in the HTML then make empty function in JavaScript called removeEx()
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
function removeEx() {
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">
Remove Lines
</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Now, let's focus here on JavaScript.In the empty function we made, put empty for statement
function removeEx() {
for()
}
Now let's tell the for statement that i variable is equals to 0
function removeEx() {
for(i = 0;)
}
Then, we will tell for statement to stop looping once it reaches the last class element in the HTML by adding < smaller than symbol so it can know where to stop. Also, we have to tell it to stop corresponding to the length of the classes which is 4 classes we have in our HTML by attaching .length method to the variable x.instead of writing:
function removeEx() {
for(i = 0; i < document.getElementsByClassName('ex').length;)
}
We will write:
function removeEx() {
for(i = 0; i < x.length;) //Remember, var x = document.getElementsByClassName('ex');
}
We will make the i variable to keep increasing by 1 until it reaches 4 (the number of our classes) then it'll stop by adding ++ operator to the i variable.
So we will write this
function removeEx() {
for(i = 0; i < x.length; i++)
}
Our for statement is now good to go.Let's open a curly brackets
function removeEx() {
for(i = 0; i < x.length; i++) {
}
}
We will evoke an event to make all divs with the class ex to get removed. So we will let i variable attach to x variable to make the spark of the event by typing x[i], then we can put the event we want. For our case, the event is we want to change the display statement to none.We will write this
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none'; //You can put any CSS statement after x[i].style for example x[i].style.color
}
}
Now let's test our code
var x = document.getElementsByClassName('ex');
var i;
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">
Remove Lines
</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
Finally, we will add 3 more buttons. One to get back our lines, one to make our lines semi-transparent, and one to make our lines not-transparent.The first button:
<button type="button" onclick="removeEx()">Remove Lines</button>
The second button:
<button type="button" onclick="removeEx2()">Get back Lines</button>
The third button:
<button type="button" onclick="removeEx3()">50% Lines</button>
The forth button:
<button type="button" onclick="removeEx4()">Normal Lines</button>
The final result:
var x = document.getElementsByClassName('ex'); //To use it as a refrence
var i;
function removeEx() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'none';
}
}
function removeEx2() {
for (i = 0; i < x.length; i++) {
x[i].style.display = 'block';
}
}
function removeEx3() {
for (i = 0; i < x.length; i++) {
x[i].style.opacity = '50%';
}
}
function removeEx4() {
for (i = 0; i < x.length; i++) {
x[i].style.opacity = '100%';
}
}
body {
background-color: rgb(25,25,25);
}
p {
color: rgb(200,200,0);
background-color: rgb(150,50,50);
font-size: 20px;
}
<button type="button" onclick="removeEx()">Remove Lines</button>
<button type="button" onclick="removeEx2()">Get back Lines</button>
<button type="button" onclick="removeEx3()">50% Lines</button>
<button type="button" onclick="removeEx4()">Normal Lines</button>
<div class="ex">
<p>
Text1
</p>
</div>
<div class="ex">
<p>
Text2
</p>
</div>
<div class="ex">
<p>
Text3
</p>
</div>
<div class="ex">
<p>
Text4
</p>
</div>
I'm doing work for a client and I ran into a pickle. He wanted a tab system whereby when the client clicks on the tab it opens content. Easy enough to do and I did it, however I encountered an issue. When you try to click the button to close it doesn't close for me, although it does open the new tab if clicked.
HERE is an example of the code on codepen: https://codepen.io/ghostcrawl3r/pen/vYybmJL
This is my html code:
<div className="tab">
<ul style="
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
">
<li><a class="tablinks" onclick="menuToggle(globalToggle, event, 'sandTesting')">THE SANDSTONE TESTING</a></li>
<li><h4>|</h4></li>
<li><a class="tablinks" onclick="menuToggle(globalToggle, event, 'cleaningCons')">THE CLEANING CONSIDERATIONS</a></li>
<li><h4>|</h4></li>
<li><a class="tablinks" onclick="menuToggle(globalToggle, event, 'codePrac')">THE CODE OF PRACTICE</a></li>
</ul>
<div id="sandTesting" class="tabcontent">
[elementor-template id="432"]
</div>
<div id="cleaningCons" class="tabcontent">
[elementor-template id="434"]
</div>
<div id="codePrac" class="tabcontent">
[elementor-template id="436"]
</div>
and this is my Javascript:
var globalToggle = false;
function menuToggle(tgl, evt, linkName){
var state = tgl;
tgl = !state;
if(tgl) {
globalToggle = false;
return openCity(evt, linkName);
} else {
globalToggle = true;
return document.getElementById(linkName).style.display = "none";
}
}
function openCity(evt, linkName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(linkName).style.display = "block";
evt.currentTarget.className += " active";
}
I'm not entirely sure how to fix this. I tried to separate the globalVairable into 3 different vars and with if statements BUT when I did that to click on another tab you had to click twice.
I'd really appreciate some help as this has been plaguing me for days!
function menuToggle(tgl, evt, linkName) {
if (!evt.target.classList.contains("active")) {
return openCity(evt, linkName);
} else {
evt.target.classList.remove("active")
return document.getElementById(linkName).style.display = "none";
}
}
You've tangled up with the toggle-logic. I would refer to a class attribute and not to a JS-variable. If you don't want to use classList you must rewrite a bit, but the logic stays the same.
I am creating a cinema website (school assignment) with three tabs: "Now Showing", "Coming Soon", "Promotions". I would like all content under "Now Showing" to be immediately visible upon page load. What do I need to edit in the HTML + Javascript code to do this?
I have only learnt HTML & CSS so far and adapted the Javascript code from w3schools. Hence, I'm not sure what to do. Thank you.
Here is the HTML code.
<div id="tab-rows">
<div class="tab">
<button class="tablinks" onclick="openContent(event, 'now-
showing')">Now Showing</button>
<button class="tablinks" onclick="openContent(event, 'coming-
soon')">Coming Soon</button>
<button class="tablinks" onclick="openContent(event,
'promotions')">Promotions</button>
</div>
<div id="now-showing" class="tabcontent">
<p>Placeholder Content</p>
</div>
<div id="coming-soon" class="tabcontent">
<p>Placeholder Content</p>
</div>
<div id="promotions" class="tabcontent">
<p>Placeholder Content</p>
</div>
Here is the Javascript code.
<script>
function openContent(evt, contentName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("
active", "");
}
document.getElementById(contentName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
There are multiple ways of doing it.
You could use the onload in the html and call your openContent function in it.
If you would wish to do it with the javascript only you can add event listener have to pass in your openContent as the second argument document.addEventListener("DOMContentLoaded", openContent);
You could change:
<div id="now-showing" class="tabcontent">
to:
<div id="now-showing" class="tabcontent active">
and add this to <head>:
<style>
.tabcontent { display: none; }
.tabcontent.active { display: block; }
.tablinks.active { cursor: not-allowed; }
</style>
and update your script like:
function openContent(evt, contentName) {
var tabcontent = document.getElementsByClassName("tabcontent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove("active");
}
var tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
evt.currentTarget.classList.add("active");
document.getElementById(contentName).classList.add("active");
}
https://codepen.io/anon/pen/qLVQmp
I have a set of tabs that look like this in my HTML:
<div class = "tab">
<button id = "Hom" class = "tablinks" onclick = "openTab(event, 'Home')">Home</button>
<button id = "Con" class = "tablinks" onclick = "openTab(event, 'Conjugations')">Conjugations</button>
<button id = "AutoCon" class = "tablinks" onclick = "openTab(event, 'Auto Conjugator')">Auto Conjugator</button>
</div>
<div id = "Home" class = "tabcontent">
<center>
<img src = "http://youth-portal.com/wp-content/uploads/2015/10/online-courses-of-French.jpg" height = "283.5" width = "567">
</center>
</div>
JavaScript:
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
I want to make the home tab appear first when the page loads so that the user does not have to click the tab. I have tried it in CSS but it does not seem to be working. How do you do this with CSS or JavaScript?
Here is a working example;
https://codepen.io/curthusting/pen/vpeqWp?editors=1000
I would suggest instead of modifying styles with javascript, i.e.
tabcontent[i].style.display = "none"; & document.getElementById(tabName).style.display = "block";
control it with css;
.tabcontent {
display: none;
}
.tabcontent.active {
display: block;
}
.tablinks {
background: #fff;
}
.tablinks.active {
background: #5fba7d;
}
Then modify your initial html like this
<div class="tab">
<button id="Home" class="tablinks active" onclick="openTab(event, 'HomePanel')">Home</button>
<button id="Con" class="tablinks" onclick="openTab(event, 'ConjugationsPanel')">Conjugations</button>
<button id="AutoCon" class="tablinks" onclick="openTab(event, 'AutoConPanel')">Auto Conjugator</button>
</div>
<div id="HomePanel" class="tabcontent active">
<center>
<h1>Home</h1>
<img src="http://youth-portal.com/wp-content/uploads/2015/10/online-courses-of-French.jpg" height="283.5" width="567">
</center>
</div>
<div id="ConjugationsPanel" class="tabcontent">
<center>
<h1>Conjugations</h1>
<img src="http://youth-portal.com/wp-content/uploads/2015/10/online-courses-of-French.jpg" height="283.5" width="567">
</center>
</div>
<div id="AutoConPanel" class="tabcontent">
<center>
<h1>Auto Conjugator</h1>
<img src="http://youth-portal.com/wp-content/uploads/2015/10/online-courses-of-French.jpg" height="283.5" width="567">
</center>
</div>
and your javascript would look like this
// move these outside the `openTab()` so we can cache them and not retrieve them every time the active tab is changed
const tabcontent = document.getElementsByClassName("tabcontent");
const tablinks = document.getElementsByClassName("tablinks");
function openTab(evt, tabName) {
[].forEach.call(tabcontent, function(el) {
el.classList.remove("active");
});
[].forEach.call(tablinks, function(el) {
el.classList.remove("active");
});
document.getElementById(tabName).classList += " active";
evt.currentTarget.classList += " active";
}