CSS: How do I change .ClassA when .ClassB is in focus [duplicate] - css

This question already has answers here:
Change CSS element that comes after another
(2 answers)
Make :focus change css of another class
(3 answers)
Closed 4 years ago.
Is it possible to change one class when another is in focus with CSS? For example, .ClassA when .ClassB is in focus
I'm trying to achieve something similar to the apple.com search feature where the menu hides and the search input field expands when selected.

Try this out, it may give you a scent of hope O:-)
However it is very unlikely, that you will get a better solution with pure CSS, it truly is usually made with JavaScript, while each HTML element has list of classes and you may add a class or remove a class quite easily.
<html>
<head>
<style>
#spawner {
display: none;
}
#spawner ~ div {
display: none;
}
#spawner:checked ~ div {
display: block;
}
</style>
</head>
<body>
<label for="spawner">
<div>Click me to show content!</div>
</label>
<input type="checkbox" id="spawner">
<div>
Was that a JavaScript? I doubt it!
</div>
</body>
</html>

Maybe something like this?
input { width: 35%; -webkit-transition: width .35s ease-in-out; transition: width .35s ease-in-out;}
input:focus { width: 100%; }

const menu = document.querySelector('.menu');
const search = document.querySelector('.search');
search.addEventListener('focus', () => {
console.log('Focuse');
search.classList.add('search--active');
menu.classList.add('menu--hidden');
});
search.addEventListener('blur', () => {
search.classList.remove('search--active');
menu.classList.remove('menu--hidden');
});
html, body {
padding: 0;
margin: 0;
}
.menu {
display: flex;
flex-direction: row;
}
.menu > a {
padding: 10px;
color: white;
text-decoration: none;
transition: background-color 0.3s;
}
.menu > a:hover {
background-color: rgba(0,0,0,0.5);
}
.wrapper {
display: flex;
flex-direction: row;
background-color: #eae;
box-shadow: 0 0 5px #888;
align-items: center;
justify-content: space-between;
padding-right: 10px;
}
.search {
width: 200px;
border-radius: 10px;
transition: width 0.5s;
}
.search--active {
width: 500px;
margin-left: auto;
}
.menu--hidden {
display: none;
}
<div class='wrapper'>
<div class='menu'>
<a href='#'>Home</a>
<a href='#'>About</a>
<a href='#'>Contact Us</a>
<a href='#'>Support</a>
<a href='#'>Page</a>
</div>
<input class='search' type='search' name='search' />
</div>

Related

How can you use flexbox method to center div(second child) inside another div (parent), but not let it be affected by (first) child? [duplicate]

This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
In my case, flexbox method works very well for centering the navbar as the navbar has fixed positioning. What I don't want is the other div that's at the same level as the div I am having centered skew the div I want centered; I want it centered to the entire document, not just the area of the parent div that it is allowed.
body {
margin:0;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
font-family:'Smooch Sans';
font-size:1.2em;
}
.navbar-item {
float: left;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 6px 13px;
text-decoration: none;
margin:0.5rem;
border-radius:10px;
transition: 0.4s;
}
.navbar a:hover:not(.active) {
background-color: #111;
}
.navbar a.active:hover { background-color:#048f5c;
}
.active {
background-color: #04AA6D;
}
div.navbar-options {
position:relative;
display: flex;
align-items: center;
justify-content: center;
}
div#navbar-left-title {
color:white;
}
<!DOCTYPE html>
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-left-title" style="width:fit-contents;float:left;">The Website Name</div>
<div class="navbar-options">
<div class="navbar-item"><a class="active" href="#home">Home</a></div>
<div class="navbar-item">News</div>
<div class="navbar-item">Contact</div>
<div class="navbar-item">About</div>
</div>
</div>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
</div>
</body>
</html>
this is all of the code. Sorry all the styling clogs it up. So I don't want the div#navbar-left-title to skew the div.navbar-options off the absolute center, in conclusion. Haven't been able to find any solution!
link to the general idea off of tesla
A simple solution is to add position: absolute to #navbar-left-title as below.
body {
margin: 0;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
font-family: 'Smooch Sans';
font-size: 1.2em;
}
.navbar-item {
float: left;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 6px 13px;
text-decoration: none;
margin: 0.5rem;
border-radius: 10px;
transition: 0.4s;
}
.navbar a:hover:not(.active) {
background-color: #111;
}
.navbar a.active:hover {
background-color: #048f5c;
}
.active {
background-color: #04AA6D;
}
div.navbar-options {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div#navbar-left-title {
color: white;
width: fit-contents;
float: left;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<style>
#import url('https://fonts.googleapis.com/css2?family=Smooch+Sans&display=swap');
</style>
</head>
<body>
<div class="navbar">
<div id="navbar-left-title">The Website Name</div>
<div class="navbar-options">
<div class="navbar-item"><a class="active" href="#home">Home</a></div>
<div class="navbar-item">News</div>
<div class="navbar-item">Contact</div>
<div class="navbar-item">About</div>
</div>
</div>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
</div>
</body>
</html>
A more complicated solution would be to set up a grid with three columns such as
<navbar>
<div class="left">
...
</div>
<div class="center">
...
</div>
<div class="right">
...
</div>
</navbar>
and set it up so that left and right have the same width always, so the center element can fill the remaining space.

Trying to achieve expand and collapse animation on a card - ReactJS

I'm trying to achieve expand and collapse animation on a card without using bootstrap or anything and for this, I tried attaching a transition property but for some reason it's not working on button click.
Here is the component:
Card.jsx
import React, { useState } from 'react';
import './Card.scss';
const Card = (props) => {
const [collapse, toggleCollapse] = useState(true);
return (<div className="card">
<div className="card-header">
<h4 className="card-title">Card Actions</h4>
<div className="heading-elements">
<button onClick={() => toggleCollapse(!collapse)}>Collapse</button>
</div>
</div>
<div className={`card-content ${!collapse ? 'collapse show' : 'collapsing'}`}>
<div className="card-body">
<div className="row">
Hi there, this content needs to shown on button click
</div>
</div>
</div>
</div>);
}
export default Card;
Here is the scss file of the card:
Card.scss
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: 0.428rem;
border: none;
margin-bottom: 2rem;
box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.10);
transition: all 0.3s ease-in-out, background 0s, color 0s, border-color 0s;
}
.card .card-header {
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: none;
padding: 1.5rem;
background-color: transparent;
}
.card-header:first-child {
border-radius: calc(0.428rem - 1px) calc(0.428rem - 1px) 0 0;
}
.collapse:not(.show) {
display: none;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 2s ease;
}
The problem is, when you want to collapse the card you remove the show class therefore the .collapse:not(show) selector activates where you wrote display: none;. display: none; cannot be used with a transition, take a look here for a list of properties that can be animated. Just adjusting the height should be enough.

