Develop Reference

completely fit the toggle bar inside the div

my english is not very good, i hope i can explain what i want to say
I want to fit my toggle icon inside div. I couldn't do it, can you show me how to do it?
I want it to be shaped according to the size of the div. when the div shrinks, the toggle menu should also shrink
I want to make the image in the top image like the bottom image
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.btn5 .icon {
transition-duration: 0.5s;
position: absolute;
height: 8px;
width: 60px;
top: 50px;
background-color: white;
}
.btn5 .icon:before {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: -20px;
}
.btn5 .icon:after {
transition-duration: 0.5s;
position: absolute;
width: 60px;
height: 8px;
background-color: white;
content: "";
top: 20px;
}
.btn5.open .icon {
transition: 0.5s;
}
.btn5.open .icon:before {
transform: rotateZ(-45deg) scaleX(0.75) translate(-20px, -6px);
}
.btn5.open .icon:after {
transform: rotateZ(45deg) scaleX(0.75) translate(-20px, 6px);
}
.btn5:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon"></div>
</div>
</div>
Thank you in advance for your help :)

This snippet will get you closer to your second image. I changed up the structure a bit and just used a couple spans and positioned them absolute. You can tinker with the animation to your hearts content.
$(".menu").click(function () {
$(this).toggleClass("open");
});
body {
background-color: black;
}
.btn5 {
position: absolute;
width: 150px;
display:flex;
align-items: center;
height: 150px;
top: 0px;
left: 0px;
transition-duration: 0.5s;
border: 5px solid red;
}
.icon {
width:150px;
height:150px;
position: relative;
}
.btn5 .bar {
transition-duration: 0.5s;
position: relative;
height: 8px;
width: 100%;
height: 20px;
display: block;
background-color: white;
}
.bar:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
}
.bar:nth-of-type(2) {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
}
.bar:nth-of-type(3) {
position: absolute;
bottom: 0;
left: 0;
}
.menu.open .bar:nth-of-type(1) {
transform: rotate(-45deg);
top: 10px;
left: -16px;
}
.menu.open .bar:nth-of-type(3) {
transform: rotate(45deg);
bottom: 10px;
left: -16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togg">
<div class="menu btn5" data-menu="5">
<div class="icon">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>

How to connect two options and toggle switch buttons

I would like to connect two labels and toggle switches.
If you click the toggle switch, it is desired that the switch is activated when you click the respective labels. However, if you click on the same label, you do not want the switch to move.
I made a toggle switch along this link https://www.w3schools.com/howto. This button works very well. But I don't know what to do to achieve the effect I want.I tried putting two options in the label, but the layout is broken.
I can't use other frameworks such as jQuery. Pure JavaScript support is available.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>

This would be simple to solve with JavaScript, but it's a more interesting question with pure CSS/HTML.
Explanation: pointer-events: none disables clicks from having any effect. pointer-events: all is used selectively on child elements to re-enable clicking on them, depending on the checked state of the input.
/* the interesting bit */
.label {
pointer-events: none;
display: flex;
align-items: center;
}
.switch,
.input:checked + .label .left,
.input:not(:checked) + .label .right {
pointer-events: all;
cursor: pointer;
}
/* most of the stuff below is the same as the W3Schools stuff,
but modified a bit to reflect changed HTML structure */
.input {
display: none;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .label .slider {
background-color: #2196f3;
}
input:focus + .label .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .label .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* styling to make it look like your screenshot */
.left, .right {
margin: 0 .5em;
font-weight: bold;
text-transform: uppercase;
font-family: sans-serif;
}
<input class="input" id="toggle" type="checkbox">
<label class="label" for="toggle">
<div class="left">
Option A
</div>
<div class="switch">
<span class="slider round"></span>
</div>
<div class="right">
Option B
</div>
</label>

This will help you perfectly using two radio button.
HTML :-
<div class="normal-container">
<div class="smile-rating-container">
<div class="smile-rating-toggle-container">
<form class="submit-rating">
<input id="meh" name="satisfaction" type="radio" />
<input id="fun" name="satisfaction" type="radio" />
<label for="meh" class="rating-label rating-label-meh">Bad</label>
<div class="smile-rating-toggle"></div>
<div class="toggle-rating-pill"></div>
<label for="fun" class="rating-label rating-label-fun">Fun</label>
</form>
</div>
</div>
</div>
CSS:-
.smile-rating-container {
position: relative;
height: 10%;
min-width: 220px;
max-width: 520px;
margin: auto;
font-family: 'Roboto', sans-serif;
top: 20%;
}
.submit-rating {
display: flex;
align-items: center;
justify-content: center;
}
.rating-label {
position: relative;
font-size: 1.6em;
text-align: center;
flex: 0.34;
z-index: 3;
font-weight: bold;
cursor: pointer;
color: grey;
transition: 500ms;
}
.rating-label:hover, .rating-label:active {
color: grey;
}
.rating-label-fun {
left: -58px;
text-align: right;
}
.rating-label-meh {
left: 58px;
text-align: left;
color: #222;
}
.smile-rating-container input {
display: none;
}
.toggle-rating-pill {
position: relative;
height: 65px;
width: 165px;
background: grey;
border-radius: 500px;
transition: all 500ms;
}
.smile-rating-toggle {
position: absolute;
width: 54px;
height: 54px;
background-color: white;
left: 182px;
border-radius: 500px;
transition: all 500ms;
z-index: 4;
}
/*
Toggle Changes
*/
#meh:checked~.rating-label-meh {
color: #2196f3;
}
#fun:checked~.rating-label-meh {
color: grey;
}
#fun:checked~.mouth {
border: 4px solid #2196f3;
border-bottom-color: rgba(1, 1, 1, 0);
border-right-color: rgba(1, 1, 1, 0);
border-left-color: rgba(1, 1, 1, 0);
top: 23px;
left: 291px;
transform: rotateX(180deg);
border-radius: 100%;
}
#fun:checked~.rating-label-fun {
color: #2196f3;
}
#fun:checked~.smile-rating-toggle {
left: 282px;
}
#fun:checked~.rating-eye-left {
left: 292px;
}
#fun:checked~.rating-eye-right {
left: 316px;
}
#fun:checked~.toggle-rating-pill {
background-color: #2196f3;
}
#fun:checked~.rating-eye {
background-color: #2196f3;
}

