This question already has an answer here:
Is There an Alternative Method to Mimic the Behavior of an Anchor Link/Target Pseudo-Class?
(1 answer)
Closed 5 years ago.
I have developed a lightbox feature, made with CSS for the most part. Though it functions well at a glance, I've been facing some complications with the way that it opens and closes with anchor links, the primary issue being that it adds on entries to the browser history.
Here's an example of what I am referring to:
I load a page with an image with the lightbox feature applied.
I click on the image, and the lightbox window opens.
Then I close the lightbox window and it returns back to the page; however, doing this has now added 2 additional history entries by opening and closing the lightbox via the anchor links behavior, (which append the page's URL with http://SITEURL.com/PAGEURL#theanchor).
Judging from previous responders, linking to anchors seem to be the least recommended for producing this sort of functionality. If that is the case, how else could I implement this, (and would I potentially be able to avoid the use of anchors altogether)?
Here is a full snippet that presents the lightbox feature in action, as well as the anchor link behavior:
$('.pic > img').click(function() {
var srcToCopy = $(this).attr('src');
$('body').find('.imgsrc').attr('src', srcToCopy);
$('body').addClass('no-scroll');
});
$('#customlightbox-controls').on('click', function() {
$('body').removeClass('no-scroll');
});
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
}
.pic,
#imgsrc {
display: inline-block;
}
img {
width: 100px
}
a {
display: inline-block;
line-height: 0;
}
.container {
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox:target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox:target img {
opacity: 1;
}
.customlightbox:target~#customlightbox-controls {
top: -3px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</a>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</a>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</a>
</div>
<!-- Lightbox Prompt -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
Hopefully there is some sort of referable solution.
I accidentally posted this answer but, you can remove anchor tags and and just add cursor: pointer; css to your .pic class.
$('.pic > img').click(function() {
var srcToCopy = $(this).attr('src');
$('body').find('.imgsrc').attr('src', srcToCopy);
$('body').addClass('no-scroll');
});
$('#customlightbox-controls').on('click', function() {
$('body').removeClass('no-scroll');
});
body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 100px
}
a {
display: inline-block;
line-height: 0;
}
.container {
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox:target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox:target img {
opacity: 1;
}
.customlightbox:target~#customlightbox-controls {
top: -3px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox:target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Prompt -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
You could just prevent the default action and not add the hash to the url (or history)
$('a[href^="#"]').click(function(evt){
evt.preventDefault()
});
Has been a long time since I have used Lightbox and not sure if this will conflict with it's features or not
Related
I need help with this CSS, when I hover to see the details of the movie it flip but the whole word in it flip too.
Is there a way that I can make the word flip first and then when I hover the word becomes normal?
This is the HTML code, it was written in JS file and the CSS code.
body {
background-color: var(--primary-color);
font-family: 'Poppins', sans-serif;
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.overview {
background-color: white;
padding: 2rem;
position: absolute;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
transform: translateY(101%);
}
.movie:hover .overview {
transform: rotateY(180deg);
transition: transform 0.3s ease-in;
overflow-y: auto;
}
<img href = "#" src =https://i.pinimg.com/originals/a4/7b/a5/a47ba59b4a353e0928ef0551ca44f980.jpg>
<div class="movie-info">
<h3>Title</h3>
</div>
<div class="overview">
<h3>Overview</h3>
lorem ipsuim
<br/>
</div>
.card {
position: reletive;
height: 400px;
width: 250px;
font-size: 32px;
text-align: center;
}
.card__side--back {
height: 400px;
width: 250px;
/* background-color: orange; */
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
background-color: orange;
transform: rotateY(180deg);
}
.card__side--front {
height: 400px;
width: 250px;
/* background-color: orange; */
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
background-color: teal;
}
.card:hover .card__side--front {
transform: rotateY(-180deg);
}
.card:hover .card__side--back {
transform: rotateY(0);
}
<div class="card">
<div class="card__side">
<div class="card__side--front">This is the front </div>
<div class="card__side--back"> This is the back</div>
</div>
</div>
From my understanding this is what you were trying do achieve. The key here is backface-visibility and hovering on the container that contains both cards, because when hidden it cant be hovered over.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
what I want is to center the anchor tag texts vertically also I want the "contents" div to fit the screen so that if the screen gets smaller or bigger the anchor tag doesn't run off the margin creating overflow which I don't want, I tried a bunch of different ways to fix this but none seem to work, any help is appreciated! here's the code...
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
display:block;
z-index: 1001;
background-color: black;
overflow: hidden;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You can just add display: flex; and align-items: center; to the .menu-overlay.open identifier:
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
$('.menu-link').click(function() {
$('body').toggleClass('no-scroll');
});
.nav {
display: flex;
justify-content: space-between;
padding: 0 5%;
}
#brandname {
color: black;
font-weight: bold;
font-family: Circular Std Black;
line-height: 60px;
font-size:20px;
margin-top: 45px;
}
.menu {
position: absolute;
margin-top: 50px;
right: 5%;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
cursor: pointer;
}
.menu-icon {
position: absolute;
width: 20px;
height: 15px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: white;
height: 3px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7.5px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7.5px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #E095F0;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
transition: opacity 0.2s ease-in-out;
opacity:0;
display:hidden;
}
.menu-overlay.open {
position: fixed;
top:0;
left:0;
height: 100vh;
width: 100vw;
opacity:1;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.no-scroll{
overflow: hidden;
}
/***********anchor tag************/
.contents {
display: table;
margin-left: 5%;
margin-right: 5%;
}
.contents a{
display: table-cell;
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
padding-left: 60px;
padding-right: 60px;
color: white;
vertical-align: middle;
}
<nav class="nav">
<div id="brandname">Test</div>
<div class="menu">
<span class="menu-circle"></span>
<a class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<div class="contents">
Home
About
Home
About
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
You can easily achieve this using flexbox:
Here's the CSS to achieve what you want:
.menu-overlay.open {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 1;
display: block;
z-index: 1001;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
.contents {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex: 1;
max-width: 100%;
justify-content: space-around;
}
.contents a {
text-decoration: none;
font-family: Circular Std Book;
font-size: 30px;
color: white;
}
I am creating a mobile menu and found an example on Codepen, the only problem is that I don't want to load JQuery just for the menu. I'm fairly new to coding and was wondering if there was a way to convert the toggle class function to pure javascript. If you could make a working example that would be ideal. Also if you know of a tool to convert to javascript or something that lists what each function looks like in both so I could covert it myself, that would be good to know.
$(function() {
$(".menu-link").click(function(e) {
e.preventDefault();
$(".menu-overlay").toggleClass("open");
$(".menu").toggleClass("open");
});
});
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #000;
font-family: Helvetica Neue, Arial, sans-serif;
color: #fff;
overflow: hidden;
}
/* ------------- */
.menu {
position: absolute;
top: 20px;
right: 20px;
height: 46px;
width: 46px;
}
.menu-link {
width: 100%;
height: 100%;
position: absolute;
z-index: 1002;
}
.menu-icon {
position: absolute;
width: 20px;
height: 14px;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 1px;
}
/* ------------- */
.menu-line {
background-color: #333;
height: 2px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
transition: all 0.25s ease-in-out;
}
.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}
.menu-line-3 {
bottom: 0;
}
.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}
.menu.open .menu-line-2 {
opacity: 0;
}
.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}
/* ------------- */
.menu-circle {
background-color: #fff;
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
transform: scale(1);
z-index: 1000;
transition: transform 0.3s ease-in-out;
}
.menu:hover .menu-circle {
transform: scale(1.2);
}
.menu.open .menu-circle {
transform: scale(60);
}
/* ------------- */
.menu-overlay {
background-color: #fff;
color: #333;
height: 100%;
width: 100%;
position: fixed;
text-align: center;
transition: opacity 0.2s ease-in-out;
z-index: 1001;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.menu-overlay.open {
opacity: 1;
visibility: visible;
}
/* ------------- */
.info {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay-info {
text-align: center;
color: #111825;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="info">Content</h1>
<div class="menu">
<span class="menu-circle"></span>
<a href="#" class="menu-link">
<span class="menu-icon">
<span class="menu-line menu-line-1"></span>
<span class="menu-line menu-line-2"></span>
<span class="menu-line menu-line-3"></span>
</span>
</a>
</div>
<div class="menu-overlay">
<h1 class="overlay-info">
Links
</h1>
</div>
Got it working using onclick="myFunction" and
function myFunction() {
var menu = document.getElementById("something");
var overlay = document.getElementById("somethingelse");
something.classList.toggle("open");
somethingelse.classList.toggle("open");
}
I am quite new to coding and I am trying to implement a dot navigation bar. Below is my code.
<html>
<head>
<link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
/* Init */
html { width: 100%; height: 100%; }
body {
position: relative;
width: 100%; height: 100%;
background: #EA7E00;
}
.dot-nav {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/* Fin Init */
.dot-nav--item {
position: relative;
display: block;
width: 16px; height: 16px;
margin-bottom: 28px;
border: 3px solid #fff;
border-radius: 50%;
&:before, &:after { content: ""; }
&:before {
position: absolute;
top: -1px; bottom: -1px; left: -1px; right: -1px;
transform: scale(0);
opacity: 0;
border-radius: 50%;
background-color: #fff;
transition: all .3s;
}
&:after {
display: block;
width: 3px; height: 30px;
margin: 13px auto 0;
background-color: #fff;
}
&:last-child:after { display:none; }
&:hover { cursor: pointer; }
&.is-active:before {
opacity: 1;
transform: scale(1);
}
}
.dot-nav--link {
position: absolute;
top: 50%;
visibility: hidden;
transform: translate(-120%, -50%);
width: 200px;
padding: 5px 10px;
opacity: 0;
color: #111; background-color: #fff;
transition: all .3s;
&:before {
content: "";
position: absolute;
top: 50%; left: 100%;
width: 0; height: 0;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #fff;
border-style: solid;
transform: translateY(-50%);
}
.dot-nav--item:hover & {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
}
</style>
<script type="text/javascript">
$('.dot-nav--item').on('click', function(){
$this = $(this),
$siblings = $this.siblings();
$this.addClass('is-active');
$siblings.removeClass('is-active');
})
</script>
</head>
<body><nav class="dot-nav">
<ul class="dot-nav--list list-unstyled">
<li class="dot-nav--item is-active">Lorem ipsum dolor.</li>
<li class="dot-nav--item">Assumenda, officia omnis.</li>
<li class="dot-nav--item">Sed, alias totam.</li>
<li class="dot-nav--item">Officia, itaque, vitae!</li>
<li class="dot-nav--item">Repellendus, veritatis, deserunt.</li>
</ul>
</nav>
</body>
</html>
The dots do not seem to be showing content when I hover over it and does not fill when I click on it either. I can't seem to find what is wrong. I suspect it has something to do with the script source but I am not so sure. Do you have any suggestions?
You have added the visible styles in a wrong place. Look at the following syntax
.dot-nav--item:hover & {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
The above style you have added under the class .dot-nav--link. This is wrong. It should be like below and you have to place after the .dot-nav--links declarations.
.dot-nav--item:hover .dot-nav--link {
visibility: visible;
opacity: 1;
transform: translate(-110%, -50%);
}
So whenever you hover the items it will try to find the child with the class .dot-nav--link and make it visible. Not sure what you are trying to achieve through jquery code.
FIDDLE DEMO
Messing with the jawbreaker-esque input animation found in this code pen
The code pen only has ONE field, but if you add a second, like this...
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>
And then add this CSS so the 2nd field moves down below the 1st...
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
You'll see that when you click into either input field, the desired animation happens to both.
So how could I change the JS so that it only happens to the input field you click into?
You can use $.parent() to get the parent, then target .placeholder, .border and .lb relative to the parent of the input that was clicked.
$('input[type=text]').blur(function(){
$parent = $(this).parent();
$parent.find('.placeholder').removeClass("placeholder--animate");
$parent.find('.border').removeClass("border--animate");
$parent.find('.lb').removeClass("lb--animate");
checkInput($(this));
})
.focus(function() {
$parent = $(this).parent();
$parent.find('.placeholder').addClass("placeholder--animate");
$parent.find('.border').addClass("border--animate");
$parent.find('.lb').addClass("lb--animate");
checkInput($(this));
});
function checkInput($input) {
if ( $input.val()) {
$input.prev('.placeholder').css('display', 'none');
} else {
$input.prev('.placeholder').css('display', 'visible');
}
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);
body {
font-family: 'Open Sans', sans-serif;
}
.container {
position: absolute;
top: 50%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
input[type=text] {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
background-color: transparent;
color: #7f8c8d;
font-weight: 600;
outline: none;
border: none;
border-bottom: 1px solid #bdc3c7;
}
.placeholder {
position: absolute;
bottom: 5px;
left: 0;
margin: 0;
font-size: 13px;
color: #95a5a6;
transition: .2s all ease-out;
}
.lb {
position: absolute;
top: 10px;
left: -30px;
z-index: 40;
margin: 0;
font-size: 10px;
color: #3498db;
opacity: 0;
transition: .2s all ease-out;
}
.lb--animate {
opacity: 1;
left: 0;
}
.placeholder--animate {
left: 20px;
opacity: 0;
}
.border {
position: absolute;
bottom: 0px;
display: inline-block;
width: 0;
height: 2px;
padding: 0;
margin: 0;
background-color: #3498db;
transition: .2s width ease-out;
}
.border--animate {
width: 100%;
}
.container2 {
position: absolute;
top: 75%;
left: 50%;
width: 250px;
height: 50px;
transform: translate(-50%, -50%);
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="lb">username</p>
<p class="placeholder">username</p>
<input type="text" />
<div class="border"></div>
</div>
<div class="container2">
<p class="lb">username2</p>
<p class="placeholder">username2</p>
<input type="text" />
<div class="border"></div>
</div>