Javascript stopped working after switching to another display [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Each time I change displays within one HTML file JS stops working (I've tried to replace HTML onclick call with JS function, but it's still the same)
UPD: Sorry for bad explanation. The problem is that if I move from the main display of this site by clicking links on nav panel (e.g. from #main to #contacts or #cart) JS script stops responding on burger icon click (clicking on burger nav panel for screen max-width of 800px doing nothing)
Code:
const burger = document.querySelector('.burger i');
const nav = document.querySelector('.nav');
function toggleNav() {
burger.classList.toggle('fa-bars');
burger.classList.toggle('fa-times');
nav.classList.toggle('nav-active');
}
burger.addEventListener('click', function() {
toggleNav();
});
html,
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: space-around;
background: #ffffff;
color: #343434;
border-bottom: 1px solid #343434;
border-top: 1px solid #343434;
}
.logo {
letter-spacing: 3px;
}
.nav {
display: flex;
justify-content: space-around;
width: 30%;
}
.navlink {
list-style: none;
margin: 0;
}
.navlink a {
color: #343434;
text-decoration: none;
font-size: 1.2em;
}
.burger {
font-size: 1.2em;
display: none;
}
#media screen and (max-width: 800px) {
.burger {
display: block;
}
.nav {
margin: 0;
background: #ffffff;
position: absolute;
right: -100%;
top: 70px;
width: 50%;
height: calc(100% - 70px);
flex-direction: column;
justify-content: space-around;
padding: 0;
transition: all 400ms;
}
.navlink {
text-align: center;
}
.nav-active {
right: 0;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="./site.css">
<script src="site.js" type="javascript"></script>
<title>Атлас</title>
</head>
<body>
<div id="main" style="display:block">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('main').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="contacts" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('contacts').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="delivery" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('about').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
</header>
</div>
<div id="cart" style="display:none">
<header class="header">
<img class="logo" src="logo.png" alt="Атлас - мы волокем в оптоволокне!" onclick="document.getElementById('cart').style.display='none'; document.getElementById('main').style.display='block';">
<ul class="nav">
<li class="navlink">Контакты
</li>
<li class="navlink">Доставка
</li>
<li class="navlink">Корзина
</li>
</ul>
<div class="burger">
<i class="fas fa-bars"></i>
</div>
<script src="./site.js"></script>
</header>
</div>
<div id="payment" style="display:none">
</div>
<script src="./site.js"></script>
</body>
</html>


The problem is that you have several .burger in your HTML and you only define a Javascript event for the very first one. You could remedy this via:
const burgers = document.querySelectorAll('.burger i');
and
for (let burger of burgers) {
//define your event
}
but it's not the best approach. The very best thing that you could do is to refactor your HTML and have a single item with the .burger class, but with more reliable event.

Related

My hamburger menu isn't displaying correctly

Hello I'm working on a frontend mentor challenge and encountered a bug when I click my hamburger menu it seems to remove the middle bar, my intentions were to make an X appear and have the li's come easing in from the left, can anyone tell me what I did wrong? I'm teaching myself how to develop and maintain sites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Angel News</title>
</head>
<body>
<div id="con">
<nav class="navbar">
W.
<ul class="nav-menu">
<li class="nav-menu">
Home
</li>
<li class="nav-menu">
News
</li>
<li class="nav-menu">
Popular
</li>
<li class="nav-menu">
Trending
</li>
<li class="nav-menu">
Catergories
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<div class="section1">
<img src="" alt="">
<h2 class="section1-h2">The Bright Future of Web 3.0?</h2>
<p class="section1-p">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling it's promise?</p>
Read More
</div>
<div class="section2">
<div class="section2-inside">
<h3 class="section2-h3">New</h3>
<div class="insidesection2-1">
<h4>Hydrogen VS Electric Cars</h4>
<p>Will hydrogen-fueled cars ever catch up to EV's?</p>
</div>
<div class="insidesection2-2">
<h4>The Downsides og AI Artistry</h4>
<p>What are the possible adverse effects of on-demand AI image generation?</p>
</div>
<div class="insidesection2-3">
<h4>Is VC Funding Drying Up?</h4>
<p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
</div>
</div>
</div>
<div class="section3">
<div class="section3-1">
<img src="" alt="">
<div class="insidesection3-1">
<h4 class="insidesection3-1-h4">01</h4>
<h5 class="insidesection3-1-h5">Reviving Retro PCs</h5>
<p>What happens when old PCs are given modern upgrades?</p>
</div>
</div>
<div class="section3-2">
<img src="" alt="">
<div class="insidesection3-2">
<h4 class="insidesection3-2-h4">02</h4>
<h5 class="insidesection3-2-h5">Top 10 Laptops of 2023</h5>
<p>Our best picks for various needs and budgets.</p>
</div>
</div>
<div class="section3-3">
<img src="" alt="">
<div class="insidesection3-3">
<h4 class="insidesection3-3-h4">03</h4>
<h5 class="insidesection3-3-h5">The Growth of Gaming</h5>
<p>How the pandemic has sparked fresh opportunities.</p>
</div>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-branding {
font-size: 2rem;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
color: hsl(35deg, 77%, 62%);
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 768px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: rotateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: rotateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
width: 100%;
background-color: black;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu.active {
left: 0;
}
}
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active')
navMenu.classList.toggle('active')
})

