how to Keep current tab active after page reload? - javascript

this is my HTML code:
`<div class="MainContainer">
<div class="w3-container">
<div class="w3-row">
<a href="javascript:void(0)" onclick="openTab(event, 'firstTab');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding w3-border-red"> firstTabName </div>
</a>
<a href="javascript:void(0)" onclick="openTab(event, 'secondTab');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding"> secondTabName </div>
</a>
</div>
{{--------------------------------firstTab content--------------------------------}}
<div id="firstTab" class="w3-container tab" style="display:block">
--firstTab content--
</div>
{{--------------------------------secondTab content--------------------------------}}
<div id="secondTab" class="w3-container tab " style="display:none">
--secondTab content---
</div>
</div>
</div>`
and here is my javascript code :
function openTab(evt, tabName) {
var i, x, tablinks;
x = document.getElementsByClassName("tab");
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(" w3-border-red", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-red";
}
function activateTab(tabName){
document.getElementById(tabName).style.display = "block";
}`
when i'm working with second tab content after refreshing page the content of first tab shown .
and i can't keep open the second tab active.

Related

Javascript Media "Query" function not running

I can't seem my Function to actually run I managed to get it to Implement but the issue was you had to reload the script which I don't want I wanted it to run whenever someone resizes the site window.
But when I get to 900px, it doesn't actually show the content and the function's not working correctly, The Reason for this function is that I have tabbed content that on a bigger screen should only have there visibility reduced so so the spacing is correct but on mobile its taking a full 12 columns so it needs to start hiding the content with its spacing all together else I end up with
item1
item2
item3
etc
Let me know if any further material needs to be provided.
window.onresize = function() {
if (window.innerWidth <= 900) {
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("wedo-tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].style.opacity = "0";
}
tablinks = document.getElementsByClassName("wedo-tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
document.getElementById(cityName).style.opacity = "1";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
}
}
<div class=" wedo-tab mg-top-m">
<button id="defaultOpen" class="wedo-tablinks" onclick="openCity(event, '1')">01</button>
<img class="steps-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-15.png">
<button class="wedo-tablinks" onclick="openCity(event, '2')">02</button>
<img class="steps-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-15.png">
<button class="wedo-tablinks" onclick="openCity(event, '3')">03</button>
<img class="steps-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-15.png">
<button class="wedo-tablinks" onclick="openCity(event, '4')">04</button>
<img class="steps-img" src="<?php echo home_url();?>/wp-content/uploads/2020/04/Asset-15.png">
<button class="wedo-tablinks" onclick="openCity(event, '5')">05</button>
</div>
<div class="row ab-contents">
<div id="1" class="col-lg-2 col-sm-12 wedo-tabcontent">
<h4>BRIEF</h4>
<p>It all starts with coffee. We want to sit down with you and get to know your brand and what makes it tick. We want you to explain your brief so that our team can get cracking on finding the right solution</p>
</div>
<div id="2" class="col-lg-2 col-sm-12 wedo-tabcontent">
<h4>BRIEF</h4>
<p>It all starts with coffee. We want to sit down with you and get to know your brand and what makes it tick. We want you to explain your brief so that our team can get cracking on finding the right solution</p>
</div>
<div id="3" class="col-lg-2 col-sm-12 wedo-tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="4" class="col-lg-2 col-sm-12 wedo-tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<div id="5" class="col-lg-2 col-sm-12 wedo-tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
openCity was never called. Take that function out of resize event listener and call it on window.resize. Also the function accepts evt, cityName so have to pass those two parameter too
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("wedo-tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].style.opacity = "0";
}
tablinks = document.getElementsByClassName("wedo-tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
document.getElementById(cityName).style.opacity = "1";
evt.currentTarget.className += " active";
}
window.onresize = function() {
if (window.innerWidth <= 900) {
setTimeout(function() {
openCity(var1, var2)
}, 2000)
document.getElementById("defaultOpen").click();
}
}

onclick show all hidden elements

On click of the different letters the following code is showing the corresponding elements. But I'm struggling to to show all elements when someone clicks "All".
How could I achieve this?
function openCity(evt, cityName) {
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(cityName).style.display = "block";
if (evt) {
evt.currentTarget.className += " active"
}
}
<a class="tablinks" onclick="openCity(event, 'All')">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a>
<div id="A" class="tabcontent">
<h3>A</h3>
Abschreibung
</div>
<div id="B" class="tabcontent">
<h3>B</h3>
Bauvorhaben
</div>
<div id="C" class="tabcontent">
<h3>C</h3>
</div>
document.getElementById(cityName).style.display = "block";
So the problem is this line errors out when the "cityName" argument is "All".
So you just need to handle that scenario, and whenever you get "All" in that variable you can instead display all elements.
I have fixed the code in snippet below:
function openCity(evt, cityName) {
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", "");
}
if (cityName != 'All') {
document.getElementById(cityName).style.display = "block";
} else {
// Display all
var elements = document.querySelectorAll(".tabcontent");
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "block";
}
}
if (evt) {
evt.currentTarget.className += " active"
} else {
document.getElementById("defaultOpen").className += " active"
}
}
<a class="tablinks" id="defaultOpen" onclick="openCity(event, 'All')">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a>
<div id="A" class="tabcontent">
<h3>A</h3>
Abschreibung
</div>
<div id="B" class="tabcontent">
<h3>B</h3>
Bauvorhaben
</div>
<div id="C" class="tabcontent">
<h3>C</h3>
</div>
I would use a separate function for the all and just loop through the tab content divs to show them all:
function openAll() {
// show all tab content divs
var tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "block";
}
// add active class to all as they are all open
var tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.add("active");
}
}
function openCity(evt, cityName) {
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].classList.remove("active");
}
document.getElementById(cityName).style.display = "block";
if (evt) {
evt.currentTarget.classList.add("active");
}
}
.tabcontent {
display:none;
}
.active {
color:green;
}
<a class="tablinks" onclick="openAll()">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a>
<div id="A" class="tabcontent">
<h3>A</h3>
Abschreibung
</div>
<div id="B" class="tabcontent">
<h3>B</h3>
Bauvorhaben
</div>
<div id="C" class="tabcontent">
<h3>C</h3>
</div>
I would also use .classList to add and remove classes properly (rather than appending and then replacing them)
You have to check the condition for which the parameter is all and not anything else. If it is anything else then display that id. Added a switch statement. Loop over every class and display them when "All" is clicked, else add a default option and first hide everything and display what is clicked.
function openCity(evt, cityName) {
Array.from(document.getElementsByClassName("tablinks")).forEach(ele => ele.classList.remove('active'))
evt.target.classList.add('active')
switch (cityName) {
case "All":
Array.from(document.getElementsByClassName("tabcontent")).forEach(ele => ele.style.display = 'block')
break;
default:
Array.from(document.getElementsByClassName("tabcontent")).forEach(ele => ele.style.display = 'none');
document.getElementById(cityName).style.display = 'block'
break;
}
}
.tabcontent {
display: none;
}
.active {
color:green;
}
<a class="tablinks" onclick="openCity(event, 'All')">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a>
<div id="A" class="tabcontent">
<h3>A</h3>
Abschreibung
</div>
<div id="B" class="tabcontent">
<h3>B</h3>
Bauvorhaben
</div>
<div id="C" class="tabcontent">
<h3>C</h3>
</div>

Javascript : How to display a default tab content but hide other tab content

I have tabs created via <button> and the content of those tabs are in separate <div></div> like this :
function openInfo(evt, toolsName) {
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(toolsName).style.display = "block";
evt.currentTarget.className += " active";
}
<button class="tablinks" onclick="openInfo(event, 'Tab1')">Tab1</button>
<button class="tablinks" onclick="openInfo(event, 'Tab2')">Tab2</button>
<div id="Tab1" class="tabcontent">
<h5>Title</h5>
<div class="a">
<p>Content</p>
</div>
</div>
but it hides all the contents by default. I'd like Tab1 to be displayed by default first. how do i modify the script?
<div id="Tab1" style="display: block;" class="tabcontent">
<h5>Title</h5>
<div class="a">
<p>Content</p>
</div>
</div>
<div id="Tab2" style="display: none;" class="tabcontent">
<h5>Title2</h5>
<div class="a">
<p>Content2</p>
</div>
</div>
If you add more tabs, keep their style display: none. Only tab1 will have style display:block
Use bootstrap tab, in which first tab will always be active if you set it as class="active" and easy to maintain as well.Follow the link to get idea about bootstrap tabs
Except it your code is fine just show or hide tabs while performing onclick event which tab you want to show or hide simple.
function openInfo(val) {
if ($("#" + val).hasClass("ActivTab")) {
$("#" + val).removeClass("ActivTab").addClass("deactivTab")
} else {
$("#" + val).addClass("ActivTab").removeClass("deactivTab")
}
}
.ActivTab {
display: block
}
.deactivTab {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="tablinks" onclick="openInfo('Tab1')">Tab1</button>
<button class="tablinks" onclick="openInfo('Tab2')">Tab2</button>
<div id="Tab1" class="tabcontent ActivTab">
<h5>Title</h5>
<div class="a">
<p>Content</p>
</div>
</div>
<div id="Tab2" class="tabcontent deactivTab">
<h5>Title2</h5>
<div class="a">
<p>Content</p>
</div>
</div>
HTML:
On your first tab, add a class of '.open'.
CSS:
.tabcontent {
display: none;
}
.tabcontent.open {
display: block;
}
JavaScript:
Set this up as a click event.
On the click, search for the '.tabcontent.open' element and remove the .open class. Following that up with adding the '.open' class onto the clicked tab. All within the same snippet inside the click.
Easy c:
This code is just to show up data by clicking on any of the tab. What you have to do is I have wrote a corrected JavaScript code, copy and replace your JS code with this code and you are done.
function openInfo(evt, toolsName) {
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(toolsName).style.display = "block";
evt.currentTarget.className += " active";
}
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 1; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

My JavaScript code doesn't work when I put it in an external file [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
When I put my JavaScipts code in the tags in my html file everything works, but when I put it in an external .js file, everything but 1 thing works. When loading the page it doesn't load a picture in my slideshow automatically, but when in my HTML file it does do that.
My HTML header:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/EindopdrachtTest.css">
<script type="text/javascript" src="myTest1.js"></script>
</head>
My HTML code:
<div id="slide">
<div class="mySlide">
<div class="tipNumber">1 / 3
</div>
<img src="images/Tip1.jpg" class="slideImg">
<div class="caption"> Studietips
</div>
</div>
<div class="mySlide">
<div class="tipNumber">2 / 3
</div>
<img src="images/tip2.jpg" class="slideImg">
<div class="caption">
Studietips
</div>
</div>
<div class="mySlide">
<div class="tipNumber">3 / 3
</div>
<img src="images/tip3.jpg" class="slideImg">
<div class="caption">
Studietips
</div>
</div>
<!-- next and previous buttons-->
<button class="previous" onclick="slidePlus(-1)">❮ Prev</button>
<button class="next" onclick="slidePlus(+1)">Next ❯</button>
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
My JavaScript:
var slideIndex = 1;
showSlides(slideIndex);
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlide");
dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 8000); // Change image every 8 seconds
}
function slidePlus(position) {
var i;
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<1){slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function currentSlide(index) {
var i;
if (index > slides.length) {
index = 1
}
else if(index < 1){
index = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[index-1].style.display = "block";
dots[index-1].className += " active";
}
The problem is that the script is loading before the DOM is ready. Call the script at the end of the body element instead of calling it in the head element, like this:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/EindopdrachtTest.css">
</head>
<body>
<div id="slide">
<div class="mySlide">
<div class="tipNumber">1 / 3
</div>
<img src="images/Tip1.jpg" class="slideImg">
<div class="caption"> Studietips
</div>
</div>
<div class="mySlide">
<div class="tipNumber">2 / 3
</div>
<img src="images/tip2.jpg" class="slideImg">
<div class="caption">
Studietips
</div>
</div>
<div class="mySlide">
<div class="tipNumber">3 / 3
</div>
<img src="images/tip3.jpg" class="slideImg">
<div class="caption">
Studietips
</div>
</div>
<!-- next and previous buttons-->
<button class="previous" onclick="slidePlus(-1)">❮ Prev</button>
<button class="next" onclick="slidePlus(+1)">Next ❯</button>
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<script type="text/javascript" src="myTest1.js"></script>
</body>

how to code for multiple modals where some of them are carousels with different number of slides

I have a page with several buttons, when each button is clicked a different modal pops up. Some of the modals are carousels, the code I have works but for only one of the carousels, when I have more than one I get extra empty slides on all the carousels. So I'm guessing my code is counting all the slides from all the carousels together. Im trying to have write something where it says if this modal is clicked then get the slides from the clicked modal only but Im struggling with that.
These are the bits of relevant code:
<script>
//Carousel
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
</script>
<script>
//Display corresponding modal of letter that is clicked
$(".button").on("click", function() {
var modal = $(this).data("modal");
$(modal).show();
document.body.classList.add("modal-open");
});
//Close modal when "x" is clicked or when area outside modal is clicked
$(".modal").on("click", function(e) {
var className = e.target.className;
if(className === "modal" || className === "close"){
$(this).closest(".modal").hide();
document.body.classList.remove("modal-open");
}
});
</script>
<button class="button" data-modal="#modalOne"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalB"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalC"><img id="myImg" src=""></button>
<!-- The Modal -->
<div id="modalA" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class= "mySlides">
<img class="gif" src="" width="100" height="100" >
<h4>Title</h4>
<p> content </p>
</div>
<div class="mySlides">
<h4 Title</h4>
<p> content </p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>
<!-- The Modal B -->
<div id="modalB" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
</div>
</div>
</div>
<!-- The Modal C -->
<div id="modalC" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
<div class="mySlides">
<h4></h4>
<p></p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>
When you do this line
var x = document.getElementsByClassName("mySlides");
You count all the elements with class name of "mySlides", which is ALL of the slides in the HTML document.
Add code in your button click routine to count the number of slides in the corresponding modal:
Add this at the top of the javascript:
var modal = "modalA";
showDivs(slideIndex, modal);
Change the button click to:
$(".button").on("click", function() {
modal = $(this).data("modal").text();
$("#" + modal).show();
document.body.classList.add("modal-open");
});
Modify your showDivs function to include the new variable:
function showDivs(n, modal) {
var i;
var x = document.getElementById(modal).getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
Finally, change the data-modal attributes of your buttons to read:
<button class="button" data-modal="modalA">
<button class="button" data-modal="modalB">
<button class="button" data-modal="modalC">
You will also need to update the lines:
function plusDivs(n) {
showDivs(slideIndex += n, modal);
}
function currentDiv(n) {
showDivs(slideIndex = n, modal);
}

Categories