Change Font color onclick Radio buttons

We are displaying text & two radio buttons in page....
Once we click on Radio buttons, we are changing background color of page according to radio button....
Requirement :
Instead of Background color, i want to change the text color onclick radio button....
I tried below , but it did't worked :
.orange input:checked ~ .text {
color: #F4511E;
}
Code Snippet
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
.orange input:checked ~ .layer {
background: #F4511E;
}
.amber input:checked ~ .layer {
background: #FFB300;
}
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>

You need to use JS/jQuery for this because > + ~ this are siblings selector so it only select item that are next to it
+ is the immediate subsequent sibling selector
~ is the any subsequent sibling selector
UPDATED PEN
$('input[type="radio"]').on('click', function() {
let color = $(this).parent().find('div.button span').css('background-color');
$('.text').css('color', color);
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
/* .orange input:checked ~ .layer {
background: #F4511E;
}
.amber input:checked ~ .layer {
background: #FFB300;
} */
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

Use below jQuery using siblings
$('input[type="radio"]').change(function () {
if($(this).is(":checked") && $(this).val() == 'amber'){
$(this).parent().siblings('div.text').css('color', '#FFB300');
}
else{
$(this).parent().siblings('div.text').css('color', '#F4511E');
}
});
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="text">text</div>
<label class="orange">
<input type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>

You need jQuery/js for that - This is a Solution with jQuery:
$(document).ready(function() {
var text = $('.text')
$('input:radio').change(function() {
if ($(this).is(':checked')) {
var color = $(this).val();
text.css('color', color);
}
});
});
Fiddle here: http://jsfiddle.net/tpq16r5L/4/
Alos please be aware that amber is no usable color, so I changed that for exemplary usage to green

Updated answer is here
function myColour(clr)
{
alert(clr);
if(clr == 'orange')
document.getElementsByClassName("text")[0].style.color = '#F4511E'
else if(clr == 'amber')
document.getElementsByClassName("text")[0].style.color = '#FFB300'
else
document.getElementsByClassName("text")[0].style.color = 'black'
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
body {
box-sizing: border-box;
padding-top: 180px;
background: #ffffff;
}
input {
display: none;
}
.button {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.button span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.button span:hover {
padding: 10px;
}
.orange .button span {
background: #FF5722;
}
.amber .button span {
background: #FFC107;
}
.layer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}
<body>
<div class="text">text</div>
<label class="orange">
<input onclick="myColour('orange')" type="radio" name="color" value="orange">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
<label class="amber">
<input onclick="myColour('amber')" type="radio" name="color" value="amber">
<div class="layer"></div>
<div class="button"><span></span></div>
</label>
</body>

How do I disable temporarily the hover of a div?

I'm making a webpage. I created a popup that when I hover the div, the popup opens and if not, it closes.
I want to make a function that if I click on the div, the popup stay open without hover. How I can do? Thanks in advance.
I have this code:
HTML:
<div class="password-lost-tooltip" onclick="blockTooltip()">Lost password?
<span class="password-lost-tooltiptext" id="lostpasswordtooltip">LOL</span>
</div>
CSS:
.password-lost-tooltip {
position: relative;
display: inline-block;
position: fixed;
top: 55px;
left: 380px;
font-family: 'Nunito', sans-serif;
font-size: 15;
text-decoration: none;
transition-duration: 0.3s;
color: grey;
}
.password-lost-tooltip:hover {
color: black;
cursor: pointer;
}
.password-lost-tooltip .password-lost-tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: fixed;
top: 49px;
left: 610px;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.password-lost-tooltip .password-lost-tooltiptext::after {
content: "";
position: fixed;
transform: rotate(90deg);
top: 57.5px;
left: 542.5px;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.password-lost-tooltip:hover .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}

You can use onClick and onBlur events to set or remove a class on the div which then should be added to the css to control the visibility.
Please checkout this running example:
function blockTooltip () {
document.querySelector('.password-lost-tooltip').classList.add('showTip');
}
function hideTooltip () {
document.querySelector('.password-lost-tooltip').classList.remove('showTip');
}
.password-lost-tooltip {
position: relative;
display: inline-block;
position: fixed;
top: 55px;
left: 380px;
font-family: 'Nunito', sans-serif;
font-size: 15;
text-decoration: none;
transition-duration: 0.3s;
color: grey;
}
.password-lost-tooltip:hover {
color: black;
cursor: pointer;
}
.password-lost-tooltip .password-lost-tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: fixed;
top: 49px;
left: 610px;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.password-lost-tooltip .password-lost-tooltiptext::after {
content: "";
position: fixed;
transform: rotate(90deg);
top: 57.5px;
left: 542.5px;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.password-lost-tooltip:hover .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}
.password-lost-tooltip.showTip .password-lost-tooltiptext {
visibility: visible;
opacity: 1;
}
<div class="password-lost-tooltip" tabindex="0"
onclick="blockTooltip()" onblur="hideTooltip()">Lost password?
<span class="password-lost-tooltiptext" id="lostpasswordtooltip">LOL</span>
</div>

Issues with the animation

search increase and decrease in width just when the .search_icon is clicked,because in actual moment its changing size when im clicking .search class.And can someone explaing why these code doesnt work with actual jquery library version,thanks.
https://codepen.io/anon/pen/ENqppw
<div class="search">
<input type="text" class="inp"><span class="search_icon"></span></input>
</div>
$background-color: #2A2E37;
$search-bg-color: #242628;
$icon-color: #00FEDE;
$transition: all 0.5s ease;
.inp{
width: 240px;
height: 60px;
box-shadow: none;
border: none;
background: transparent;
color: #fff;
padding: 20px 0px 20px 45px;
font-size: 40px;
&:focus {
outline: none;
}
}
.search {
width:100px;
height:100px;
background: #3a3a3a;
transition: all 0.7s ease;
margin:50px;
position:absolute;
&.open {
width: 90%;
}
}
.search_icon {
width: 34px;
height: 34px;
border-radius: 40px;
border: 3px solid $icon-color;
display: block;
position: relative;
margin-top:-77px;
margin-left:20px;
transition: $transition;
&:before {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -2px;
top: 30px;
display: block;
background-color: $icon-color;
transform: rotate(-45deg);
transition: $transition;
}
&:after {
content: '';
width: 3px;
height: 15px;
position: absolute;
right: -12px;
top: 40px;
display: block;
background-color: $icon-color;
transform: rotate(-45deg);
transition: $transition;
}
.open & {
width: 50px;
height: 50px;
border-radius: 60px;
margin-left:95%;
&:before {
transform: rotate(45deg);
right: 23px;
top: 12px;
height: 29px;
}
&:after {
transform: rotate(-45deg);
right: 23px;
top: 12px;
height: 29px;
}
}
}
$(function() {
$('.search').on('click', function() {
$(this).toggleClass('open');
$(this).toggleClass('clicked');
});
});

You can use this instead:
$(function() {
$('.search').on('click', function() { // Expand search on click on it
$(this).addClass('open clicked');
});
$('.search_icon').on('click', function(e) { // Collapse search on click on search icon
e.stopPropagation();
$(this).closest('.search').removeClass('open clicked');
});
});