So my basic idea is to add a button to each card which then flips the card and resets the previously flipped card. Now how do I make a button specific to each card which can flip/unflip the card and unflip the previously flipped card (when needed to)
I have this JSFiddle which I found in this question. I looked around the internet but couldn't find any solutions to this specific problem. It might be similar to this. Hope this could help :)
something like this too maybe
$('.flip-container .flipper').click(function() {
// flip back previous hovered element
$('.flip-container.hover').toggleClass('hover');
// flip current element
$(this).closest('.flip-container').toggleClass('hover');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
It seems you just need to add a button and add it to the selector
$('.flip-container .flipper button').click(function() {
// flip back previous hovered element
$('.flip-container.hover').toggleClass('hover');
// flip current element
$(this).closest('.flip-container').toggleClass('hover');
});
/* flip the pane when hovered */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
<button>Flip</button>
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
<button>Flip</button>
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
Related
I have been trying for hours to get my playing cards to flip when the player clicks on them. When the eventListener is fired it should run the flip function which toggles between the front/backsides of a card. What am I doing wrong?
const playingCards = document.querySelectorAll('.playing-cards');
function flipCard(){;
this.classList.toggle("flip")
}
playingCards.forEach((card) => card.addEventListener("click", flipCard));
.playing-cards{
display: inline-block;
padding: 20px;
position: relative;
cursor: pointer;
}
.playing-cards .flip{
transform: rotateY(180deg);
}
.front-card{
background-color: aqua;
width: 300px;
height: 300px;
transform: rotateX(0deg);
}
.back-card{
background-color: greenyellow;
width: 300px;
height: 300px;
transform: rotateY(180deg);
}
.front-card,
.back-card{
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<div class="memory-game">
<div class="playing-cards">
<div class="front-card">A</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">B</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">a</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">b</div>
<div class="back-card"></div>
</div>
</div>
<body>
<script src=index.js></script>
</body>
</html>
Answer derived from here
const playingCards = document.querySelectorAll('.playing-cards');
function flipCard() {
this.classList.toggle("flip")
}
playingCards.forEach((card) => card.addEventListener("click", flipCard));
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.memory-game {
background-color: transparent;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.playing-cards {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
cursor: pointer;/*clickable-cursor*/
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.playing-cards.flip {
transform: rotateY(180deg);
}
/* Position the front and back side */
.front-card, .back-card {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.front-card {
background-color: aqua;
color: black;
}
/* Style the back side */
.back-card {
background-color: greenyellow;
color: white;
transform: rotateY(180deg);
}
<div class="memory-game">
<div class="playing-cards">
<div class="front-card">A</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">B</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">a</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">b</div>
<div class="back-card"></div>
</div>
</div>
Edit: Added cursor effect
I'm trying to blur the background when I click on an image and it popup.
I already have it where it blurs a section of the page. However, you can see anything that is outside of that section not blur-out.
CSS
.content2#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
#popup{ /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active{
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
HTML
<section class="port" id="pLink">
<div class="heading" id="blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2" id="blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="../mywebsite/img/bp.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="../mywebsite/img/bp.jpg" class="img-1">
</div>
</section>
<div class="footer">
<p>Copyright</p>
</div>
JavaScript
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
I tried adding the same id="blur" to the footer but the problem is that it only works for one <div>.
I also tried adding a separate css code for let say `class="footer" but it doesn't work.
.footer#blur.active{
filter: blur(20px);
pointer-events: none;
user-select: none;}
I also tried moving the id tag to the section, but that only blurs the heading not the rest.
All you have to do is to add a "blur" class to anyone element you want to get the effect when the image is clicked.
The changes I made:
Change in CSS #blur to .blur
JS - The function takes all elements with class .blur and has add or remove class .active
HTML - added classes .blur to all elements that need to be blurred.
In one document you can have many classes with the same name, but you can have only one element with a unique ID! This is the reason I change the blur from ID to CLASS
function toggle() {
var blur = document.getElementsByClassName('blur');
for (var i = 0; i < blur.length; i++) {
blur[i].classList.toggle('active');
}
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
.blur.active {
filter: blur(2px);
pointer-events: none;
user-select: none;
}
#popup {
/*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
#popup.active {
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}
<section class="port" id="pLink">
<div class="heading blur">
<h2>Title</h2>
<p>Description.</p>
</div>
<div class="content2 blur">
<div class="pBox">
<a href="#" class="anchor" onclick="toggle()" id="img-1">
<img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
<div class="overlay">
<h5>Image Description</h5>
</div>
</a>
</div>
</div>
<div id="popup">
<a href="#" class="anchor" onclick="toggle()">
<img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
</div>
</section>
<div class="footer blur">
<p>Copyright</p>
</div>
I am adding a close button by customizing the modal bootstrapping.
I want it on the right of modal for that I gave a 'position: absoluteorposition: fixedand modified thetopandright` it.
The problem is that in doing so the button becomes unusable. From what I gather, there is a conflict between the data-dismiss: modal (attribute that makes the element closing the modal) with the 'position: absolute`.
I tried other ways to make such "button" importing a .svg, create a <button>, <span> in addition to changing the position: absolute by float: right.
By doing so, only a small portion of the button area becomes the link to close and not the whole area. Experience in mobile and desktop is pretty nasty as it is necessary to press / click several times to find the right area, and the right is ALL button area to be a link to close the modal.
The following code snippet and to become more clear:
.close-modal {
position: absolute;
/* REMOVE `POSITION` AND THE BUTTON WORKS */
width: 75px;
height: 75px;
background-color: transparent;
right: 35px;
top: 25px;
cursor: pointer
}
.close-modal:hover {
opacity: .3;
}
.lr {
height: 75px;
width: 1px;
margin-left: 35px;
background-color: #222;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
z-index: 1051;
}
.rl {
height: 75px;
width: 1px;
background-color: #222;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
z-index: 1051;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<a href="#modal" class="portfolio-link" data-toggle="modal">
CALL MODAL
</a>
<div class="portfolio-modal modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<p>CONTENT MODAL CONTENT MODAL</p>
<p>CONTENT MODAL CONTENT MODAL</p>
<p>CONTENT MODAL CONTENT MODAL</p>
</div>
</div>
</div>
</div>
</div>
</div>
How I can solve this?
There is some another element stacked on top of your close button.
Setting z-index to a high value would make your dismiss button work.
This would make the close-modal button at the top and thus clickable.
You can do this by:
.close-modal{
z-index: 1100;
position: absolute;
...
}
I am creating a "live search" feature, this works fine functionally, however, on responsive testing, it breaks almost as soon as you get to tablet/mobile size.
I am using bootstrap for layout and the injected content from the live search is basically just a template that is injected.
Here is my HTML, SCSS and JS as it stands:
$(function() {
$(".brand-page-search-box").on("input", function(e) {
e.preventDefault();
var containerTemplate,
itemTemplate,
root = 'http://jsonplaceholder.typicode.com';
containerTemplate = `<div class="row search-result-item-container"></div>`;
$.ajax({
url: root + '/posts/1',
method: 'GET'
}).then(function(data) {
$(".search-results").html(containerTemplate);
let returnedJSONToObj = JSON.parse(JSON.stringify(data)),
userID = returnedJSONToObj.userId,
id = returnedJSONToObj.id,
title = returnedJSONToObj.title,
body = returnedJSONToObj.body;
itemTemplate = `<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4">
<div class="flip-container">
<div class="card card-inverse">
<div class="front">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
<div class="back">
<div class="card-block">
<h3 class="card-title">${title}</h3>
<p class="card-text">${body}</p>
Button
</div>
</div>
</div>
</div>
</div>`;
$(".search-result-item-container").append(itemTemplate);
});
return false;
});
});
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&: hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}
<div class="container-fluid brand-search-bar">
<div class="row">
<div class="col-xs-12">
<nav class="navbar">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item">
<form action="#" id="form">
<div class="input-group">
<input type="text" class="form-control brand-page-search-box" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="container brand-img-container search-results"></div>
Now, the cards inject into the post fine, but look at the following screens to see how the sizing goes:
Desktop:
Laptop/Tablet:
Mobile:
As you can see, on mobile, it totally breaks for some reason and the cards "fold" into one another, but if bootstrap is meant to be handling the layout, why is this happening?
The inspector isnt being much help, nor are some of the articles I have been reading on here and elsewhere, unusually, anyone got any ideas on how to fix this?
I am using bootstrap 4 and jquery 2 if that helps.
If you have any questions, comments or requests, please do ask in the comments below.
You need to fix the flip effect css. Nothing to do with twitter bootstrap.
Your .flip-container is not getting height, so in xs when many containers stack you see the probleme.
You could set a fixed height for your .flip-container but since you want dynamic height here is a solution
Add .front{ position:relative} and .back{top: 0}
.flip-container {
-webkit-perspective: 1000;
perspective: 1000;
.card {
position: relative;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
&:hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
z-index: 2;
position:relative; <---
.card-block {
background: url("http://lorempixel.com/1920/1080/");
}
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
top:0; <---
.card-block {
background: url("http://lorempixel.com/900/500/");
}
}
}
}
I have a page with a series of cubes. These cubes are transformed in 3D using CSS.
They display fine in Chrome on Windows 7, but in Chrome on Windows XP all I see is a white background. Both are running the latest version of Chrome.
View the full page on jsfiddle
<div class="cube" style="-webkit-transform: translateZ(-32.5px);">
<div class="front" style="-webkit-transform: translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
<div class="back" style="-webkit-transform: rotateX(-180deg) translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
<div class="right" style="-webkit-transform: rotateY(90deg) translateZ(32.5px);">
<img src="/search.png" width="65" height="65">
</div>
<div class="left" style="-webkit-transform: rotateY(-90deg) translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
<div class="top" style="-webkit-transform: rotateX(90deg) translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
<div class="bottom" style="-webkit-transform: rotateX(-90deg) translateZ(32.5px);">
<img src="search.png" width="65" height="65">
</div>
</div>
Chrome will only properly render 3D css if GPU acceleration is enabled. If you test the same code on safari for windows it should work.
To see if your chrome has GPU acceleration enabled, type about:GPU into the address bar and see what it says.
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
Hmm, perhaps you don't have a 3D Rendering enabled GPU, or maybe your graphics drivers don't support it?
Follwing will work on chrome and firefox
CSS code
.flip-container {
perspective: 1000;
-webkit-perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.flip-container, .front, .back {
float: left;
height: 179px;
margin-bottom: 49px;
margin-left: 31px;
width: 258px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden;
position: absolute;
top: 0;
left: -42px;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
HTML code
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="product-box front">
#front content
</div>
<div class="product-box back">
#back content
</div>
</div>
</div>
Have you tried modernizr?
Go to this page
http://modernizr.com/download/#-flexboxlegacy-csstransforms3d-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
Click on the download below.
Use the JavaScript on your page.
If it will work the way I think, on you Win7 machine in Chrome the html tag should have a class of csstransforms3d and on the WinXP machine in Chrome the html tag should have a class of no-csstransforms3d
I don't know if modernizr/chrome is that intelligent to see, if 3d acceleration is available and reflect it in the proper css class
edit
Here's a fiddle
http://jsfiddle.net/uSbYL/1/