I'm using the jQuery Flip Plugin. I'm trying to have a couple of cards on top of each other and when the user clicks on a card, it should turn and show the backside. But now only the text is flipping and not the card behind the text. I managed to have it wokring before, but I had to make classes for front and back.
$(function() {
$(".card").flip({
axis: "y",
reverse: "false",
trigger: "click",
speed: 700,
});
});
.card {
position: absolute;
width: 400px;
height: 248px;
margin: 2px;
background-color: #F3ECE2;
border: 5px blue solid;
padding: 10px;
border-radius: 25px;
}
#card-1 {
left: 0px;
top: 0px;
z-index: 1;
}
#card-2 {
left: 10px;
top: -238px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
<div>
Front1
</div>
<div>
Back1
</div>
</div>
<div class="card" id="card-2">
<div>
Front2
</div>
<div>
Back2"
</div>
</div>
From my understanding of the website, you need to add front and back classes to the corresponding div's, as shown:
$(function() {
$(".card").flip({
axis: "y",
reverse: "false",
trigger: "click",
speed: 700,
});
});
.card{
width:200px;
height:100px;
position:relative;
}
.front,
.back {
background-color: #F3ECE2;
border: 5px blue solid;
padding: 10px;
border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
<div class="front">
Front1
</div>
<div class="back">
Back1
</div>
</div>
<div class="card" id="card-2">
<div class="front">
Front2
</div>
<div class="back">
Back2
</div>
</div>
Related
I have a problem with multiple Flickity obj on the page. I can easly generate Flickity with slides, but there is a problem with the next ones.
Here's is the code:
I'm trying to put flickity in a bootstrap tabpanel (4 panel, each has his own Flickity).
var featuredFlkty = new Flickity('.carousel-featured', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
var topSellerFlkty = new Flickity('.carousel-top-rated', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
.carousel-section {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 85px;
background-color: $carousel-bg-color;
border-top: $gallery-border;
padding: 7.5px 0;
.main-carousel {
max-width: 100%;
height: 100%;
padding: 0 40px;
.carousel-cell {
width: 66px;
height: 100%;
#extend %center-flex-display;
background-color: $product-slider-bg-color;
display: inline-flex;
margin: 0 5px;
padding: 5px;
cursor: pointer;
img {
max-width: 100%;
height: auto;
}
&.is-selected {
opacity: 1;
}
&:not(.is-selected) {
opacity: 0.3;
}
}
}
.flickity-button {
background: $text-color;
padding: 0;
}
.flickity-button:hover {
#extend %bg-hover-animation;
}
.flickity-prev-next-button {
width: 30px;
height: 100%;
border-radius: 0;
}
/* icon color */
.flickity-button-icon {
fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
left: 5px;
}
.flickity-prev-next-button.next {
right: 5px;
}
}
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="top-rated">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-top-rated">
<div class="carousel-cell is-selected" id="carousel-top-rated-cell-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="featured">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-featured">
<div class="carousel-cell" id="carousel-featured-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
</div>
The styling is just great. Everything works on the 1st Flickity, but on the 2nd, there are no cells, just arrows and height=0 of the viewport.
Ok, I have found the solution :)
Flickity - resize option
Fort the ones still looking for a detailed solution to this problem, here's the code I'm using which works fine on multiple galleries in the same page:
const galleries = document.querySelectorAll('.block-gallery');
galleries.forEach(gallery=> {
new Flickity(gallery, {
contain: true,
setGallerySize: true,
wrapAround: true,
imagesLoaded: true
});
});
What I have :
Html
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div class="content1" style="display:none"></div>
<div class="content2" style="display:none"></div>
<div class="content3" style="display:none"></div>
Js
$(document).ready(function() {
$('#content1').click(function() {
$(' .content2, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content1').slideToggle("slow")
}
});
});
$('#content2').click(function() {
$(' .content1, .content3 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content2').slideToggle("slow")
}
});
});
$('#content3').click(function() {
$(' .content1, .content2 ').slideUp({
style: "height",
speed: "slow",
complete: function() {
$(' .content3').slideToggle("slow")
}
});
});
});
What I want
On clicking on a div show its hidden div(content) with slideToggle
if a hidden content of another div is already open then close it with slideUp and open the one you clicked (open only after the slideUp animation is completed)
I managed to get the desired effect with two hidden divs Sample
1but with three i have this Sample 2 auto toggle problem
Help! And if there's a better and simpler alternative to get this effect please suggest. P.S. Sorry for my broken English.
Your code could be refactorized using common classes and then using following logic with promise().done() callback, which will be called only once for all set:
$(document).ready(function() {
$('.for_content').click(function() {
var i = $(this).index('.for_content');
$('.content:not(:eq(' + i + '))').slideUp({
style: "height",
speed: "slow"
}).promise().done(function() {
$('.content').eq(i).slideToggle("slow")
});
});
});
* {
padding: 0px;
margin: 0px;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #222;
}
li {
float: left;
}
.link {
display: inline-block;
color: white;
text-align: center;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0px 1px 10px #fff;
}
.content1 {
height: 400px;
width: 100%;
top: 0;
background-color: #333;
}
.content2 {
height: 400px;
width: 100%;
top: 0;
background-color: #444;
}
.content3 {
height: 400px;
width: 100%;
top: 0;
background-color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<ul>
<li>
<span class="link">Home</span>
</li>
<li>
<div class="link for_content" id="content1">Link 1</div>
</li>
<li>
<div class="link for_content" id="content2">Link 2</div>
</li>
<li>
<div class="link for_content" id="content3">Link 3</div>
</li>
</ul>
</div>
<div>
<div class="content content1" style="display: none">
<h1>
CONTENT 1
</h1>
</div>
<div class="content content2" style="display: none">
<h1>
CONTENT 2
</h1>
</div>
<div class="content content3" style="display: none">
<h1>
CONTENT 3
</h1>
</div>
</div>
You can use something like this:
$('div[id^=content]').click(function () {
var name = $(this).attr('id');
$('div[class^=content]:visible').slideUp('slow', function() {
$('.' + name).slideDown('slow');
});
});
I hope it helps. :-).
My 1st droppable div box is working perfectly however the rest of my droppable div boxes aren't. I've been looking through my code and couldn't figure out where the problem is.
When I drag a draggable clone element in the other divs (2,3,4) they go at the very bottom of the page and then when I click the clone it suddenly goes to the first one with out even trying to move it yet.
HELP?
THANK YOU IN ADVANCE.
$(document).ready(function() {
$("#classicTemplate").resizable();
$(".dragImgs").draggable({
helper: "clone",
snap: ".dropTarget",
appendTo: "#classicTemplate",
revert: "invalid"
});
$(".dropTarget").droppable({
accept: ".dragImgs",
hoverClass: "highlight",
drop: function(event, ui) {
var $imgClone = ui.helper.clone();
if (!$imgClone.is(".inside-dropTarget")) {
$(this).append($imgClone.addClass("inside-dropTarget").draggable({
containment: ".dropTarget",
position: "relative"
}));
$imgClone.dblclick(function() {
$imgClone.remove();
});
}
}
}).resizable({
animate: "true",
ghost: "true",
handles: "n, e, s, w, ne, se, sw, nw, all"
});
});
.container {
background-color: #bbb;
}
.imageContainer {
float: left;
margin: 10px;
width: 230px;
background-color: #fff;
}
.imageContainer img {
margin: 10px;
margin-left: 15px;
}
#classicTemplate {
list-style-type: none;
float: right;
margin-top: 10px;
background-color: #ccc;
}
#classicTemplate ul {
list-style-type: none;
padding: 0;
}
.dropTarget {
background-color: #aaa;
margin: 10px;
width: 210px;
height: 143px;
}
.dragImgs {
width: 50px;
height: 50px;
margin: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container">
<div class="imageContainer">
<div class="dragImgs">
</div>
<div class="dragImgs">
</div>
<div class="dragImgs">
</div>
</div>
<div id="classicTemplate">
<div class="dropTarget pull-left">
1
</div>
<div class="dropTarget pull-left">
2
</div>
<div class="dropTarget pull-left">
3
</div>
<div class="dropTarget pull-left">
4
</div>
</div>
</div>
#you {
background-color: rgba(65,64,61,0.5);
position: absolute;
top: 0px;
right: 200px;
padding: 7px;
border-radius: 0px 0px 3px 3px;
width: 165px;
border: 2px solid #41403d;
}
#exitb {
background: url(http://playneko.co.uk/exit.png);
height: 19px;
width: 19px;
border-radius: 3px;
}
#exitb:hover {
background: url(http://playneko.co.uk/exit_hover.png);
}
Thats my css code andd this is the box I have
<div id="you">
<div style="height: 110px; width: 57px; float: left; overflow: hidden;">
<img src="http://www.habbo.nl/habbo-imaging/avatarimage?figure='.$user['look'].'&direction=3&head_direction=3&action=wav,crr=667&size=m" alt="avatar" class="rotate" align="left">
</div>
<div style="position: absolute; z-index:1">'.$aanwezag.'</div>
<br/>
</td>
<div style="cursor:pointer;position:absolute;top:10px;left:65px;font-size:18px;font-family: Times;">%habboName%</div>
<div style="cursor:pointer;position:absolute;top:30px;left:65px;font-size:18px;font-family: Times;">' . $users->getRankName($user['rank']) . '</div>
<div style="cursor:pointer;position:absolute;top:50px;left:65px;font-size:18px;font-family: Times;"><font color="#FF0040">'. $user['age'] .' Years Old</font></div>
<div style="cursor:pointer;position:absolute;top:70px;left:65px;font-size:18px;font-family: Times;"><font color="#088A4B">'. $user2['AchievementScore'] .' Score</font></div>
<div style="cursor:pointer;position:absolute;top:90px;left:65px;font-size:18px;font-family: Times;"><font color="#01A9DB">'. $user2['Respect'] .' Respects</font></div>
<div style="cursor:pointer;position:absolute;top:81px;left:5px;font-size:20px;font-family: Times;"><img src="%www%/flags/'. $user['country'] .'.png"></div>
</div>
How would I add the exit image on the right of the box to be able to minimize and maximise the box? if you can help it would be greatly appreciated.
For example, you have to wrap a content which should toggle into a separate div and toggle this div instead of whole #you element
<div id="you">
<div id="exitb">-</div>
<div id=content>
...
</div>
</div>
$("#content").slideToggle();
https://jsfiddle.net/Qy6Sj/1602/
I'm not quite sure if this is what you wanted or not. I have moved the #exitb id out of the #you wrapper and positioned it as absolute as well in order to move it into the image. Moreover, I simplified the code a little bit to use just a text, + and -, instead of image icons.
HTML:
<div id="exitb">-</div>
<div id="you">
...
</div>
Javascript:
$("#exitb").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#you").slideToggle();
});
CSS:
#exitb {
text-align: center;
color: #fff;
background-color: red;
height:19px;
width:19px;
border-radius:3px;
cursor: point;
position:absolute;
top:0px;
right:200px;
z-index: 10;
cursor: pointer;
}
JsFiddle.
Firstly I want to apologize for my English. I have a html template for shop and it has interesting structure of product grid in category page:
HTML:
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
CSS:
.content-center .product-line {
position: relative;
height: 238px;
margin-bottom: 30px;
}
.content-center .product-line .product {
position: absolute;
color: #534741;
}
.content-center .product:nth-child(1) {
top: 0;
left: 0;
}
.content-center .product:nth-child(2) {
top: 0;
left: 330px;
}
.content-center .product:nth-child(3) {
top: 0;
left: 660px;
}
.content-center .product-small {
box-sizing: border-box;
width: 300px;
height: 238px;
background: #fcfcfc;
border: 1px solid #dbdbdb;
box-shadow: inset 0 0 10px #dbdbdb;
padding: 20px;
position: relative;
}
.content-center .product-big {
box-sizing: border-box;
width: 630px;
min-height: 506px;
background: #fcfcfc;
border: 1px solid #dbdbdb;
box-shadow: inset 0 0 10px #dbdbdb;
padding: 20px;
position: relative;
display: none;
}
JS:
$('.detail').on('click', function() {
var _this = $(this);
var parentProduct = _this.closest('.product');
var parentLine = _this.closest('.product-line');
var index = parentProduct.index();
var eq1 = parentLine.find('.product').eq(0);
var eq2 = parentLine.find('.product').eq(1);
var eq3 = parentLine.find('.product').eq(2);
$('.product-small').show();
$('.product-big').hide();
$('.product-line').css('height', '237px');
$('.product').removeAttr('style');
switch (index)
{
case 0:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : '660px', 'top' : 0});
eq3.css({'left' : '660px', 'top' : '268px'});
break;
case 1:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : '330px', 'top' : 0});
eq3.css({'left' : 0, 'top' : '268px'});
break;
case 2:
eq1.css({'left' : 0, 'top' : 0});
eq2.css({'left' : 0, 'top' : '268px'});
eq3.css({'left' : '330px', 'top' : 0});
break;
}
parentProduct.find('.product-big').show();
parentProduct.find('.product-small').hide();
parentLine.css('height', parentProduct.find('.product-big').innerHeight());
});
Is it possible to make same functional but use only one block where products stored.
Now I have a lot of blocks where stored 3 products(x lines per 3 products), and I need to make only one block and unlimited products. For example make something like that:
<div class="product-line">
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
<div class="product">
<div class="product-small"></div>
<div class="product-big"></div>
</div>
</div>
I'm tried to use float:left method, but when i click "detail" button the grid is braking.
Site with current functional: link
Generally, use float, but float:right every 2nd and 3rd items
selected product should have a class 'selected';
don't use style attribute (always important to separate style and content)
.product { float: left; }
.product.selected:nth-child(3n),
.product.selected:nth-child(3n+2) { float: right; }
.product.product-small { display: block; }
.product.selected .product-small { display: none; }
.product.product-big{ display: none; }
.product.selected .product-big{ display: block; }
you'll probably have problems that now #content-main is considered empty, but I believe you'll be able to manage that (try clear:both).