I'm currently implementing a switch. The problem is that the background which should be hidden by the switch shows one thin line at the left end. I've absolutely no idea why. The strange thing is that here on SO everything looks really good. The switch is located in a scrollable main wrapper with all the other content. I thought this could be the problem but after removing the scrolling, the error was still there:
When I run the inspector and hover the element, the background seems to go out:
This is my code. I've tried a low but can't find the problem:
let toggle = document.getElementById('container');
let toggleContainer = jQuery('#toggle-container');
let toggleNumber;
jQuery('#container').click( function() {
toggleNumber = !toggleNumber;
if (toggleNumber) {
toggleContainer.css( "clip-path", "inset(0 0 0 50%)" );
} else {
toggleContainer.css( "clip-path", "inset(0 50% 0 0)" );
}
});
#container {
width: 100%;
height: 56px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
user-select: none;
cursor: pointer;
border-radius: 3px;
-webkit-box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, .2);
box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}
.inner-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-transform: uppercase;
}
.inner-container:first-child {
background: gray;
color: #ffffff;
}
.inner-container:nth-child(2) {
background: chartreuse;
color: #ffffff;
clip-path: inset(0 50% 0 0);
-webkit-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.toggle {
width: 50%;
position: absolute;
height: inherit;
display: flex;
font-weight: 600;
}
.toggle p {
margin: auto;
}
.toggle:nth-child(1) {
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
<div class="inner-container" id='toggle-container'>
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
</div>
I would suggest an optimized version with less of code and without the use of clip-path:
let toggle = document.getElementById('container');
let toggleContainer = jQuery('.inner-container');
jQuery('#container').click(function() {
toggleContainer.toggleClass('second');
});
#container {
margin-bottom: 20px;
user-select: none;
cursor: pointer;
border-radius: 3px;
box-shadow: 0 0.12rem 0.4rem 0 rgba(0, 0, 0, .2);
}
.inner-container {
height: 56px;
text-transform: uppercase;
display: flex;
background:
linear-gradient(chartreuse,chartreuse) left/50% 100% no-repeat,
gray;
color: #ffffff;
transition: 0.2s;
}
.inner-container.second {
background-position:right;
}
.toggle {
width: 50%;
display: flex;
font-weight: 600;
}
.toggle p {
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="inner-container">
<div class="toggle">
<p>Private</p>
</div>
<div class="toggle">
<p>Public</p>
</div>
</div>
</div>
This seems to be what you are seeing:
Which was done by making the CSS: clip-path: inset(0 50% 0 1px);
Maybe just try adding some negative space to the left side:
toggleContainer.css( "clip-path", "inset(0 50% 0 -10px)" );
Related
What's going on and what should be going on
I built a 3 d carousel popup. There are 3 slides; each slide must show a paragraph if it's "selected".
The z-index for the "selected" one always equals 1, the one on the right equals 0 and the one on the left equals -1.
I tried to add and remove visibility from the paragraphs if the z-index for the slide = 1. But unfortunately,your text it only works when I open the page because that's when the z-index is being checked I guess.
I would like to fade in the paragraphing that belongs to the slide every time it's "selected".
(I know my code for this might be 100% wrong.)
What I think should work...
I think I might need some sort of a swipe event listener but I'm not sure and I don't know how to do one of those.
HTML
`
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script src="https://kit.fontawesome.com/661fc68da9.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<button onclick="Size()"></button>
<div class="sizeGuidance">
<form data-multi-step2>
<div class="whatGuideD" data-step2>
<br>
<h1>The Size Guide</h1>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div id="sw1" class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div id="sw2" class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-bullseye fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div id="sw3" class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideD" ><i class="fa-solid fa-square-poll-horizontal fa-2x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1" class="d1">Get to know your size in less than 1 minute. <br> - no measuring bands required.</p>
<p id="d2" class="d1">Get a more accurate size recommendation. <br> - no measuring bands required.</p>
<p id="d3" class="d1">You already know your measurments? <br> here is the size guide.</p>
</div>
</div>
</form>
<form data-multi-step2M>
<div class="whatGuideM" data-step2M>
<br>
<h1>The Size Guide</h1>
<br>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span style="--i:1;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-ruler fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px; " ></i>Quick Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:2;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-bullseye fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Super Guide</button></span>
</div>
<div class="swiper-slide">
<span style="--i:3;"><button type="button" class="pickGuideM" ><i class="fa-solid fa-square-poll-horizontal fa-3x" style=" display: flex; flex-wrap: wrap;justify-content: center; margin-bottom: 20px; margin-top: 15px" ></i>Size Chart</button></span>
</div>
</div>
<div class="swiper-pagination"></div>
<p id="d1" ></p>
</div>
</div>
</form>
</div>
</body>
</html>
`
CSS
`
<style>
.d1 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d1.showDisc1{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
.d2 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d2.showDisc2{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
.d3 {
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
position: absolute;
}
.d3.showDisc3{
visibility: visible;
opacity: 1;
transition: 0.5s ease-in-out;
}
</style>
<style>
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
</style>
<style>
/*only desktop*/
.whatGuideD {
display: none;
}
#media only screen and (min-width: 900px) {
.whatGuideD {display: block;
}
.whatGuideM {display: none;
}
}
</style>
<!-- Demo styles -->
<style>
html {
height: -webkit-fill-available;
}
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
height: -webkit-fill-available;
}
.swiper {
width: 100%;
padding-top: 0;
padding-bottom: 50px;
padding-left: 0;
padding-right: 0;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 60%;
max-width: 500px;
height: 75vh;
max-height: 500px;
border-radius: 15px;
background: rgb(238, 235, 241);
box-shadow: 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
-10px -10px 10px -1px rgba(255, 255, 255, 0.70);
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #fff6)
}
.swiper-slide button {
display: block;
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
Font-family: 'Bebas Neue', cursive;
font-size: 5vw;
margin: 0;
}
.pickGuideD {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 48px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideD:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
</style>
<style>
.pickGuideM {
Font-family: 'Bebas Neue', cursive;
text-transform: uppercase;
font-size: 24px;
font-weight: 500;
height: 100%;
background: rgb(238, 235, 241);
cursor: pointer;
border-radius: 10px;
color: rgb(0, 0, 0);
border: none;
text-align: center;
}
.pickGuideM:hover {
box-shadow: inset 10px 10px 10px -1px rgba(10, 99, 169, 0.16),
inset -10px -10px 10px -1px rgba(255, 255, 255, 0.70);
}
.close-button1D {
background-color: rgb(238, 235, 241);
color: rgb(0, 0, 0);
cursor: pointer;
font-size: 30px;
float: right;
margin-right: 40px;
border: 0;
}
::-webkit-scrollbar {
display: none;
}
</style>
<style>
.whatGuideD {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideD.active2{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: scroll;
transform: translate(-50%, -50%) scale(1);
}
.whatGuideM {
width: 100%;
height:100vh;
background: rgb(238, 235, 241);
text-align: center;
color: rgb(15, 15, 15);
visibility: hidden;
opacity: 0;
transition: 0.5s ease-in-out;
z-index: 3;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
.whatGuideM.active2M{
visibility: visible;
opacity: 1;
position: fixed;
z-index: 4;
overflow-y: hidden;
transform: translate(-50%, -50%) scale(1);
}
</style>
`
JS
`
<script>
var disc1 = document.querySelector("[showdiscrip1]")
function showdisc1() {
disc1.classList.add("disc");
}
function removedisc1() {
disc1.classList.remove("disc")
}
var disc2 = document.querySelector("[showdiscrip2]")
function showdisc2() {
disc2.classList.add("disc");
}
function removedisc2() {
disc2.classList.remove("disc")
}
var disc3 = document.querySelector("[showdiscrip3]")
function showdisc3() {
disc3.classList.add("disc");
}
function removedisc3() {
disc3.classList.remove("disc")
}
const mulitStepForm2 = document.querySelector("[data-multi-step2]")
const formSteps2 = [...mulitStepForm2.querySelectorAll("[data-step2]")]
let currentStep2 = formSteps2.findIndex(step2 => {
return step2.classList.contains("active2")
})
if (currentStep2 < 0) {
function SizeD() {
currentStep2 = 0
formSteps2[currentStep2].classList.add("active2")
showCurrentStep2();
window.scrollTo(0, 20);
}
}
mulitStepForm2.addEventListener("click", j => {
if (j.target.matches("[data-next]")) {
currentStep2++
} else if (j.target.matches("[data-closeguide]")) {
currentStep2 = -1
}
showCurrentStep2()
})
function showCurrentStep2() {
formSteps2.forEach((step2, index) => {
step2.classList.toggle("active2", index ===
currentStep2)
})
}
const mulitStepForm2M = document.querySelector("[data-multi-step2M]")
const formSteps2M = [...mulitStepForm2M.querySelectorAll("[data-step2M]")]
let currentStep2M = formSteps2M.findIndex(step2M => {
return step2M.classList.contains("active2M")
})
if (currentStep2M < 0) {
function SizeM() {
currentStep2M = 0
formSteps2M[currentStep2M].classList.add("active2M")
showCurrentStep2M();
window.scrollTo(0, 0);
}
}
mulitStepForm2M.addEventListener("click", j => {
if (j.target.matches("[data-nextM]")) {
currentStep2M++
} else if (j.target.matches("[data-closeguideM]")) {
currentStep2M = -1
}
showCurrentStep2M()
})
function showCurrentStep2M() {
formSteps2M.forEach((step2M, index) => {
step2M.classList.toggle("active2M", index ===
currentStep2M)
})
}
function Size() {
SizeD();
SizeM();
}
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 500,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
<script>
const sw1 = document.getElementById("sw1");
const sw2 = document.getElementById("sw2");
const sw3 = document.getElementById("sw3");
const sw1CS = window.getComputedStyle(sw1);
const sw2CS = window.getComputedStyle(sw2);
const sw3CS = window.getComputedStyle(sw3);
console.log(sw1CS.zIndex)
console.log(sw2CS.zIndex)
console.log(sw3CS.zIndex)
if (sw1CS.zIndex == 1) {
document.getElementById("d1").classList.add("showDisc1")
document.getElementById("d2").classList.remove("showDisc2")
}
if (sw2CS.zIndex == 1) {
document.getElementById("d2").classList.add("showDisc2")
document.getElementById("d1").classList.remove("showDisc1")
document.getElementById("d3").classList.remove("showDisc3")
}
if (sw3CS.zIndex == 1) {
document.getElementById("d3").classList.add("showDisc3")
document.getElementById("d2").classList.remove("showDisc2")
}
</script>
`
I have a nav component as shown below with four props that are all booleans used to control UI styling
const Nav = ({ isNav, isVisibleTwo, isVisibleThree, isVisibleFour }) => {
return (
<nav className={isNav ? 'bubbs bubbs-enter' : 'bubbs'}>
<GiHamburgerMenu />
<a href="#projects-title">
<div className={isVisibleFour ? 'bubble bubble-active' : 'bubble'}>
<p>{`//`} P</p>
</div>
</a>
<a href="#resume-title">
<div className={isVisibleTwo ? 'bubble bubble-active' : 'bubble'}>
<p>{`//`} R</p>
</div>
</a>
<a href="#contact-me">
<div className={isVisibleThree ? 'bubble bubble-active' : 'bubble'}>
<p>{`//`} C</p>
</div>
</a>
</nav>
)
}
isNav controls whether the nav is visible or not by toggling classes that control opacity.
bubbs-enter sets opacity: 0.7
the problem I'm having is if the bubble-active class is applied I want the opacity of the bubble to be set to 1. Which is not working currently because the nav opacity is set to .7
is there a valid work around for this?
CSS
nav {
width: 6rem;
position: sticky;
top: 0;
align-self: flex-end;
z-index: 5;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 3.2rem;
/* padding-top: 3rem; */
}
.bubbs {
opacity: 0;
transition: opacity 400ms ease-in;
}
.bubbs > svg {
color: white;
font-size: 1.8rem;
margin-bottom: .5rem;
}
.bubbs-enter {
opacity: .7;
}
.bubbs-enter:hover{
opacity: 1;
border-left: 1px solid rgba(82, 82, 82, 0.246)
}
.bubble {
aspect-ratio: 1;
border: 1px solid rgba(74, 74, 74, 0.216);
width: 3.6rem;
border-radius: 50%;
display: grid;
place-items: center;
margin: .5rem 0;
backdrop-filter: blur(2px);
cursor: pointer;
background-color: rgba(28, 28, 28, 0.349);
transition: all ease 350ms;
}
.bubble:hover {
transform: scale(1.06);
}
.bubble p {
color: rgb(240, 240, 240);
margin: 0;
font-size: 1.3rem;
text-transform: capitalize;
transition: all ease 550ms;
}
.bubble-active {
background-color: rgb(255, 255, 255);
transform: scale(1.06);
}
.bubble-active > p {
color: red;
}
What you're trying to achieve is a bit complex to achieve with CSS. You may want to take a look at setting the opacity of each child element than setting the opacity of the parent.
Take a look at the answers in this thread
I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>
You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>
My point is:
If I click OPEN then should open the popup.
If click BACK then should close the popup
If I click outside popup then should close the popup.
Note: If I click anywhere inside popup when is open, then shouldn't close. Popup must closing only on outside click or BACK click.
How it currently work: If I click anywhere then popup is opening and closing.
So how to do this what I expect? I prepared JSFiddle and Code Snippet.
JSFiddle
$('#open-1').on('click touch', function() {
$("#card-1").toggleClass("flip")
});
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").toggleClass("flip");
}
});
$('#open-1').on('click touch', function(event) {
event.stopPropagation();
});
.panel {
width: 45%;
display: inline-block;
margin-bottom: 20px;
background-color: #fff;
margin: 14px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.est {
box-shadow: 0px 0px 0px #333;
background-color: transparent;
}
div {
display: block;
}
#card-1 {
height: 300px;
width: 100%;
margin: 0 auto;
z-index: 1;
display: inline-block;
perspective: 700px;
}
.flip .front {
transform: rotateY(180deg);
}
.front {
transform: rotateY(0deg);
overflow: hidden;
z-index: 1;
}
.front,
.back {
border: 1px solid #ddd;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.ease {
-webkit-transition: all .45s ease-out 0s;
-moz-transition: all .45s ease-out 0s;
-ms-transition: all .45s ease-out 0s;
-o-transition: all .45s ease-out 0s;
transition: all .45s ease-out 0s;
}
.open-1,
.open-2,
.open-3,
.open-4,
.open-5 {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 50px;
}
.back {
transform: rotateY(180deg);
background-color: #ddd;
display: table;
z-index: 2;
font-size: 13px;
line-height: 23px;
padding: 10px 20px;
height: 320px;
}
.info {
color: #333;
font-size: 20px;
z-index: 9999;
}
.flip .back {
transform: rotateY(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="panel e-b est"> <div class="wrapper">
<div id="card-1">
<div class="front ease">
open
<p>
test content
</p>
</div>
<div class="back ease">
<div class="back-info">
<div class="info">
test content
</div>
</div>
<div class="social-bar">Back</div>
</div>
</div> </div> </div>
JSFiddle
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").toggleClass("flip");
}
});
You are toggle()ing the class here, instead use removeClass():
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").removeClass("flip");
}
});
Then select the flipped div instead of the front one to stop toggling when the user clicks on the flipped div
$('.back.ease').on('click touch', function(event) {
event.stopPropagation();
});
Then add a class (for example close-1) to the back button:
Back
And then add a function to remove the flip class upon clicking it
$('.close-1').on('click touch', function() {
$("#card-1").removeClass("flip");
});
I have an input like this:
<input value="My text" placeholder="Placeholder">
When I type something in the input the placeholder text will disappear, that's quite obvious.
Now, what I want to do is that I want the placeholder text to stay when the user types so you can see the placeholder text as a background text behind the original text:
EDIT: I also want to be able to change the background-text using JavaScript.
Much better solution with ease effect via CSS. Take a look: http://jsfiddle.net/csdtesting/wbqq129q/
Before typing:
While typing:
Code:
#login {
font-size: 12px;
margin: 0 auto;
width: 700px;
}
#login li {
float: left;
list-style: none;
margin-left: 30px;
position: relative;
}
#login li:first-child {
margin-left: 0;
}
label {
line-height: 40px;
position: absolute;
right: 120px;
top: 0;
bottom: 0;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0
}
input {
color: transparent;
font-size: 12px;
height: 35px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
input[type="email"],
input[type="password"] {
border: 1px solid #ccc;
height: 35px;
padding: 0 10px;
width: 240px;
position: relative;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
box-shadow: inset 0 0 10px rgba(0, 0, 0, .06);
z-index: 2;
}
input[type="email"] {
color: rgba(47, 130, 194, .8);
}
/* Placeholder */
input[type="email"]:-moz-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]:-ms-input-placeholder {
color: rgba(47, 130, 194, .6);
}
input[type="email"]::-webkit-input-placeholder {
color: rgba(47, 130, 194, .6);
}
/* Label */
input[type="email"] + label {
color: rgb(47, 130, 194);
}
input:focus + label {
right: 10px;
}
input[type="email"]:focus,
input[type="password"]:focus {
background-color: rgba(255, 255, 255, .8);
}
/* Submit */
input[type="submit"] {
background-color: #333;
background: -moz-linear-gradient(bottom, #333, #444);
background: -ms-linear-gradient(bottom, #333, #444);
background: -o-linear-gradient(bottom, #333, #444);
background: -webkit-linear-gradient(bottom, #333, #444);
background: linear-gradient(bottom, #333, #444);
border: 1px solid #222;
color: #fff;
cursor: pointer;
height: 35px;
width: 110px;
}
<form id="login">
<ul>
<li>
<input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
<label for="email">Your Email</label>
</li>
</ul>
</form>
Hard to think of a good usecase for such a behaviour, as it is blocking some of the users input.
An easy way would be to use input::after but this is not supported by any browser right now (thanks #JukkaK.Korpela).
But you can use a wrapper element and a data attribute, as follows:
<div class="placeholder" data-placeholder="my placeholder">
<input value="My text" />
</div>
With this css:
.placeholder
{
position: relative;
}
.placeholder::after
{
position: absolute;
left: 5px;
top: 3px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.6;
}
Resulting in:
Click here for jsFiddle demo.
Since you will have to do a lot of tweaking to make this look good, you may also consider using the wrapping <div> element as a input "look alike":
<div class="editable" data-placeholder="my placeholder">
<input type="text" value="my Text" />
</div>
CSS:
.editable
{
position: relative;
border: 1px solid gray;
padding: 3px;
background-color: white;
box-shadow: rgba(0,0,0,0.4) 2px 2px 2px inset;
}
.editable > input
{
position: relative;
z-index: 1;
border: none;
background-color: transparent;
box-shadow: none;
width: 100%;
}
.editable::after
{
position: absolute;
left: 4px;
top: 5px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.5;
z-index: 1;
}
Click here for the Demo 3. (with mocked <input />)
Click here for the Demo 2. (with contenteditable)
You could try doing something like this:
HTML:
<div class="wrapper">
<input type="text">
<span class="placeholder">Placeholder</span>
</div>
CSS:
.wrapper{
position: relative;
}
input {
font-size: 14px;
height: 40px;
}
.placeholder {
position: absolute;
font-size:25px;
pointer-events: none;
left: 1px;
top: 1px;
transition: 0.1s ease all;
}
input:focus ~ .placeholder{
top: 1px;
font-size: 11px;
}
JSFiddle
This could be done by using the 'onchange' handler. You would write a fancy function that would concat the remainder of the placeholder onto what the user has typed, and would also place the cursor at the end of the user's text.
Here's some untested, incomplete js/psuedocode to give you an idea:
userTextLength: 0, // measure of how many chars the user has typed; need this because the length itself won't be a valid measure, since we're modifying it in place. Note that we're using the DOM as a source of truth here... alternative method would be to store the user's text itself here, but let's run with this.
placeholder: "xx/yy/zz",
onchange: function() {
boxText = document.querySelector('#elem').value;
if (boxText.length === 1) { // special handling for the first character they type. (Using placeholder text at first.)
this.userTextLength++;
placeholder = boxText.slice(userTextLength);
userText = boxText.slice(0, userTextLength);
document.querySelector('#elem').innerHTML = userText + placeholder;
}
if (boxText.length < placeholder.length) { // this would mean they used backspace, which also needs to be handled.
}
else { // the normal case, should look quite similar to the first if block
this.userTextLength += 1;
userInput =
}
}
Something I haven't handled here is the cursor focusing. That will need an 'onfocus' event, and will use the userTextLength property as well to decide where to place it. For some help on doing that, this answer looks like it should be helpful.
it is impossible, if it is, it will be very unattractive. But i have an idea can help you with jquery support.
You can view the demo here: http://hangaumy.com/order/
When you type, it will automatically add words in it (look like placeholder)
.box {
border: 1px solid;
border-radius: 10px;
padding: .25rem 1rem 1rem;
color: #555;
font-family: sans-serif;
display: flex;
flex-direction: column;
width: max-content;
}
.wrapper {
position: relative;
width: 450px;
}
.wrapper * {
font-size: 1.25rem;
letter-spacing: 2px;
font-family: monospace;
padding: .125rem .25rem;
display: flex;
width: calc(100% - 1rem);
}
input {
width: 4000px;
border: 0;
}
.placeholder {
position: absolute;
pointer-events: none;
left: 0;
top: 0;
width: min-content;
}
<div class="box">
<h2>Short Homepage Headline</h2>
<p>Use up tp 30 characters</p>
<div class="wrapper">
<input type="text">
<span class="placeholder">
______________________________
</span>
</div>
</div>
How about this for functionality, a good use case, and its attractiveness.
(trying to combat some of the negatives above, ha)
the placeholder text was a limited number of underscores (30)?
same font size, monospace, and letter spacing
This make a neat no-js character watcher for a headline writer. This way they will be able to see when it will break the template. But you don't necessarily have to be tied to it as far as a hard limit.