I have a test HTML file in which I toggle the class 'hide' with JavaScript but the content does not hide, I can't understand why, what can be done in order to get the content to toggle between hide/show.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.hide {
display: none;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
When you add the hide class, the element has two classes, and they both specify different display properties. The property from .content is taking precedence.
Make your selector more specific so it will take precedence, use .content.hide.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.content.hide {
display: none;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
Another possibility is to use !important in the .hide CSS to make it override other styles.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.hide {
display: none !important;
}
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
When you do toggle, the classes are being toggled this way:
"content"
and
"content hide"
Now, both content and hide set display property. When there's such conflict, the rule that is defined later (either within <style> or in a further stylesheet) takes precedence.
You could see #Barmar's answer which shows !important and .content.hide to force higher precedence.
Or you could just define .hide after .content which gives it higher precedence.
function init() {
let button = document.querySelector('#menubutton');
button.onclick = buttonClicked;
}
function buttonClicked(event) {
let content = document.querySelector('.content');
content.classList.toggle('hide');
}
window.addEventListener('load', init);
.menu {
position: relative;
}
.content {
display: flex;
flex-flow: column wrap;
border: 1px solid gray;
padding: 0.25rem;
position: absolute;
}
.hide {
display: none;
}
.color {
background-color: pink;
border: 1px solid gray;
width: 4rem;
height: 4rem;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="menu">
<div class="title">
<button id="menubutton">Toggle</button>
</div>
<div class="content">
Uno
Dos
Tres
Cuatro
Cinco
</div>
</div>
<div class="color"></div>
</body>
</html>
Related
I know we can prevent overflow of child content using CSS overflow property.
But the overflow: scroll property is not preventing overflow.
let zoomInElem = document.getElementById('zoomIn')
let zoomOutElem = document.getElementById('zoomOut')
let contentElement = document.getElementById('content')
zoomInElem.addEventListener('click', function () {
console.log('zoomIn')
contentElement.style.zoom = '200%'
})
zoomOutElem.addEventListener('click', function () {
console.log('zoomOut')
contentElement.style.zoom = '100%'
})
#main {
width: 640px;
height: 360px;
border: solid;
}
#content {
border: .1rem solid red;
overflow: scroll;
}
button {
margin: 1rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<style>
</style>
</head>
<body>
<div>
<button id="zoomIn">ZoomIn</button>
<button id="zoomOut">ZoomOut</button>
</div>
<div id="main">
<div id="content">
<h1>Hi</h1>
<h2>Hi</h2>
<h3>Hi</h3>
<h4>Hi</h4>
</div>
</div>
<script>
</script>
</body>
</html>
How can I prevent overflow on changing CSS zoom property by clicking ZoomIn button?
Try To Set overflow: scroll; on outer div
#main { position: relative;overflow: scroll;}
You can either define the width and height of #content, or set the overflow of #main to scroll.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<style>
#main {
width: 640px;
height: 360px;
border: solid;
overflow: scroll;
}
#content {
/*width: 100%;
height: 100%; */
border: .1rem solid red;
/* overflow: scroll; */
}
button {
margin: 1rem;
}
</style>
</head>
<body>
<div>
<button id="zoomIn">ZoomIn</button>
<button id="zoomOut">ZoomOut</button>
</div>
<div id="main">
<div id="content">
<h1>Hi</h1>
<h2>Hi</h2>
<h3>Hi</h3>
<h4>Hi</h4>
</div>
</div>
<script>
let zoomInElem = document.getElementById('zoomIn')
let zoomOutElem = document.getElementById('zoomOut')
let contentElement = document.getElementById('content')
zoomInElem.addEventListener('click', function () {
contentElement.style.zoom = '200%'
})
zoomOutElem.addEventListener('click', function () {
contentElement.style.zoom = '100%'
})
</script>
</body>
</html>
Hello I am new to HTML and CSS, and I was trying to display the contents of a div element when I hover over a li element. So basically what I am trying to do is when I hover over one li element (say: ls1), I want to display dv2. However, my code does not display the contents even when I hover over it. Please help!! Thank you.
const list_dv1 = document.querySelectorAll('.dv1 li');
function show_item() {
list_dv1.forEach((item) =>
item.classList.remove('hovered'));
this.classList.add('hovered');
}
list_dv1.forEach((item) =>
item.addEventListener('mouseover', show_item));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
position: relative;
background-color: black;
height: 100vh;
width: 100%;
}
.dv1 {
background-color: yellow;
cursor: pointer;
}
.dv1 li:hover {
transform: scale(1.2);
}
ul {
list-style-type: none;
display: flex;
}
li {
margin: 20px;
}
.dv2 {
background-color: greenyellow;
color: black;
}
.dv2 {
display: none;
}
.ls1:hover+.dv2 {
display: block;
}
.dv3 {
background-color: yellowgreen;
color: black;
}
<!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="stylesheet" href="styles.css">
<title>Practice Hiding Elements</title>
</head>
<body>
<div class="main">
<div class="dv1">
<ul>
<li class="ls1">Hover over me once</li>
<li class="ls2">Hover over me twice</li>
</ul>
</div>
<div class="dv2">You found me!</div>
<div class="dv3">You found me twice!</div>
</div>
</body>
</html>
I have created a hover effect like whenever you hover on the box you will see a circle (actually it is a div with position: absolute whose clip-path position is controlled by Javascript offset) and when this circle reaches the second paragraph element it jumps to the top.
So I wanna know why it's happening and how to make the circle move consistently throughout the box without giving a jerk or moving to the top.
Here is my code
let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")
secondDiv.addEventListener("mousemove",function(e){
secondDiv.style.setProperty("--x",e.offsetX + "px")
secondDiv.style.setProperty("--y",e.offsetY + "px")
//console.log(e.offsetX)
})
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container{
width:70%;
margin: 0 auto;
border:2px solid red;
height:150px;
position:relative;
background: #9F86C0;
color:white;
margin-top: 10%;
}
.container p{
font-size:2.3em;
}
.container .content{
position: absolute;
top:0;
left:0;
width: 100%;
height:150px;
padding:1em;
}
.container .content:nth-child(2){
background: #E0B1CB;
color:white;
clip-path:circle(50px at var(--x) var(--y))
}
<!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">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content check">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
<div class="content test">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
</div>
</body>
</html>
Since there are two paragraphs in place, the mouse movement triggers to choose the paragraph over the parent. You can choose to turn off the trigger using pointer-events: none on the paragraph elements.
let container = document.querySelector(".container")
let secondDiv = document.querySelector(".test")
container.addEventListener("mousemove", function(e) {
secondDiv.style.setProperty("--x", e.offsetX + "px")
secondDiv.style.setProperty("--y", e.offsetY + "px")
//console.log(e.offsetX)
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
width: 70%;
margin: 0 auto;
border: 2px solid red;
height: 150px;
position: relative;
background: #9F86C0;
color: white;
margin-top: 10%;
}
.container p {
font-size: 2.3em;
pointer-events: none; /* Added */
}
.container .content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 1em;
}
.container .content:nth-child(2) {
background: #E0B1CB;
color: white;
clip-path: circle(50px at var(--x) var(--y))
}
<!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">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content check">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
<div class="content test">
<p>Hello People hover me</p>
<p>What's going on?</p>
</div>
</div>
</body>
</html>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
I have this CSS project I am working on and now I am in the phase where I will start to embelish it with some effects and nice colors. However I just realized that there is a small issue with it: the beige container won't adjust its height as the blue cells move around. Could anyone help please? Here it is my code:
HTML
<!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">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="OEPanel.js"></script>
<link rel="stylesheet" href="./OEPanel.css">
<title>Document</title>
</head>
<body>
<div id="oepanelcontainer" class="OEContainer">
<div id="oepanel" class="OEItems">
<div id="oecell1" class="OECell"></div>
<div id="oecell2" class="OECell"></div>
<div id="oecell3" class="OECell"></div>
<div id="oecell4" class="OECell"></div>
</div>
</body>
</html>
CSS
.OEContainer {
background-color: beige;
min-height: 10em;
vertical-align: middle;
padding: 10px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OEItems {
min-height: 10em;
vertical-align: middle;
padding: 0px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OECell {
background-color: lightblue;
min-height: 10em;
vertical-align: middle;
padding: 0px;
width:250px;
text-align:center;
float: left;
margin: 5px;
}
#media (max-width: 500px) {
.OEContainer {
flex-direction: column;
align-items: center;
}
}
JS
// config
var __OECELLS = 4; // the total of oecells in HTML (oecell1, oecell2...)
var __CELLWIDTH = 250; // the width of cells in pixels
var __MAXSCREENWIDTH = 1130; // the maximum width of screen in pixels
var __MAXCELLS = parseInt(__MAXSCREENWIDTH/__CELLWIDTH);
var __ADJUSTMENT = (__CELLWIDTH-30)/2;
var __CELLSPERROW;
$(function() {
RedefinePanel();
});
$(window).resize(function() {
RedefinePanel();
});
function RedefinePanel() {
var viewportWidth = $(window).width();
let __CELLSPERROW = parseInt((viewportWidth-__ADJUSTMENT)/__CELLWIDTH);
document.getElementById("oepanel").style.width = ((__CELLSPERROW)*__CELLWIDTH+(__CELLSPERROW*17)) + "px";
Thanks!
You need a clearfix for the container of your floated items.
.OEContainer {
background-color: beige;
min-height: 10em;
vertical-align: middle;
padding: 10px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OEItems {
min-height: 10em;
vertical-align: middle;
padding: 0px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.clearfix::after { /* clearfix class to expand the element back to its normal height */
content: '';
display: block;
clear: both;
}
.OECell {
background-color: lightblue;
min-height: 10em;
vertical-align: middle;
padding: 0px;
width:250px;
text-align:center;
float: left;
margin: 5px;
}
#media (max-width: 500px) {
.OEContainer {
flex-direction: column;
align-items: center;
}
}
<!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">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="OEPanel.js"></script>
<link rel="stylesheet" href="./OEPanel.css">
<title>Document</title>
</head>
<body>
<div id="oepanelcontainer" class="OEContainer">
<div id="oepanel" class="OEItems clearfix"> <!-- clearfix class added here -->
<div id="oecell1" class="OECell"></div>
<div id="oecell2" class="OECell"></div>
<div id="oecell3" class="OECell"></div>
<div id="oecell4" class="OECell"></div>
</div>
</body>
</html>
When you use floats for all of the children of an element - it will collapse 0 height ( minus padding and margins etc ) unless you force it to expand to the size of it's children with a clearfix. Essentially it's a bug/quirk in browsers that's been persistent for a while.
Although this answers your questions I would advise against using floats wherever possible and use flexbox instead. Overall a lot less messy than floats in my opinion.
This is the error that is giving me:
Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLButtonElement.<anonymous>
Error at app.js 7
const flexContainer = document.querySelector('.flex-container')
const btn = document.querySelector('.btn')
btn.addEventListener('click', e => {
let div = document.createElement('div')
div.classList.add('.item-1')
flexContainer.appendChild(div)
})
body{
background: #333;
min-height: 100vh;
}
.flexbox-container{
display: flex;
justify-content: space-around;
}
.flexbox{
width: 300px;
margin: 10px;
border: 3px solid pink;
background: white;
}
.item-1{
min-height: 200px;
}
.item-2{
min-height: 200px;
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn">add card</button>
<div class="flexbox-container">
<div class="flexbox item-1"></div>
<div class="flexbox item-2"></div>
</div>
<script src="app.js"></script>
</body>
</html>
This is the webpage
You are looking for the class .flex-container but in your HTML that class doesn't exist ( there is a .flexbox-container) so that is why you get a null on the variable flexContainer
Here you go :
const flexContainer = document.querySelector('.flexbox-container')
const btn = document.querySelector('.btn')
btn.addEventListener('click', e => {
let div = document.createElement('div')
div.classList.add('flexbox', 'item-1');
flexContainer.appendChild(div)
})
body {
background: #333;
min-height: 100vh;
}
.flexbox-container {
display: flex;
justify-content: space-around;
}
.flexbox {
width: 300px;
margin: 10px;
border: 3px solid pink;
background: white;
}
.item-1 {
min-height: 200px;
}
.item-2 {
min-height: 200px;
align-self: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="btn">add card</button>
<div class="flexbox-container">
<div class="flexbox item-1"></div>
<div class="flexbox item-2"></div>
</div>
<script src="app.js"></script>
</body>
</html>