:active disappears immediately on a div

I want to display a pop-up when I click on my div.
Here is my html code :
<div class="test">
<!-- <input class="input input-readonly" type="text" placeholder="Code" [value]="id" readonly>-->
<div class="test input input-readonly">{{gameId}}</div>
<div class="test__popup">
<a [cdkCopyToClipboard]="id">{{'ID' | translate}}</a>
<a [cdkCopyToClipboard]="link">{{'LINK' | translate}}</a>
</div>
</div>
Mon fichier scss :
.test {
position: relative;
input {
cursor: pointer;
user-select: none;
}
&__popup {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: max-content;
padding: 10px;
background-color: $color-white;
box-shadow: $shadow-default;
flex-direction: column;
border-radius: 8px;
display: none;
a {
color: $color-primary-dark;
transition: color 100ms;
padding: 4px 0;
&:hover {
color: $color-primary-light;
}
}
}
&:focus-within .test__popup,
&:active .test__popup {
display: flex;
background-color: yellow;
}
}
In my HTML code I commented an input with the same class as my div. It works for my input but for my div when I click on it, the popup appears but disappears directly.
How to reproduce the same effect as with my input, ie my popup remains on the screen as long as I have not clicked elsewhere.

Why the animate function hides the other div at the end of animation?

Code can be found there http://codepen.io/kongakong/pen/wMQrBR
Javascript:
$(document).ready(function () {
init();
});
function init() {
$('#test').on('click', function () {
$('.answer').animate({width: "hide"}, 1000, 'swing');
});
}
css:
.row {
position: relative;
overflow-x: hidden;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
}
html
<div class="contrainer">
<div>
<input id='test' type='button' value="test"></input>
</div>
<div class="row">
<div class="answer-new">Under
</div>
<div class="answer">Top
</div>
</div>
<div class="row">
<div class="answer-new">Under1
</div>
<div class="answer">Top1
</div>
</div>
</div>
Here is a screenshot of the page before animation starts
When the button is clicked, the animation is executed as expected. I expect div's of css class answer-new stay visible. However at the end all the div disappeared.
I tried to use '0' instead of 'hidden'. In this case, the text of div answer stays visible. Not completely hidden.
Why this behaviour?
It is because your .row div have overflow-x: hidden; and when .answer div width become hidden then there no any div other than .answer-new.
And .answer-new is position:absolute So, it count not width/height. And it will hide all element overflow the .row.
To. Make it working add padding to .row So, it count some spacing.
like her in example i add padding: 25px 0;. and i have give top value to absolute div. top: 0; to give it's position.
And added margin: -25px 0; to .answer to display it proper from top as padding added to parent div.
CSS:
.row {
position: relative;
overflow-x: hidden;
padding: 25px 0;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
margin: -25px 0;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
top:0;
}
Working Fiddle
That is because your container div .row has no dimension (width nor height) of its own, and the other child div .answer-row has absolute positioning and only width dimension. So when the child div .answer gets hidden, the parent loses its height dimension, and effectively becomes invisible.
If you give the parent div .row a height, when the child div .answer gets hidden, the parent stays visible. Consequently the other child div .answer-row stays visible, considering its style.
See this fiddle wherein I added height to .row.
While I can't exactly explain the behavior this myself, I took the liberty of limiting the width to 1 px and removing the opacity that fixed the issue
function init() {
$('#test').on('click', function() {
$('.answer').animate({
width: '1px',
opacity: 0
}, 2000, "swing");
});
}
Updated Fork
hope this will help to you,I used online jquery.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.row {
position: relative;
overflow-x: hidden;
}
.hidden {
display: none;
}
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
}
.answer-new {
font-size: 40px;
/* to make answer-new on top and cover answer */
position: absolute;
border: 1px solid blue;
width: 100%;
z-index: 1;
text-align: center;
}
</style>
<body>
<div class="container">
<div>
<input class="btn btn-default" id='test' type='button' value="test"></input>
</div>
<div class="row">
<div class="answer-new">Under
</div>
<div class="answer">Top
</div>
</div>
<div class="row">
<div class="answer-new">Under1
</div>
<div class="answer">Top1
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(){
$(".answer").animate({width:0,opacity:0},1000);
});
});
</script>
</body>
</html>
IMHO I don't like using jquery/js to animate things, I would do it with css classes
.answer {
font-size: 40px;
color: red;
width:100%;
opacity: 1;
z-index: 100;
border: 1px solid red;
text-align: center;
background-color: #fff;
transition: 0.5s;
overflow: hidden;
}
.answer.minimized{
width: 0px;
}
in your js
$('#test').on('click', function () {
$('.answer').addClass('minimized');
});
Here's the demo

