I have a major problem in understanding how to make the JavaScript code in such a way that when the user clicks on the "Create" button it shows face 1 and if he clicks on the "Compound" button it shows face 2 books.
Also on each back of the book there is an X button that closes the displayed page and displays the normal page of the book. I would like to use classes, not ids because there is no point. I also have an .is-flipped property that I want to assign to the parent div, which contains the "Create" and "Compound" buttons.
HTML Code:
<div class="node-claim-single swiper-slide"> <!-- CONTENT-->
<div class="card__face front"> <!--Front Face-->
<div class="tier-claim-title">HERA</div>
<img src="./assets/images/hera1.png" class="node-claim-img">
<div class="node-claim-create">
<div class="node-create">Create</div>
<div class="node-compound">Compound</div>
</div>
</div>
<div class="card__face create__back"> <!--Create Back Face-->
<button class="btn modal-close"><i class="uil uil-multiply"></i></button> // This button will set the .create_back face to display:none and toggle the parent DIV .node-claim-single to .is-flipped
<div class="tier-claim-earning">CREATE</div>
<div class="tier-claim-title">HERA</div>
<img src="./assets/images/hera1.png" class="node-claim-img">
<div class="rewards-available">Cost: 25 ZEUS</div>
<div class="claim-title-underline">
<img src="./assets/images/undlinesm.png">
</div>
<div class="create-node-section">
<div class="blue-input-box">
<input type="text" class="referral-text blue-input" placeholder="Node name">
</div>
<button class="btn btn-primary"><i class="uil uil-check"></i> Create</button>
</div>
</div>
<div class="card__face compound__back"> <!--Compound Back Face-->
<button class="btn modal-close"><i class="uil uil-multiply"></i></button> // This button will set the .compound__back face to display:none and toggle the parent DIV .node-claim-single to .is-flipped
<div class="tier-claim-earning">COMPOUND</div>
<div class="tier-claim-title">HERA</div>
<img src="./assets/images/hera1.png" class="node-claim-img">
</div>
</div>
CSS Code:
.node-claim-single {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.node-claim-single.is-flipped {
transform: rotateY(-180deg);
}
.node-claim-single .card__face {
position: absolute;
background-image: url(./images/nodeclaimbg1.png);
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
#media screen and (min-width: 768px) and (max-width: 1300px) {
.node-claims .node-claim-single {
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
}
.front, .back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.back {
height: 100%;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transform: rotateY(180deg);
display: none;
}
.back.display {
display: flex;
}
And JavaScript Code:
// Get the card container
const cardContent = document.querySelectorAll('.node-claim-single');
const heraCreateFace = document.querySelectorAll('.create__back'); // Backface for create
const heraCompoundFace = document.querySelectorAll('.compound__back'); // Backface for compound
// Get the buttons that flips the card
const createbtn = document.getElementById("node-create"); // Button which flips the card to the create backface
const compoundbtn = document.getElementById("node-compound"); // Button which flips the card to the compound backface
// Get the <span> element that closes the modal
const closeBtn = document.querySelectorAll('.modal-close');
// When the user clicks on the Create button, flips the card to the create backface
createbtn.onclick = function() {
heraCreateFace .classList.add('display');
flipCard();
}
compoundbtn.onclick = function() {
heraCompoundFace .classList.add('display');
flipCard();
}
function flipCard() {
cardContent.forEach(x => x.classList.toggle('is-flipped'));
// cardContent.classList.toggle('is-flipped'); // Flip animation
}
function flipCardBack() {
// Remove back of the card and displays the front face.
setTimeout(function() {
heraCreateface.classList.remove('display');
heraCompoundface.classList.remove('display');
}, 1000);
flipCard();
}
closeBtn.forEach(function(btn) {
btn.addEventListener("click", flipCardBack);
});
It only works for one card, and assigns the .is-flipped class to all .node-claim-single DIVs. I want the .is-flipped class to be assigned only to the parent DIV of the "Create" or "Compound" button, then to display .create__back if the "Create" button is pressed or .compiund__back if the "Compound" button is pressed. If the closing X button displayed on both "compound__back and .create__back" is pressed, I want the parent DIV, i.e. .node-claim-single, to rotate and be displayed in front of .card__face front.
Thank you very much and I hope I was as clear as possible.
Related
I've made a gallery, but I'm having trouble getting the image to enlarge when clicked. I want to be able to click on the largest image and then it will enlarge and appear in the middle of the page.
Below is the link to the code:
function galleryFunction1(smallImg) {
let fullImg = document.getElementById('imageBox1');
fullImg.src = smallImg.src;
}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1400px;
}
.gallery {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin: 100px 10px;
}
.gallery img {
cursor: pointer;
}
.boxOfimages .big-img img {
display: block;
margin: 0 auto;
width: 290px;
margin-bottom: 10px;
}
.boxOfsmallImgs {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.boxOfsmallImgs img {
width: 70px;
opacity: 0.7;
transition: opacity 0.4s ease;
margin: 2px;
}
.boxOfsmallImgs img:hover {
opacity: 1;
}
}
.boxOftext {
display: flex;
flex-direction: column;
align-items: start;
font-size: 0.8rem;
}
.boxOftext h2 {
padding: 20px 10px;
}
.boxOftext p {
padding: 10px 10px;
}
<main class="main wrapper">
<section class="gallery">
<div class="boxOfimages">
<div class="big-img">
<img id="imageBox1" src="https://cdn.pixabay.com/photo/2013/04/02/18/58/sculpture-99484_960_720.jpg" alt="">
</div>
<div class="boxOfsmallImgs">
<img src="https://cdn.pixabay.com/photo/2013/04/02/18/58/sculpture-99484_960_720.jpg" onclick="galleryFunction1(this)" alt="">
<img src="https://cdn.pixabay.com/photo/2016/09/07/16/19/pile-1651945_960_720.jpg" onclick="galleryFunction1(this)" alt="">
<img src="https://cdn.pixabay.com/photo/2018/05/11/08/11/pet-3389729_960_720.jpg" onclick="galleryFunction1(this)" alt="">
</div>
</div>
<div class="boxOftext">
<h2>“Dotyk burzy” / “Touch of Storm”</h2>
<p>rzeźba / sculpture gips patynowany, granit / patinated plaster, granite 100 x 28 x 28 cm 2020r.
</p>
<p>dostępna</p>
</div>
</section>
https://codepen.io/yerbamatepl/pen/mdBGoed
Thank you in advance for your help.
You can use a modal for this. Have a image tag inside the modal, and hide the entire modal by default.
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img src="" id="modal-image" />
</div>
</div>
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 50px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
margin: auto;
text-align: center;
}
.modal-image {
display: inline-block;
}
When the image is clicked, show the modal and set the src of the modal image to which image triggered the event.
// Get the gallery box
var imageBox1 = document.getElementById("imageBox1");
// Get the modal image tag
var modal = document.getElementById("myModal");
var modalImage = document.getElementById("modal-image");
// When the user clicks the big picture, set the image and open the modal
imageBox1.onclick = function (e) {
var src = e.srcElement.src;
modal.style.display = "block";
modalImage.src = src;
};
You can also add a "X" that will close the modal as I added in my example below:
https://codepen.io/swampen/pen/vYezMGx
You need to create a popup window with an image element inside:
<div class="backdrop">
<div class="popup">
<img src="" class="popup-image" />
</div>
</div>
In CSS you need to make the backdrop element as fixed:
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
So your element will be pulled to each side
The popup element will have absolute positioning:
position: absolute;
width: 500px;
height: auto;
top: 50%; // to put it in the middle
left: 50%;
transform: translate(-50%, -50%);
And finally img element should have max-width as 100%.
Also you need to make open/close functionality, to do that you need to set display: block/none on the backdrop element accordingly on click
https://jsfiddle.net/ut1mgcLb/1/
This is my HTML:
<div class="object1">
<div class="snax-voting-container-body">
<div class="snax-voting snax-voting-positive snax-voting-large" data-snax-item-id="297">
<div class="snax-voting-score">
<strong>6203</strong> points
</div>
<span class="snax-vote-icon snax-vote-icon-caret"></span> Upvote
<span class="snax-vote-icon snax-vote-icon-caret"></span> Downvote
</div>
</div>
<a href=" https://themeforest.net/item/bimber-viral-buzz-wordpress-theme/14493994 ">
<img id="postTB" src=" https://i.imgur.com/Nf57W2G.jpg"></a> 25 Delicious Things To Cook In September (themeforest.net)<img alt="" src="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&r=g&d=retro" srcset="//www.gravatar.com/avatar/9f221658beaba2ee853f978fa48f49c2?s=40&r=g&d=retro 2x" class="avatar avatar-40 photo" height="40" width="40">
</div>
My CSS:
#postTB{
width:10%;
}
.snax-voting-container-body {
display: inline;
align-items: center;vertical-align: middle;
position: relative;
}
.snax-voting {
display: inline-flex;
flex-direction: column;
}
.snax-voting a {
display: block;
}
.snax-voting-upvote {
order: 0;
background-image: url('https://i.imgur.com/69alhp8.png');
background-size: 10px 20px;
display: inline-block;
width: 20%;
height: auto;
content:"";
transform: translateX(50%);
}
.snax-voting-score {
order: 1;
}
.snax-voting-downvote {
order: 2;
background-image: url('https://i.imgur.com/YklTOzm.png');
background-size: 10px 20px;
display: inline-block;
width: 20%;
height: auto;
content:"";
transform: translateX(50%);
}
#postTB{
position: relative;
top: 50%;
transform: translateY(50%);
}
and my (commented out) jQuery:
//var $div = $('.snax-voting-container-body');
//$div.text($div.text().replace('points', ''))
//$div.text($div.text().replace('upvote', '^'))
Whenever I try to use that jQuery, for some reason it just causes everything to fall out of alignment.
Is there a way to remove the 'points', 'upvote', and 'downvote' text while keeping everything vertically centered?
I initially did color:transparent to hide the text before realizing how bad it looked when someone highlighted the page.
use visibility property of CSS. This will not cause alignment issues as it will take up space in the dom unlike the display property.
.hide-element {
visibility: hidden;
}
Add this class to your element and add/remove class from js on conditional values.
$div.toggleClass('hide-element', boolean_condition);
When you are retreiving the text content with $div.text(), it gets all text without the HTML tags.
Then when you are injecting it back into the div with $div.text( ... ), it sets the result as the text content of the div, actually clearing all inside of it. Because what you inject has been stripped of the HTML part, you loose your HTML tags.
try with:
$div.html($div.html().replace('points', ''))
$div.html($div.html().replace('upvote', '^'))
Howhever, take care not to replace text that belongs to your classes or tags that would correspond to "points" or "upvote" in the process.
Update:
I've added a screen record to show the problem. This is reproduced in browserStack ie11, with the "run code snippet" button in this question.
I'm working on a dropdown menu, which needs to work in IE11. However the flex container twitches when the menu opens up. Not using flex on the container or not using the button tag would solve the problem, however the container is outta my control and I'd prefer to use button if it is possible. Does anybody know what is wrong with this?
var handle = document.getElementsByTagName('button')[0];
var inner = document.getElementsByClassName('inner')[0];
var dropdownOpen = false;
handle.addEventListener('click', function() {
dropdownOpen = !dropdownOpen;
inner.style.height = dropdownOpen ? '80px' : '0';
});
.outter {
background: green;
padding-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
margin: 10px;
width: 300px;
background: white;
padding: 10px;
}
.container {
position: absolute;
background: yellow;
}
.inner {
overflow: hidden;
transition: height 0.2s ease-out;
}
<div class='outter'>
<h1>title</h1>
<div class='main'>
<button>handle</button>
<div class='container'>
<div class='inner' style='height: 0'>
content
</div>
</div>
</div>
I have a div with a background image, and at the center of the div, I have text and a button.
The problem is, when I apply an overlay color over the background image the text and button become unclickable, like they're disabled.
I need to be able to click the Read More button and make the content visible and selectable.
jsFiddle https://jsfiddle.net/yzce0vLt/8/
HTML
<div class="col-md-12 dynamic-height">
<div class="item dynamic-height">
<div class="item-container dynamic-height content-center overlay-x dark" style="background: url('http://placehold.it/1920x1280') center center; background-size: cover;">
Read More
</div>
</div>
</div>
CSS
.col-md-12, .item, .item-container {
height: 600px;
}
/* Align Content */
.content-center {
display: flex;
justify-content: center;
align-items: center;
}
/* Background Overlay */
.overlay-x {
position: relative;
}
.overlay-x:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: none;
z-index:0;
}
.overlay-x:before{
display: block;
}
.dark:before {
background-color: rgba(0,0,0,0.5);
}
.light:before {
background-color: rgba(255,255,255,0.5);
}
JS
$(document).ready(function() {
// Dynamic Height
$('.dynamic-height').css({'height':($(window).height())+'px'});
$(window).resize(function(){
$('.dynamic-height').css({'height':($(window).height())+'px'});
});
});
Add this to your css
.btn {
z-index: 100;
}
This will move the button over your overlay.
I have a flexbox that contains 3 elements. 1 static, 1 hidden and 1 visible.
The hidden and visible elements are flexbox as well display: flex;.
What I want is to hide the visible element and show the hidden element. I have tried to use the slideDown and slideUp JQuery functions, but at the end my elements becomes display: block; and the display is messed up.
The structure:
The css:
.nodispitem {
display: none;
}
.genericNestedBloc__class {
height: auto;
width: auto;
display: inline-flex;
justify-content: center;
align-items: center;
align-self: stretch;
}
The Js function I have tried:
$(selector).css("display", "flex").hide().slideDown(speed, function () {
callback();
});
$(selector).slideUp(speed, function () {
callback();
});
or
$(selector).slideDown(speed, function () {
callback();
});
or
$(selector).slideUp(speed, function () {
$(selector).css("display", "flex");
callback();
});
But all of this doesn't work.
What I need to have at the end of the show event:
What I have after the show event:
I have found a way to show/hide elements properly but without the smooth effect and it's necessary!
To assume there are 3 actions to achieve:
Get a flexbox hidden using a class
Hide a flexbox properly using transition/animation
Show a flexbox properly using transition/animation
Not sure if it's what u want but i guess it's a start...
$("button").on("click", function(){
var $self = $(this);
var $elem = $(this).siblings("div");
$elem.toggleClass("slideUp");
if($elem.hasClass("slideUp"))
$self.text("Show");
else
$self.text("Hide");
});
.uc{
display: inline-block;
width: 100px;
border-bottom: 1px solid black;
text-align: center;
margin-bottom: 10px;
}
.generic{
height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
background-color: red;
margin-bottom: 5px;
transition: all .5s linear;
}
.blue{background-color: blue;}
.slideUp{
height: 0;
transition: all .5s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div id="one" class="uc">UC</div>
<div class="box_wrapper">
<div id="hidden" class="snow generic slideUp"></div>
<button>Show</button>
</div>
<div class="box_wrapper">
<div id="three" class=" sun generic blue"></div>
<button>Hide</button>
</div>
</div>