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");
});
Related
I'm trying to do something like this ... User clicks the button called "debug" and then the window scrolls to a div (#div2) with a "thank you" text inside, then (after 2 seconds with #div2 on the screen) I want the window to scroll to ANOTHER div (#div3) with the rest of the content. The problem is that I want to do everything with a smooth scroll, I tried it by myself for 2 days but with no results yet :(
Here's the code:
HTML:
<div id="div1">
<h2>hi! my name is <b>Alan Aguilar</b></h2>
<h3>and i'm a web develop...</h3>
<p class="pIn">ummm...</p>
<p class="pAp">sorry can u press this button for me, please?</p>
debug
</div>
<div id="div2">
<h2>Th4nk5.</h2>
</div>
<div id="div3">
<h2>Thanks.</h2>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
scroll-behavior: smooth;
}
#div1 h2 {
animation: opIn 2s backwards;
}
#div1 h3 {
animation: opIn 1.2s 1.4s backwards;
}
#div1 {
height: 650px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
margin-left: 300px;
}
#div1 h2, h3 {
font-weight: normal;
font-size: 30px;
margin-bottom: 10px;
}
#div1 h3 {
font-size: 23px;
}
.pIn {
font-size: 17px;
margin-top: 30px;
animation: opIn .5s 2.5s backwards;
}
.pAp {
font-size: 17px;
margin-top: 5px;
animation: opIn .5s 3.8s backwards;
}
#div2 {
display: flex;
justify-content: center;
align-items: center;
height: 700px;
background: linear-gradient(to top, #000000 0%, #ffffff 100%);
}
#div1 a {
width: 50px;
padding: 5px;
margin-top: 10px;
position: relative;
left: 245px;
text-decoration: none;
background-color: rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 2px;
animation: opIn .3s 4.5s backwards;
color: #000000;
}
#div1 a:hover {
background-color: rgba(0, 0, 0, .15);
box-shadow: inset 0px 0px 1px #000000;
}
#div2 h2 {
font-size: 190px;
}
#div3 {
display: flex;
justify-content: center;
align-items: center;
height: 700px;
background-color: #000000;
color: #ffffff;
}
#keyframes opIn {
from {opacity: 0;}
to {opacity: 1;}
}
Javascript:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
// --------------------------------------------------------------------------
// THIS CODE IS NOT MINE, I FOUND IT ON THIS PAGE LOOKING FOR THE SAME TOPIC.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
// --------------------------------------------------------------------------
$("a").click(function() {
setTimeout(function() {window.location = "#div3"}, 1500, function() {
})
})
Select the element with the id div3, get the offset top, and animate using jQuery's animate function:
window.onbeforeunload = function() {
window.scrollTo(0, 0);
}
// --------------------------------------------------------------------------
// THIS CODE IS NOT MINE, I FOUND IT ON THIS PAGE LOOKING FOR THE SAME TOPIC.
$(document).ready(function() {
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
// --------------------------------------------------------------------------
$("a").click(function() {
setTimeout(function() {
$('html, body').animate({
scrollTop: $("#div3").offset().top
}, 800);
}, 1500)
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
scroll-behavior: smooth;
}
#div1 h2 {
animation: opIn 2s backwards;
}
#div1 h3 {
animation: opIn 1.2s 1.4s backwards;
}
#div1 {
height: 650px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: left;
margin-left: 300px;
}
#div1 h2,
h3 {
font-weight: normal;
font-size: 30px;
margin-bottom: 10px;
}
#div1 h3 {
font-size: 23px;
}
.pIn {
font-size: 17px;
margin-top: 30px;
animation: opIn .5s 2.5s backwards;
}
.pAp {
font-size: 17px;
margin-top: 5px;
animation: opIn .5s 3.8s backwards;
}
#div2 {
display: flex;
justify-content: center;
align-items: center;
height: 700px;
background: linear-gradient(to top, #000000 0%, #ffffff 100%);
}
#div1 a {
width: 50px;
padding: 5px;
margin-top: 10px;
position: relative;
left: 245px;
text-decoration: none;
background-color: rgba(0, 0, 0, .1);
border: 1px solid rgba(0, 0, 0, .5);
border-radius: 2px;
animation: opIn .3s 4.5s backwards;
color: #000000;
}
#div1 a:hover {
background-color: rgba(0, 0, 0, .15);
box-shadow: inset 0px 0px 1px #000000;
}
#div2 h2 {
font-size: 190px;
}
#div3 {
display: flex;
justify-content: center;
align-items: center;
height: 700px;
background-color: #000000;
color: #ffffff;
}
#keyframes opIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<h2>hi! my name is <b>Alan Aguilar</b></h2>
<h3>and i'm a web develop...</h3>
<p class="pIn">ummm...</p>
<p class="pAp">sorry can u press this button for me, please?</p>
debug
</div>
<div id="div2">
<h2>Th4nk5.</h2>
</div>
<div id="div3">
<h2>Thanks.</h2>
</div>
I have several buttons that use the same class. I am using a click function to make adjustments to the button. The issue I am having is the click function is controlling all of the buttons with the same class.
I am using $(document.body) as the selector because the data is derived asynchronously.
I'm wanting to toggle the class for both the triggerPosition and triggerButton. Originally, I just had $(document.body).on('click', '.triggerButton', function() { and thought adding 'triggerPosition' into it would allow the $(this) function to work for both the triggerPosition and triggerButton, but it doesn't.
Does anyone see what I need to do? The triggerButton is working for the specific one clicked on. Currently, the triggerPosition is the issue.
$(document.body).on('click', '.triggerButton', '.triggerPosition', function() {
$('.triggerPosition').toggleClass('active');
$(this).toggleClass('active');
});
.triggerRow {
display: block;
border-bottom: 1px solid #2f2f2f;
width: 500px;
}
.triggerButton {
width: 55px;
height: 30px;
background: #4d4d4d;
border: 1px solid #2f2f2f;
border-radius: 20px;
position: relative;
box-sizing: border-box;
cursor: pointer;
}
.triggerButton.active {
background: #b82222;
}
.triggerPosition {
position: absolute;
left: -2px;
top: -2px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #FFF;
border: 2px solid #4d4d4d;
transform: translateX(0);
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
.triggerPosition.active {
border: 2px solid #b82222;
transform: translateX(21px);
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="triggerRow" data-triggerid="1">
<div class="triggerButton">
<div class="triggerPosition"></div>
</div>
</div>
<div class="triggerRow" data-triggerid="2">
<div class="triggerButton">
<div class="triggerPosition"></div>
</div>
</div>
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)" );
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>
I have e.x 3 boxes, the red one should have at start a bigger size then the others (through css). Now, when I click on the green or yellow box the red gets smaller size same as green or yellow had before clicking. And the clicked one gets the CSS Style (size) of the red one. I want to make it with JQuery but don't know how?
.r1, .r2, .r3{
width: 80px;
height: 80px;
margin: 40px;
float: left;
}
.r1{
background-color: red;
position: inherit;
transform: scaleY(1.2);
transform: scale(1.2);
transform-origin: center;
border: 2px solid #15dc6e;
}
.r2{
background-color: green;
}
.r3{
background-color: yellow;
}
<div class="content">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
Fiddle: https://jsfiddle.net/cwx3ukra/16/
$(document).ready( () => {
$('.content div').click( e => {
// Remove zoom class from all elements
$('.content div').removeClass('big');
// Only apply to the clicked element
$(e.target).addClass('big');
});
})
.r1,
.r2,
.r3 {
width: 80px;
height: 80px;
margin: 40px;
float: left;
transform: scale(1);
transition: all 500ms ease-out;
}
.r1 {
background-color: red;
}
.r2 {
background-color: green;
}
.r3 {
background-color: yellow;
}
.big {
transform: scale(1.2);
border: 2px solid #15dc6e;
transform-origin: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="r1 big"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
Working JSFiddle Here
You can achieve a smooth transition using pure CSS:
.r1,
.r2,
.r3 {
width: 80px;
height: 80px;
margin: 40px;
float: left;
transform: scale(1);
transition: all 500ms ease-out;
}
.big {
transform: scale(1.2);
border: 2px solid #15dc6e;
transform-origin: center;
}
The transition property will automatically transition from one rule to another. In this example, it transitions from transform: scale(1) to transform: scale(1.2).
Try this out:
Codepen: https://codepen.io/samandalso/pen/qKrLLM
$(function() {
$('.content div').on('click', function(){
$('.content div').not($(this)).removeClass('scaled');
$(this).toggleClass('scaled');
});
});