We Keep Coding

Card flip inside Bootstrap modal with dynamicly imported image

I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>

This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>

Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>

Best way to apply same code on different images? jquery

This is my HTML code:
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
Jquery code:
$('.vid').mouseenter(function() {
$('.text').css("visibility","visible");
});
Now, what if I want to add another image but with the same code and class? Obviously when I do this, both images will show their overlay text while my mouse is only on 1 image.
So is there anyway to do this without giving every image a different class/id?

You can use the this keyword to reference the .vid element that raised the event. From there you can traverse the DOM to find the child .text element, like this:
$('.vid').mouseenter(function() {
$(this).find('.text').css("visibility", "visible");
});
.vid {
position: relative;
}
.vid p {
position: absolute;
width: 100%;
top: 10%;
visibility: hidden;
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>

Yes, because .text is a selector which needs to be scoped. Try this instead:
$('.vid').mouseenter(function() {
$(this).find('.text').css("visibility","visible");
});
This will add the attribute to the underlying .text element only.

This can help you with multiple divs:
$(function() {
$('.vid').on('mouseenter', function() {
$(this).find('.text').css("visibility","visible");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid2">
<p class="text">Text that comes over the image</p>
</div>
<div class="col-lg-3 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
Hope this helps!

How Do I make a <div> slide into view when a button is clicked?

I have a page that has a background wallpaper with 100% width and its 100vh height. The page has 3 buttons on it and one of the buttons is located at the extreme left side of the screen. When I click that button, I am hoping the div would slide to the right to cover the entire page.
I had tried using slide toggle but my div is currently located at the bottom of my title page so when it toggles, the div toggles vertically--not horizontally.
My title page is 100vh but the div I'm trying to slide into place doesn't have a fixed height.
#title {
width: 100%;
background-image: url(../Images/Arthur%20and%20Merlin%202%20updated.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
position: relative;
display: inline-block;
}
#characters {
width: 100%;
display: inline-block;
}
<div id="maincontainer">
<header id="title">
<h1>Arthur and Merlin</h1>
<h3>Battle For Camelot</h3>
<div id="titlebutton">Join The Battle
</div>
<input id="checkboxforplaces" type="checkbox">
<label id="toplaces" for="checkboxforplaces">
<img src="Icons/castle.png">
</label>
<input id="checkboxforchar" type="checkbox">
<label id="tocharacters" for="checkboxforchar">
<img src="Icons/helmet.png">
</label>
</header>
<section id="characters">
<div id="firstrow">
<article id="arthurbox">
<a id="arthur" href="#">
<img src="Images/Arthur/Arthur%201.jpg" </a>
</article>
<article id="merlinbox">
<a id="merlin" href="#">
<img src="Images/Merlin/merlin%202.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="secondrow">
<article id="morganabox">
<a id="morgana" href="#">
<img src="Images/Morgana/Morgana1.jpg">
</a>
</article>
<article id="youngmordredbox">
<a id="youngmordred" href="#">
<img src="Images/YoungMordred/Mordred2.jpg">
</a>
</article>
</div>
<div id="clear"></div>
<div id="thirdrow">
<article id="utherbox">
<a id="uther" href="#">
<img src="Images/Uther/Uther.jpg">
</a>
</article>
<article id="gaiusbox">
<a id="gaius" href="#">
<img src="Images/Gaius/Gaius-15hdg5a.jpg">
</a>
</article>
<div id="clear"></div>
</div>
</section>
</div>

I think this jsfiddle may be useful for you.
$(document).ready(function(){
$('#hide').click(function(){
var hidden = $('.hidden');
hidden.hide('slide', {direction: 'left'}, 400);
});
$('#show').click(function(){
var hidden = $('.hidden');
hidden.show('slide', {direction: 'left'}, 400);
});
});
https://jsfiddle.net/ZQTFq/3372/
Modify the code depending on your needs.

Not able to perform any event after image click?

This is my code which is getting dynamically appended by a plugin
<div class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
<div class="emoji-items-wrap1">
<div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
<div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
<a href="javascript:void(0)" title=":unamused:">
<img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
<span class="label">:unamused:</span>
</a>
<a href="javascript:void(0)" title=":joy:">
<img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
<span class="label">:joy:</span>
</a>
</div>
</div>
</div>
</div>
The problem is that i need to change .emoji-menu's div property to display:none whenever the img tag inside it gets clicked(please refer the code), I have tried with different selectors but it didn't work.
I think <a href="javascript:void(0)" is causing problem. Please help me on this.

With angular you can use ngClick and ngShow for these things:
<div ng-show="thisEmoji" class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
<div class="emoji-items-wrap1">
<div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
<div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
<img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
<span class="label">:unamused:</span>
<img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
<span class="label">:joy:</span>
</div>
</div>
</div>
</div>
The a tag could be replaced with removed as it only ads a title to the element. I seem to rememeber the alt attribute on img does the same.

If your html snippet appends the document dynamically, you should bind the click events of images . Hope this helps
$("body").on("click",".emoji-items img",function(){
$(".emoji-menu").fadeOut();
})

Responsive Design: Below 768px , my banner images are very stretched. I tried height=auto, but IE9 didn't display them at all then

Responsive Design: Below 768px , my banner images are very stretched. I tried height=auto, but IE9 didn't display them at all then.
So, how can I make the height not stretch and look decent?
I'm using: Bootstrap 3.1.1, jQuery 1.11, and FlexSlider (the images in question are in a FlexSlider Carousel)
My web page is at:
http://www.amleo.com/
My HTML is:
<section class="slider">
<div class="container White_BG">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8">
<!--Slider Start-->
<div class="flexslider" id="mainslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 1200%; margin-left: -1514px;">
<li class="clone" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
<img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
</a>
</li>
<li class="" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
<img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
</a>
</li>
<li style="width: 757px; float: left; display: block;" class="flex-active-slide">
<a href="http://www.amleo.com/polysample/a/29_31/" target="_blank" title="OW Poly Sample">
<img src="http://cdnll.amleo.com/images/art/1433_ow-plus-web.jpg" width="770" height="322" title="OW Poly Sample" alt="OW Poly Sample">
</a>
</li>
<li style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/quickorder.aspx" title="Quick Order Form">
<img src="http://cdnll.amleo.com/images/art/1441-quick-order-content-web.jpg" width="770" height="322" title="Quick Order Form" alt="Quick Order Form">
</a>
</li>
<li style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/Search.aspx?ss=Leonard+Fertilizer" title="Leonard Fertilizer Stakes and Tablets">
<img src="http://cdnll.amleo.com/images/art/1438_leonard-fertilizer-web.jpg" width="770" height="322" title="Leonard Fertilizer Stakes and Tablets" alt="Leonard Fertilizer Stakes and Tablets">
</a>
</li>
<li class="clone" style="width: 757px; float: left; display: block;">
<a href="http://www.amleo.com/deer/a/84/kc/4G14Pw/" target="_blank" title="Tenex Deer Fencing Sale">
<img src="http://cdnll.amleo.com/images/art/1441-Deer-Fencing.jpg" width="770" height="322" title="Tenex Deer Fencing Sale" alt="Tenex Deer Fencing Sale">
</a>
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging">
<li><a class="">1</a></li>
<li><a class="flex-active">2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ol>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="#">Previous</a></li>
<li><a class="flex-next" href="#">Next</a></li>
</ul>
</div>
<!--Slider End-->
</div>
<!--Side Banner-->
<div class="col-md-3 hidden-md hidden-sm hidden-xs visible-lg" style="border:4px;padding-left:0px!important;">
<a href="http://www.amleo.com/careers/a/66/" title="AM Leonard Careers">
<img src="http://cdnll.amleo.com/images/art/Career_ad_2014.jpg" width="379" height="321" alt="AM Leonard Careers">
</a>
</div>
<!--End Side Banner-->
</div>
</section>

In flexslider.css it reads:
.flexslider .slides img { ... }
It looks like you need to add height: auto; and then use javascript to remove the height attribute that the slider is applying to the images.
Something along the lines of:
jQuery('.slides img').attr('height', '');

Use
.flexslider .slides img{ width:auto;}
If you do not want to stretch an image.