Greetings! I have successfully implemented a zoom and flip feature on my tile.
My tile now showcases two different views - the initial view displays an image, while the back view shows text.
However, I am encountering an issue where multiple alert boxes are popping up when clicking on the text side. I only want the alert to appear for the text side, not the image side.
I have attempted to add an alert without success and would appreciate some guidance on resolving this issue.
Here is the code snippet I have been working with:
HTML
<div class="wrap" id="html1"><div class="box"><div class="boxInner one clicked"><div class="face front"><img src="img/s.png"></div><div id="SearchDono" class="face back"><label class="text">Search Donors</label></div></div></div><div class="box"><div class="boxInner two two-clicked"><div class="face front"><img src="img/r.png"></div><div id="RegisterDono" class="face back"><label class="text">Register</label></div></div></div><div class="box"><div class="boxInner three three-clicked"><div class="face front"><img src="img/u.png"></div><div id="UpdateDetai" class="face back"><label class="text">Update Details</label></div></div></div><div class="box"><div class="boxInner one clicked"><div class="face front"><img src="img/s.png"></div><div class="face back"><div id="ShareStat" class="text">Share</div></div></div></div></div>
CSS
.wrap {
overflow: hidden;
margin: 10px;
-webkit-transform: translateZ(0);
position: relative;
top: 0px;
}
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 10px;
}
... (CSS styles continue)
JS:
$('.box').click(function(){
$(this).addClass('hai');
});
$(".one").click(function(){
$(this).toggleClass("clicked");
$(this).addClass('backone');
$('.backone').click(function(){alert('hai');
$(this).removeClass('backone');
});
});
$('.two').click(function() {
$(this).toggleClass("two-clicked");
});
$('.three').click(function() {
$(this).toggleClass("three-clicked");
});