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();
}
}
Related
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";
}
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
The code given utilizes old methods and ES5. But, I am unable to convert it in ES6 by using addEventListner.
I am facing problem regarding parameters such as different city names used in onClick() function.enter code here
I think there's nothing wrong with your comment, but rather that there literally is no element on the page with the id "defaultOpen", so this is where the error comes from.
For the JavaScript part:
let elements = document.querySelectorAll('.tablinks');
for(var i = 0;i < elements.length; i++){
elements[i].addEventListener('click', function(){
var target = elements[i].getAttribute('data-target');
openCity(evt, document.querySelector(target));
}, false);
}
Edit your HTML to look like this:
<div class="tab">
<button class="tablinks" data-target="#London">London</button>
<button class="tablinks" data-target="#Paris">Paris</button>
<button class="tablinks" data-target="#Tokyo">Tokyo</button>
</div>
Why are we using querySelector and querySelectorAll? So that we can use any CSS selector to target our tabs. E.g. #tabs .pages.
Why are we using data-target? So that we can type anything we want into the element body.
Haven't tested it, but this might work:
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].removeAttribute('onclick');
tablinks[i].addEventListener('click', function() {
openCity(evt, evt.currentTarget.innerHTML());
}, false);
};
I'm trying to add an onmouseout for a tab function and I'm using w3schools tab example, which has an onmouseover and that would show the tabcontent when hovering on tablink, but the content stays in, and an onmouseout would probably solve my question, the only problem is that I have no idea how to get around that. Thanks!
Example
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital city of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital city of Japan.</p>
</div>
see how it works here
add mouseout listener to your tab div
const tabs = document.querySelector('.tab');
tabs.addEventListener("mouseout", function( event ) {
// Get all elements with class="tabcontent" and hide them
const tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "block";
}
}, false)
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
const tabs = document.querySelector('.tab');
tabs.addEventListener("mouseout", function( event ) {
// Get all elements with class="tabcontent" and hide them
const tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "block";
}
}, false)
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital city of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital city of Japan.</p>
</div>
I am at the moment using this code for HTML/JS tabs.
But the code gets way to messy since it is all in one file, is it possible to separate the code in tab one, tab two etc?
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
And the JavaScript
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
Also, at the moment it does not show which tab you are on. Ideally would be to have /#tab1, /#tab2 etc.
Any suggestions?
Well, that code is OK. So this should mean your not including your JS correctly.
I just copied your code and pasted ( I just modified the begining of the script to hide all tabcontents)
var tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
On a nav menu with onclick function (example here) that displays a div tab content I would like to pass an additional value to load a specific content. This is the current code:
<ul class="tab">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the <script>document.write(ThirdValue)</script> city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of <script>document.write(ThirdValue)</script>.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of <script>document.write(ThirdValue)</script>.</p>
</div>
And this is the Javascript:
function openCity(evt, cityName, ThirdValue) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
alert(ThirdValue);
}
I am not able to get the third variable within the div. I am able to see it with alert(ThirdValue);, but using <script>document.write(ThirdValue)</script> I am not able to add it within the html.
I need to add this value within the html. How can I print / append this value within the html?
You shouldn't use document.write, since it is only working while the DOM is loading, after the DOM is ready, it won't work.
Instead place a placeholder inside the html (eg: <p>London is the {var} city of England.</p>), and replace it with ThirdValue. Here is how:
var text = document.getElementById(cityName).querySelector('p');
text.innerHTML = text.innerHTML.replace('{var}',ThirdValue);
Full code:
function openCity(evt, cityName, ThirdValue) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
var text = document.getElementById(cityName).querySelector('p');
text.innerHTML = text.innerHTML.replace('{var}',ThirdValue);
}
<ul class="tab">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the {var} city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of {var}.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of {var}.</p>
</div>