If I use alert command (jQuery) in tab and if am in other tab then when the alert pops that tab starts blinking.
However I wanted a custom dialog box, so I created one. The problem is when I used the custom dialog box the tab is not getting highlighted.
$(document).ready(function() {
var dialog = $('#window');
$('#exit').click(function() {
dialog.hide();
});
$('#snooze').click(function() {
var selected = $('#dropdown :selected').val();
dialog.hide();
setTimeout(function() {
dialog.show();
}, selected * 1000);
});
$('#show').click(function() {
dialog.show();
});
});
#exit {
padding: 4px 8px;
}
#window {
width: 400px;
height: 150px;
position: absolute;
margin: auto;
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
/*background: linear-gradient(top, #ffffff 0%, #93d2ed 73%);*/
border: 1px solid gray;
font-family: sans-serif;
/* padding: 5px 10px 20px 20px;*/
}
#snoozetimer {
border: 1px solid grey;
padding: 2px 2px 4px 4px
}
#head {
background: #76DBEA;
display: block;
padding: 5px 10px 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="window">
<span id="head">Time out alert</span>
<h3 style="padding:0px 5px">
<p>Please Submit Time In !</p>
</h3>
<span><img src="alarm.gif" alt="image" style="position:absolute;right:10%;top:25%;display:inline-block; width=50px;height:50px;"></img></span>
<button id="exit">Close </button>
<span id="snoozetimer">
<select id="dropdown">
<option value="5">5-Minutes</option>
<option value="10">10-Minutes</option>
<option value="15">15-Minutes</option>
<option value="20">20-Minutes</option>
<option value="25">25-Minutes</option>
<option value="30">30-Minutes</option>
</select>
<button id="snooze">Snooze </button>
</span>
</div>
**I have a ASP.net project i need pass some value to master page so that the alert dialog pops up after a certain time by click certain event on the page ,if the user is in other tab of same project,can i pop up alert dialog on the currently active tab , otherwise on contrary if the tab gets hightlighted on which it is clikced after certain time its fine, if i use predefined alert from jquery its working as i wanted but if i use custum created dialog pop up its doenot have the power of the real alert box IF anyone knows any solution pls tell me
**
I created Tabs using w3school code and try to answer your scenario.
i believe you can use this simple approach easily.Here I attached whole code of it.
After you snooze the clock after its expire tab 1 will be highlighted even if you were at any tab at that moment.
function openCity(evt, tab) {
// 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(tab).style.display = "block";
evt.currentTarget.className += " active";
}
var dialog = $('#window');
$('#exit').click(function() {
dialog.hide();
});
$('#snooze').click(function() {
var selected = $('#dropdown :selected').val();
dialog.hide();
setTimeout(function() {
var tablinks1 = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks1.length; i++) {
if (tablinks1[i].className === 'tablinks tab1') {
tablinks1[i].className = "tablinks tab1 active";
} else {
tablinks1[i].className = tablinks1[i].className.replace(" active", "");
}
}
dialog.show();
}, selected * 1000);
});
$('#show').click(function() {
var tablinks1 = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks1.length; i++) {
if (tablinks1[i].className === 'tablinks tab1') {
tablinks1[i].className = "tablinks tab1 active";
} else {
tablinks1[i].className = tablinks1[i].className.replace(" active", "");
}
}
dialog.show();
});
#exit {
padding: 4px 8px;
}
#window {
width: 400px;
height: 150px;
position: absolute;
margin: auto;
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
/*background: linear-gradient(top, #ffffff 0%, #93d2ed 73%);*/
border: 1px solid gray;
font-family: sans-serif;
/* padding: 5px 10px 20px 20px;*/
}
#snoozetimer {
border: 1px solid grey;
padding: 2px 2px 4px 4px
}
#head {
background: #76DBEA;
display: block;
padding: 5px 10px 5px 10px;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<button id="show">show </button>
<div class="tab">
<button class="tablinks tab1" onclick="openCity(event, 'Tab1')">Tab1</button>
<button class="tablinks tab2" onclick="openCity(event, 'Tab2')">Tab2</button>
<button class="tablinks tab3" onclick="openCity(event, 'Tab3')">Tab3</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>Tab1</h3>
<div id="window">
<span id="head">Time out alert</span>
<h3 style="padding:0px 5px">
<p>Please Submit Time In !</p>
</h3>
<span><img src="alarm.gif" alt="image" style="position:absolute;right:10%;top:25%;display:inline-block; width=50px;height:50px;"></img></span>
<button id="exit">Close </button>
<span id="snoozetimer">
<select id="dropdown">
<option value="5">5-Minutes</option>
<option value="10">10-Minutes</option>
<option value="15">15-Minutes</option>
<option value="20">20-Minutes</option>
<option value="25">25-Minutes</option>
<option value="30">30-Minutes</option>
</select>
<button id="snooze">Snooze </button>
</span>
</div>
</div>
<div id="Tab2" class="tabcontent">
<h3>Tab2</h3>
</div>
<div id="Tab3" class="tabcontent">
<h3>Tab3</h3>
</div>
</body>
</html>
There may be several ways to do your problem.but this is quite easy :)
Cheers.
Related
I have a navigation bar with multiple drop downs. So when I click on the first link it opens the drop down, but when I click on the second link, the first drop down doesn't close. (so I want to close the drop down menu if the user clicks on second link)
// main.js (javascript file)
function myFunction() {
var x = document.getElementById("myTopnav1");
if (x.className === "topnav1") {
x.className += " responsive1";
} else {
x.className = "topnav1";
}
}
function toggleDropDown(myid) {
var element = document.getElementById(myid);
element.classList.toggle("mystyle");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle')) {
openDropdown.classList.remove('mystyle');
}
}
}
}
/* style.css (css file - css is all correct if anything you think is not added i only need help with javascript) */
.topnav1 {
background-color: blue !important;
}
/* Style the links inside the navigation bar */
.topnav1 a {
float: left;
display: block;
color: black;
text-align: center;
padding: 4px 8px;
text-decoration: none;
font-size: 10px;
border-bottom: 1px solid #FDFDFD;
}
.topnav-right1 {
float: right;
}
#media only screen and (max-width:768px) {
.topnav-right1 {
float: left;
}
}
.para-active {
background-color: #4F7ADA !important;
color: black !important;
}
.para-active button {
color: white !important;
}
/* Add an active class to highlight the current page */
.active1 {
color: black !important;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav1 .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown1 {
float: left;
overflow: hidden;
background-color: #f1f1f1;
border-bottom: 1px solid #E3E3E3;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown1 .dropbtn1 {
font-size: 10px;
border: none;
outline: none;
color: black;
padding: 4px 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
border-bottom: 1px solid #FDFDFD;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 96px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.mystyle {
display: block;
}
<div class="topnav1" id="myTopnav1">
<div class="dropdown1">
<button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1">Meters
</button>
<div class="dropdown-content1" id="div_em">
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1">Inverters
</button>
<div class="dropdown-content1" id="div_inv">
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1">Inverter Manager
</button>
<div class="dropdown-content1" id="div_inm">
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1">Sensors
</button>
<div class="dropdown-content1" id="div_ws">
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1">SMUs
</button>
<div class="dropdown-content1" id="div_smu">
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label> </div>
</div>
☰
</div>
If you want to do the functionality with JavaScript, you have to use ids in order to close the other dropdowns, once a new one is open.
So, the solution I've worked on is creating a new method closeMenus, which will close the other dropdowns once you execute toggleDropDown.
function myFunction() {
var x = document.getElementById("myTopnav1");
if (x.className === "topnav1") {
x.className += " responsive1";
} else {
x.className = "topnav1";
}
}
function toggleDropDown(myid) {
closeMenus(myid);
var element = document.getElementById(myid);
element.classList.toggle("mystyle");
}
function closeMenus(currentId) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle') && openDropdown.id !== currentId) {
openDropdown.classList.remove('mystyle');
}
}
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
closeMenus();
}
}
.topnav1 {
background-color: blue !important;
}
/* Style the links inside the navigation bar */
.topnav1 a {
float: left;
display: block;
color: black;
text-align: center;
padding: 4px 8px;
text-decoration: none;
font-size: 10px;
border-bottom: 1px solid #FDFDFD;
}
.topnav-right1 {
float: right;
}
#media only screen and (max-width:768px) {
.topnav-right1 {
float: left;
}
}
.para-active {
background-color: #4F7ADA !important;
color: black !important;
}
.para-active button {
color: white !important;
}
/* Add an active class to highlight the current page */
.active1 {
color: black !important;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav1 .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown1 {
float: left;
overflow: hidden;
background-color: #f1f1f1;
border-bottom: 1px solid #E3E3E3;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown1 .dropbtn1 {
font-size: 10px;
border: none;
outline: none;
color: black;
padding: 4px 8px;
background-color: inherit;
font-family: inherit;
margin: 0;
border-bottom: 1px solid #FDFDFD;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content1 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 96px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.mystyle {
display: block;
}
<div class="topnav1" id="myTopnav1">
<div class="dropdown1">
<button style="display: none;" id="btn_em" onclick="toggleDropDown('div_em')" class="dropbtn1">Meters
</button>
<div class="dropdown-content1" id="div_em">
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
<label class="dropnav-container">one</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inv" onclick="toggleDropDown('div_inv')" class="dropbtn1">Inverters
</button>
<div class="dropdown-content1" id="div_inv">
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
<label class="dropnav-container">two</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_inm" onclick="toggleDropDown('div_inm')" class="dropbtn1">Inverter Manager
</button>
<div class="dropdown-content1" id="div_inm">
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
<label class="dropnav-container">three</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_ws" onclick="toggleDropDown('div_ws')" class="dropbtn1">Sensors
</button>
<div class="dropdown-content1" id="div_ws">
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
<label class="dropnav-container">four</label>
</div>
</div>
<div class="dropdown1">
<button id="btn_smu" onclick="toggleDropDown('div_smu')" class="dropbtn1">SMUs
</button>
<div class="dropdown-content1" id="div_smu">
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label>
<label class="dropnav-container">five</label> </div>
</div>
☰
</div>
I assume that your mystyle class makes the dropdown active.
Then you can do something like this
// Get all the dropdowns
var dropdowns = document.getElementByClassName(".dropdown1")
// When clicked on dropdown this function will fire
var callThisFunction = function (e) {
// Check the event
e = e || window.event;
// Get the target element
let target = e.target || e.srcElement;
// Close all dropdowns
let activeDropdowns = document.getElementsByClassName("mystyle");
activeDropdowns.forEach(function (openDropdown) {
openDropdown.classList.remove('mystyle');
})
// Make the current dropdown active
target.className += 'mystyle'
}
// This adds click event listener to all dropdowns and tells it to fire callThisFunction when clicked
dropdowns.forEach(function (dropdown) {
dropdown[i].addEventListener('click', callThisFunction, false);
})
I suggest you use JQUERY (CDN BELOW)
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js
Jquery is super fast and helpful
because your problem will be solved like this in jquery.
$('.yourdropdownsclass').on('click', function(){
var target = $(this).attr('id');
$("#"+target).show().siblings("div").hide();
});
.yourdropdownclass
is class of your dropdowns
$(this).attr('id')
this is getting the ids of another dropdowns.
$("#"+target).show().siblings("div").hide();
"target" is the name of ids of other dropdowns and storing it to variable and showing it and hiding another sibling's dropdowns.
I hope it will help you!
I am a newbie to code and I am learning vanilla JS. I created this drawer navigation with a circle that moves from left tor right, but there is an issue. I uploaded the current state here: http://setup.industries/masquarade/
The issue that gets me stuck:
The first click on the hamburger nav icon doesn't open the drawer and the animation is switched. I suspect the problem to be in the if(open) as the open var doesn't truly capture the toggle state with open = header.style.width == '0%' After the initial bug, it works fine. A real head scratcher for me.
If you have other tips for better code, or point out my bad practices, I'd be happy to learn.
--
Edit 1: I have added the full code to this question. I am not sure how I can make the ellipse visible, i linked directly to hosted url.
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.style.width == '0%'
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0px)' },
{ transform: 'translateX('+ width + 'px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: 'translateX('+ width + 'px)' },
{ transform: 'translateX(0px)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
header.style.width = "100%";
moveEllipseRight();
} else {
header.style.width = '0%';
moveEllipseLeft();
}
}
// if (open) {
// ellipse.classList.remove("ellipse_left");
// ellipse.classList.add("ellipse_right");
// } else {
// ellipse.classList.remove("ellipse_right");
// ellipse.classList.add("ellipse_left");
// }
// let ellipse = document.getElementById("ellipse");
// let pos = 0;
// let id = setInterval(frame, 5);
// function myMove() {
// console.log('Hello')
// var ellipse = document.getElementById("ellipse");
// var pos = -200;
// var id = setInterval(frame, 1);
// let width = document.body.clientWidth; // - $('#mydiv').width();
//
// function frame() {
// if (pos == width - 200) {
// clearInterval(id);
// } else {
// pos++;
// ellipse.style.left = pos + "px";
// }
// }
// }
// information tabs //
function openTab(evt, tab) {
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(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
#media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')">Tickets and pricing </li>
<li class="tablinks" onmouseover="openTab(event, 'Location')">Location</li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')">Transportation</li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')">House rules</li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')">Terms and conditions</li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')">Contact</li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')">Partners</li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
Buy Tickets
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
Buy Tickets
More Information
</div>
</div>
</body>
</html>
The value for element.style is set by using either javascript or inline style attribute, css will not set the value for you. Therefore, if you are using a css to style the header's width, the value for header.style.width would be an empty string initially, making the expression header.style.width == '0%' to be falsy.
You can add a console.log(document.getElementById('header').style.width) to check the value yourself.
As a result, the first time you click the hamburger, the else block in the conditional will always be ran.
After the first time you click the hamburger, document.getElementById('header').style.width is now being set through javascript, so the subsequent clicks will behave as expected.
To solve the problem, you can either use an inline style attribute to style your header's width, or you can get the style using javascript with
const headerWidth = getComputedStyle(document.getElementById('header')).width;
const open = headerWidth === '0px' || headerWidth === '0%';
You had your open logic reversed. Simply changing the order of 100% / 0% fixes this.
Improvement tips:
checking the elements state by using a class instead of the actual CSS. (Adding an open class to the element when it is open, and removing it when it is not open)
By doing the above, you can move the manipulation of width to the CSS class open: header.open {width: 100%}
By using "`" and encapsulating your variables in ${} you can get rid of many "+" like so: { transform: `translateX(${width}px)` }
Can be seen in the snippet:
// open sidenav //
function openNav() {
let header = document.getElementById("header");
let open = header.className.includes('open')
let width = document.body.clientWidth;
var ellipse = document.getElementById("ellipse");
function moveEllipseRight() {
ellipse.animate([
// keyframes
{ transform: 'translateX(0)' },
{ transform: `translateX(${width}px)` }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
function moveEllipseLeft() {
ellipse.animate([
// keyframes
{ transform: `translateX(${width}px)` },
{ transform: 'translateX(0)' }
], {
// timing options
duration: 500,
iterations: 1,
easing: 'ease-in-out',
fill: 'forwards'
});}
// open sidenav //
if (open) {
moveEllipseLeft();
header.classList.remove("open");
} else {
moveEllipseRight();
header.classList.add("open");
}
}
// information tabs //
function openTab(evt, tab) {
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(tab).style.display = "block";
evt.currentTarget.className += " active";
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
body {
background: black;
color: white;
font-family: 'Helvetica Neue', sans-serif;
font-size: 1.2em;
line-height: 1.4em;
}
a {
color: white;
}
.clear {
clear: both; float: none; height: 40px;
}
/* Ellipse */
#ellipse {
position: absolute;
top: 120px;
z-index:99;
animation: 3s linear 0s slide 1;
left: -200px;
}
/*
.ellipse_left {left: -200px;}
.ellipse_right {right: -200px;}
*/
/* Masquarede Logo */
img.masquarade_events {
opacity: 0.3;
position: absolute;
bottom: 20px;
right: 20px;
}
img.masquarade_events:hover {
opacity: 0.9;
}
/* Content */
.content {
margin: 150px 0 0 300px;
width: 700px;
height: 400px;
}
#media screen and (max-width: 992px) {
.content {
margin: 150px 0 0 0;
width: 700px;
height: 400px;
}
}
.date {
font-weight: bold;
margin-bottom: -10px;
}
.location {
}
ul.lineup {
list-style-position: inside;
padding: 0;
list-style-type: none;
width: 100%
overflow: hidden;
margin-bottom: 100px;
}
ul.lineup li {
margin-right: 50px;
line-height: 2.5em;
float: left;
}
/* Buttons */
a.button {
margin-right: 10px;
padding: 10px 50px 10px 50px;
text-decoration: none;
border-radius: 200px;
font-size: 0.7em;
transition: 0.3s;
}
a.white {
background: white;
color: black;
}
a.white:hover {
color: white;
background: #D90E46;
}
a.black {
border: 2px white solid;
color: white;
}
a.black:hover {
border: 2px #FCF454 solid;
color: #FCF454;
}
/* Header */
header {
position: absolute;
background-color: black;
top:0;
left:0;
width: 0;
height: 100%;
z-index: 1;
}
/* Header animation css */
header.open {
width: 100%;
}
/* Navigation */
header nav {
position: absolute;
top: 100px;
right:300px;
}
nav ul {
list-style-position: inside;
width: 400px;
padding: 0;
list-style-type: none;
font-size: 1em;
}
nav ul li{
border-bottom: 1px solid white;
padding: 10px 0 10px 0;
}
nav ul li:hover{
font-weight: bold;
padding: 10px 0 10px 10px;
}
li.active {
font-weight: bold;
}
nav ul li:first-child{
/* border-top: 1px solid white;*/
}
nav ul li a{
text-decoration: none;
}
nav ul h2{
margin-bottom: 10px;
}
.tabcontent {
display: none;
}
/* Header Icon */
img.icon {
position: absolute;
z-index: 999;
top:60px;
right:70px;
}
/* Display */
.display {
width: 400px;
height: 400px;
position: absolute;
top: 100px;
right:750px;
}
.display p {
margin:0 30px 30px 0;
}
<!doctype html>
<html lang="en">
<head>
<!-- SETUP Industries - FUNCTIONAL DESIGN -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel="shortcut icon" type="image/png" href="favicon.png"/> -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css?family=Heebo:400,700,900" rel="stylesheet">
<!-- JS -->
<script src="assets/javascript.js"></script>
<title>Masquarade Classix 2019</title>
</head>
<body>
<!-- Navigation -->
<!-- Icon -->
<img onclick="openNav()"id="icon" src="http://setup.industries/masquarade/assets/icon.svg" class="icon" width="40" alt="Expand Navigation" />
<header id="header">
<nav>
<ul>
<h2>Information</h2>
<li class="tablinks" onmouseover="openTab(event, 'Tickets')">Tickets and pricing </li>
<li class="tablinks" onmouseover="openTab(event, 'Location')">Location</li>
<li class="tablinks" onmouseover="openTab(event, 'Transportation')">Transportation</li>
<li class="tablinks" onmouseover="openTab(event, 'Amenities')"><a href="#">Ameneties</li>
<li class="tablinks" onmouseover="openTab(event, 'HouseRules')">House rules</li>
<li class="tablinks" onmouseover="openTab(event, 'TermsAndConditions')">Terms and conditions</li>
<li class="tablinks" onmouseover="openTab(event, 'Contact')">Contact</li>
<li class="tablinks" onmouseover="openTab(event, 'Partners')">Partners</li>
</ul>
</nav>
<div class="display">
<div id="Tickets" class="tabcontent">
<h2>Tickets and pricing</h2>
<p>Saturday day tickets cost 45 EUR incl. service costs and 21% BTW. You can buy tickets online via the button below or at one of the resellers listed below.</p>
Buy Tickets
<br><br>
<p style="font-size:0.8em;"> <strong>Paperpoint</strong><br>
3930 Hamont-achel<br><br>
<strong>Dag en nachtwinkel </strong><br>
3900 Overpelt<br><br>
<strong>VDM bvba, Q8 tankstation</strong> <br>
Peer<br><br>
<strong>Frituur De Kromme Draai</strong> <br>
Eksel<br><br>
<strong>’t frituurke</strong> <br>
Haag 22, 3910 Achel<br></p>
</div>
<div id="Location" class="tabcontent">
<h2>Location</h2>
</div>
<div id="Transportation" class="tabcontent">
<h2>Transportation</h2>
</div>
<div id="Amenities" class="tabcontent">
<h2>Amenities</h2>
</div>
<div id="HouseRules" class="tabcontent">
<h2>House Rules</h2>
</div>
<div id="TermsAndConditions" class="tabcontent">
<h2>Terms And Conditions</h2>
</div>
<div id="Contact" class="tabcontent">
<h2>Contact</h2>
</div>
<div id="Partners" class="tabcontent">
<h2>Partners</h2>
</div>
</div>
</header>
<!-- Navigation End -->
<div class="container">
<div id="ellipse" class="ellipse_left">
<img src="assets/ellipse.svg" alt="ellipse" width="400" height="400"/>
</div>
<img class="masquarade_events" src="assets/masquarade_events.png" alt="Masquarade Events" width="125" height=""/>
<div class="content">
<p class="date">25 mei 2019</p>
<p class="location">Hennemeeuwis Neerpelt</p>
<h1>Masquarade Classix </h1>
<ul class="lineup">
<li>Nina Kraviz</li>
<li>Recondite</li>
<li>Mind Against</li>
<li>Âme</li>
<li>Vince Watson</li>
<li>Kölsch</li>
<li>Rodriguez Jr. </li>
<li></li>
</ul>
<div class="clear"></div>
Buy Tickets
More Information
</div>
</div>
</body>
</html>
I am struggling to find a simple solution to create an div-navigation like this:
https://www.bueromoebel-experte.de/
The div with image on the right changes on hover of the left menu (and keeps the div, even if you go somewhere else with your mouse). But the left menu itself, when its clicked is linking to another page.
Must be sth like:
<ul>
<li> <a id="link1" href="example.de/abc" target="_blank">example 1</a></li>
<li> <a id="link2" href="example.de/def" target="_blank">example 2</a></li>
<li> <a id="link3" href="example.de/ghi" target="_blank">example 3</a></li>
</ul>
<div id="example1" class="hide"> Image, Text and Button</div>
<div id="example2" class="hide"> Image, Text and Button</div>
<div id="example3" class="hide"> Image, Text and Button</div>
CSS
.hide {
position: absolute;
}
#example1 {
z-index: 50;
}
#example3, #example2 {
z-index: 10;
}
JS
$("HOVEREDLINK").hover(function() {
$("HOVEREDLINK").css("z-index","70")
$("ALLOTHERIDS").css("z-index","50")
});
As a beginner I am not quite sure how to do so or if it is a good solution. I would be really gratefull if you guys could help me. Thank you very much!
Try something like 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";
evt.currentTarget.className += " active";
}
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
<!DOCTYPE html>
<html>
<body>
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')" id="defaultOpen">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>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
</div>
<script>
document.getElementById("defaultOpen").onmouseover();
</script>
</body>
</html>
Just learing JS. I have created 3 dropdown menu with different choices and added JS function. HTML and CSS seems to be right. I am concerned about my JS, because it just does not work. Is the even right for that purpose? I am not sure if I use ".this" in the right place.
I would really appreciate any hints!
my JAVASCRIPT:
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
var arrow= document.querySelectorAll(".list_arrow");
var panel= document.querySelectorAll(".list_panel");
for (var i= 0; i < arrow.length; i++) {
arrow[i].addEventListener('click', function showDiv(event) {
if (panel.this.style.display == 'none') { //panel(this.style.display=='none')?
panel.this.style.display = 'block';
}
else {
panel.this.style.display = 'none';
}
});
}
});
HERE IS MY CSS
.form {
margin-top:50px;
}
.drop_down_list {
border:1px solid #8de0d2;
width: 280px;
height:38px;
background-color: white;
margin-top:22px;
padding: 8px 12px;
position: relative;
}
.list_label {
font-size: 30px;
color: #e2e2e2;
font-family: 'ralewaylight', Arial, Tahoma, sans-serif;
}
.list_arrow {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #24baa0;
display:block;
position: absolute;
right: 14px;
top: 20px;
cursor: pointer;
}
.list_panel {
background-color: white;
border: 1px solid #ccc;
width: 288px;
padding-left: 15px;
padding-bottom: 10px;
list-style: none;
margin: 0;
left: 0px;
z-index: 2;
position: absolute;
top: 54px;
display:none;
}
.list_panel li {
margin-top:10px;
cursor: pointer;
color: #585858;
}
<div class="form">
<div class="drop_down_list">
<span class="list_label">Choose a chair</span>
<span class="list_arrow"></span>
<ul class="list_panel">
<li>Clair</li>
<li>Margarita</li>
<li>Selena</li>
</ul>
</div>
</div>
<div class="drop_down_list">
<span class="list_label">Choose color</span>
<span class="list_arrow"></span>
<ul class="list_panel">
<li>red</li>
<li>black</li>
<li>orange</li>
</ul>
</div>
<div class="drop_down_list">
<span class="list_label">Choose material</span>
<span class="list_arrow"></span>
<ul class="list_panel">
<li>a</li>
<li>b</li>
</ul>
</div>
</div>
The this keyword refers to the current scope. It is of no use in the state you are using it. What I suggest is to locate the list_panel that is associated with the clicked arrow. There are numerous ways to do that, but you can use the following:
Note that I also added default display-none classes so that they get shown on the first click (this wasn't the case).
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
var arrow= document.querySelectorAll(".list_arrow");
for (var i= 0; i < arrow.length; i++) {
arrow[i].addEventListener('click', function showDiv(event) {
// Find the panel associated with the clicked arrow.
var parent = event.target.parentNode,
currentPanel = parent.children[2];
if (currentPanel.style.display == 'none') {
currentPanel.style.display = 'block';
}
else {
currentPanel.style.display = 'none';
}
});
}
});</script>
.form {
margin-top:50px;
}
.drop_down_list {
border:1px solid #8de0d2;
width: 280px;
height:38px;
background-color: white;
margin-top:22px;
padding: 8px 12px;
position: relative;
}
.list_label {
font-size: 30px;
color: #e2e2e2;
font-family: 'ralewaylight', Arial, Tahoma, sans-serif;
}
.list_arrow {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #24baa0;
display:block;
position: absolute;
right: 14px;
top: 20px;
cursor: pointer;
}
.list_panel {
background-color: white;
border: 1px solid #ccc;
width: 288px;
padding-left: 15px;
padding-bottom: 10px;
list-style: none;
margin: 0;
left: 0px;
z-index: 2;
position: absolute;
top: 54px;
display:none;
}
.list_panel li {
margin-top:10px;
cursor: pointer;
color: #585858;
}
<div class="form">
<div class="drop_down_list">
<span class="list_label">Choose a chair</span>
<span class="list_arrow"></span>
<ul class="list_panel" style='display: none'>
<li>Clair</li>
<li>Margarita</li>
<li>Selena</li>
</ul>
</div>
</div>
<div class="drop_down_list">
<span class="list_label">Choose color</span>
<span class="list_arrow"></span>
<ul class="list_panel" style='display: none'>
<li>red</li>
<li>black</li>
<li>orange</li>
</ul>
</div>
<div class="drop_down_list">
<span class="list_label">Choose material</span>
<span class="list_arrow"></span>
<ul class="list_panel" style='display: none'>
<li>a</li>
<li>b</li>
</ul>
</div>
</div>
You may want to try using jQuery to help you with show() and hide() functions, though it is said that you might not need it :P
I don't understand the declaration of panel.. Thus I cannot go along panel.this. My solution is attached here:
http://codepen.io/anon/pen/akXqwA
The main problem is that, during the for-loop, the i will end at the value 3. When the event is triggered, i will always be 3, and I cannot access the panel with panel[i].
So I made a "hack" around it, by getting its nextElementSibling and changing its style.display. Also, I have initialised the value with the HTML (style="display: none;"). If you removed that part, the first click on the arrow will not show the items as the style.display value is not "none". There is a way to avoid changing that in HTML: try playing with the line ;)
Check this:
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
var arrow = document.querySelectorAll(".list_arrow");
var panel = document.querySelectorAll(".list_panel");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener('click', function showDiv(event) {
var ulelm = this.parentNode.querySelector("ul");
if (ulelm.style.display == 'none') {
ulelm.style.display = 'block';
} else {
ulelm.style.display = 'none';
}
});
}
});
working example is here.
I have the following code for a tab I am trying to create.
<style>
nav.tab {
margin: 0;
padding: 0;
display: block;
width: 150px;
overflow: hidden;
border: 1px solid #ccc;
background-color: black;
float: left;
}
#static {
margin-left: 200px;
}
/* Float the list items side by side*/
section.tab {float: left;}
/* Style the links inside the list items*/
nav.tab a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: Segoe UI;
}
/*Change background color of links on hover */
nav.tab a:hover {
background-color: purple;
color: white;
}
/* Create an active/current tablink class */
nav.tab a:focus, .active {
background-color: white;
color: purple;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
height: 700px;
width: 600px;
}
</style>
<nav class="tab">
Profile
Password
Tokyo
</nav>
<div id="static" class="container">
<div id="Profile" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Password" class="tabcontent">
<h4 style="font-family: Segoe UI; color: purple; padding: 15px 0 15px 0;">Change Password</h4>
<p id="label">Enter OLD Password</p><input type="password" id="field" size="25" name="oldpassword" required="required"><br/><br/>
<p id="label">Enter NEW Password</p><input type="password" id="field" size="25" name="newpassword" required="required"><br/><br/>
<p id="label">Enter NEW Password AGAIN</p><input type="password" id="field" size="25" name="newpassword2" required="required"><br/><br/>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
<script>
function openSetting(evt, settingName) {
var i, tabcontent, tablinks;
$('.tabcontent a:first').tab('show');
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(settingName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
I am trying to make the first tab show by default.
As of now, when the page loads none of the content for the tabs can be seen because of a 'display: none;' css value. But i need the first page to show on load.
Help me out please.
As I understand you need only to set class ".active" to the first tab.
Profile
And in js, when you handle click on tab do something like this:
$(nav.tab>a).removeClass('active');
Maybe you want to use jqueryui? Tabs are included there.
also bootstrap provides nice tabs:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tab&stacked=h
Try this solution --> https://css-tricks.com/css3-tabs/
Also try make a new class, for example class selected, and manage the selected tab (also the default selected tab) with that class and then, with JS add or remove that class.
See also this --> http://www.menucool.com/tabbed-content
See u!
Just fire that function with the desired params on document.ready:
openSetting(event, 'Profile');
openSetting(event, 'Profile');
function openSetting(evt, settingName) {
var i, tabcontent, tablinks;
//$('.tabcontent a:first').show();
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(settingName).style.display = "block";
evt.currentTarget.className += " active";
}
nav.tab {
margin: 0;
padding: 0;
display: block;
width: 150px;
overflow: hidden;
border: 1px solid #ccc;
background-color: black;
float: left;
}
#static {
margin-left: 200px;
}
/* Float the list items side by side*/
section.tab {
float: left;
}
/* Style the links inside the list items*/
nav.tab a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: Segoe UI;
}
/*Change background color of links on hover */
nav.tab a:hover {
background-color: purple;
color: white;
}
/* Create an active/current tablink class */
nav.tab a:focus,
.active {
background-color: white;
color: purple;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
height: 700px;
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="tab">
Profile
Password
Tokyo
</nav>
<div id="static" class="container">
<div id="Profile" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Password" class="tabcontent">
<h4 style="font-family: Segoe UI; color: purple; padding: 15px 0 15px 0;">Change Password</h4>
<p id="label">Enter OLD Password</p>
<input type="password" id="field" size="25" name="oldpassword" required="required">
<br/>
<br/>
<p id="label">Enter NEW Password</p>
<input type="password" id="field" size="25" name="newpassword" required="required">
<br/>
<br/>
<p id="label">Enter NEW Password AGAIN</p>
<input type="password" id="field" size="25" name="newpassword2" required="required">
<br/>
<br/>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
Assuming first tab to be shown as the default tab.
These are the changes
Profile
add this line after closing bracket of function openSetting.
document.getElementById("defaultOpen").click();