Please try to use translateY instead of RotateY in your css #media tag as follows:
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

Add active class to menu li on scrolling through section in div

In the below set of code basd on selecting the .help-menu elements on left .help-descr div navigated to particular section .
Similarly on scrolling the .help-descr div I want to add active class selection to appropriate .help-menu elements
This what I have tried:
Its something similar to the attached link Add Menu Active Class when scrolling to div I am not able to replicate same approach here
help.js
// on load of page
$(function() {
$('.backend-feature li :first').addClass('active');
$('.backend-head').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $('.backend-feature li :first').text() + '</span');
});
//on click of backend feature menu
$(".backend-feature-li").on('click', function() {
$('.frontend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.frontend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.backend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
// on click of frontend feature menu
$(".frontend-feature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
//on click of frontend other features menu
$(".front-otherfeature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.frontend-feature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$('.frontother-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span>Other Features</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/style.css">
<link src="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" src_type="url" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./vendors/css/ionicons.min.css">
<script defer src="./js/help_page.js"></script>
<title>Revive</title>
</head>
<body>
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>
</body>
</html>

If you put an IntersectionObserver on each of the main sections the system will tell you when it comes into view or goes out of view.
Then you can add or remove the active class from the related link in the menu.
This snippet gives a demo but it had to shorten the overall length of the menu area just so we got to see the content below and it also fixed it otherwise it scrolled up and the effect of adding the active class couldn't be seen as the menu item was off the screen.
To make it obvious which section(s) are in view a lime background has been put on the link.
Note, there is some thought needed on what 'active' actually means since more than one section can be in the viewport at once. This snippet does not attempt to tackle that - it's ouside the scope of this question.
The snippet needs to be viewed full page.
const callback = (entries, observer) => {
entries.forEach(entry => {
const id = entry.target.id;
const el = document.body.querySelector('[href="#' + id + '"]');
if (entry.isIntersecting) {
el.classList.add('active');
} else {
el.classList.remove('active');
}
});
};
const sections = document.querySelectorAll('.main-section');
const options = {
threshold: 0.33
};
const observer = new IntersectionObserver(callback, options);
sections.forEach(section => {
observer.observe(section);
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
height: 30vh;
/* changed for demo so we can see stuff */
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
background-color: lime;
/* ADDED JUST FOR DEMO */
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<div style="position: fixed; z-index: 1;">
<!-- added just for demo -->
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--ADDED -->
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>

How do I format chat app to show ellipses for the side bar, and keep each div highlighted after being clicked?

I'm building an HTML chat app template, and I ran into two major issues when trying to complete it.
The chat names on the side are not showing ellipses despite me using text-overflow: ellipse;
When anyone of the chats are clicked, I would like them to stay on an active color until I click on another one, but I'm not sure how to go about it.
Here's my HTML and CSS:
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active{
background-color:rgb(122, 184, 235);
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
What should I do? Thanks.

You probably have to use javascript to achieve this. The default functioning for the :active state is to snap back to the :hover state as soon as you click and release the mouse button.
.sidebar > .group-chats > div:active {
background-color: red;
}
If you remove the :hover state you'll make it stay red, but it's as far as I am concerned impossible to keep :active as long as :hover immediately takes over once the click is finished.
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active,
.sidebar > .group-chats > div:focus {
background-color: red;
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
Edit: Forgot your ellipsis question. For this to work your element has to have a width. However, I am not able to solve it, your markup and css are confusing and adding width to what I think is the correct element doesn't work.
Edit 2: You could try a JS solution like this to make the active background color stick when you click the chat room divs. I have simplified. You can change this to use the container class that you already have and just add a unique class to all the divs inside of it that you want to make work with this JS:
const container = document.querySelector('.container')
const activeState = (e) => {
document.querySelectorAll('.active-color').forEach(link => link.classList.remove('clicked-color'))
if (e.target.className.toLowerCase() === 'active-color' )
e.target.classList.add('clicked-color')
}
container.addEventListener('click', (e) => {
activeState(e)
})
div.active-color {
padding: 2rem;
width: 300px;
background: #ddd;
margin: 1rem 0;
border-radius: 6px;
}
div.active-color:hover,
div.active-color:focus {
background: purple;
cursor: pointer;
}
div.active-color:active {
background: red;
}
div.active-color.clicked-color {
background: red;
}
<div class="container">
<div class="active-color">DIV 1</div>
<div class="active-color">DIV 2</div>
<div class="active-color">DIV 3</div>
<div class="active-color">DIV 4</div>
</div>

Some things in media queries are not working

I need to do a 'display: none' in a media query but for some unknown reason it is not working. I tried all the ways, with min-width, with max-width, adding a to it but it still doesn't work. Can somebody help me? Thanks
HTML
<div class="navbar">
<h2>THE BARBER AK-47</h2>
<nav class="flexContainer container">
<ul class="menu">
<div class="logoAndMenuContainer"><img src="../images/kisspng-the-barber-shop-shaving-logo-barbershop-5adbe80e82a4b8.5084346115243612305351.png" alt="" class="logo">
<div class="liContainer">
<li> La barbería</li>
<li>Servicios</li>
<li>Trabajos</li>
<li>Equipo</li>
<li>Ubicación y horarios</li>
<li>Comentarios</li>
<li>Publicaciones</li>
<div class="closeMenu"><i class="fa fa-times"></i></div>
<span class="icons"><i class="fab fa-instagram"></i></span>
<span class="icons"><i class="fab fa-whatsapp"></i></span>
</div>
</div>
</ul>
<div class="visibleIcons">
<span class="iconsOfVisibleIcons"><i class="fab fa-instagram"></i></span>
<span class="iconsOfVisibleIcons"><i class="fab fa-whatsapp"></i></span>
</div>
</nav>
</div>
CSS
#media(min-width:800px) {
.navbar h2 {
display: none;
}
}
.navbar h2 {
color: #BC9668;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
margin-top: 40px;
font-family: 'Newsreader', serif;
font-weight: 300;
letter-spacing: 5px;
}
Pictures
mobile
desktop

Try this syntax instead...
#media screen and (min-width:800px){
.navbar h2 { display: none !important; }
}

I want to make my section(contents 1~4) swap when I click each navigation elements. [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>

Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)

You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.

Categories

Resources