CSS Can't float left

Hi i have tried allot ways how to fix this, but i cant float div to left side. When i create div its automatically stacks in right top corner and i cant move it only with padding and margin.
My index.php example need to float:left div with class language:
<body class="menu">
<div class="wrapper">
<div class="menu-toggle">
Show menu
</div>
<div class="language">
Select lang
</div>
<header>
<nav class="menu-side">
<ul>
<li>Home</li>
<li>Login</li>
<li>Contact</li>
</ul>
</nav>
</header>
<form action="upload.php" method="POST" enctype="multipart/form-data" id="upload" class="upload">
<fieldset>
<legend>Upload files</legend>
<input type="file" id="file" name="file[]" required multiple>
<input type="submit" id="submit" name="submit" value="Upload">
</fieldset>
<div class="bar">
<span class="bar-fill" id="pb"><span class="bar-fill-text" id="pt"></span></span>
</div>
<div id="uploads" class="uploads">
Uploaded links will apear here.
</div>
</form>
</div>
<footer>
Created by Revix © 2014
</footer>
</body>
And my css is:
html, body { height: 100%; margin-top: 0; }
body { font-family: "Georgia", serif; }
.upload { width:500px; background: #f0f0f0; border: 1px solid #ddd; padding: 20px; vertical-align: center; margin-left: auto; margin-right: auto; }
.upload fieldset { border: 0; padding: 0; margin-bottom: 10px; }
.upload fieldset legend { font-size: 1.2em; margin-bottom: 10px; }
footer { background-color: cornflowerblue; text-align: center; vertical-align: middle; min-width: 542px; }
.wrapper { min-height: 100%; margin-bottom: -100px; clear: both; }
.wrapper:after { content: ""; display: block; }
.wrapper:after, footer { height: 100px; }
header { position: fixed; margin-left: auto; margin-right: auto; }
.uploads a, .uploads span { display: block; }
.bar { width: 100%; background: #eee; padding: 3px; margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); border-radius: 3px; box-sizing:border-box; }
.bar-fill { height: 20px; display: block; background: cornflowerblue; width: 0; border-radius: 3px;
-webkit-transition:width 0.8s ease; -moz-transition:width 0.8s ease; -o-transition:width 0.8s ease; transition:width 0.8s ease; }
.bar-fill-text { color:#fff; padding: 3px; }
.language { float: left; position: absolute; width: 80px; padding: 3px; }
If you wanna to see my web site: Here
Can you suggest me what to do?
Do you mean this effect? Please see my demo.
Please paste your code to jsbin.com next time. Otherwise it's not convenient for us to resolve your problem.
http://jsbin.com/yivat/1
float:left and position:absolute doesn't work.
remove position:absolute
.language { float: left; width: 80px; padding: 3px; }
Inspecting these elements in my browser they have all the CSS attribute position:absolute; set, which sets them at a absolute position within the window. But these elements seem to have no left and top position set which sets you all elements to window position 0,0 which is left top corner.
I would recommend to set the position to relative position:relative; or define specific positions for your html elements.
Floating left on a absolute positioned element will not work. Try relative to float it or position it on your page with top:px left:px;

Resources