I have this code to display a deck of cards. It works perfectly fine on windows, android and on most newer IOS deviced. For some reason the onClick() on the cards does not work on some older IOS devices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
box-sizing: border-box;
position: absolute;
left: 50px;
top: 50px;
font-family: 'Suez One', cursive;
}
.red-box {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 230px;
width: 300px;
height: 25px;
background-color: #FFCBAA;
z-index: 1;
}
.randomSuit {
position: absolute;
left: 50px;
top: 50px;
}
.card {
background-image: radial-gradient(#eeaeca, #94bbe9);
left: 44%;
top: 33%;
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translateY(0);
position: absolute;
width: 100px;
height: 150px;
border-radius: 10px;
font-size: 0px;
-webkit-transition: background-image 0.7s ease-in-out;
transition: all 700ms, font-size 500ms, background-image 0.7s ease-in-out;
border: 2px solid #060303;
cursor: pointer;
border-bottom-color: #933;
box-shadow: -10px 40px 20px 2px rgba(0,0,0,0);
display: flex;
align-items: center;
justify-content: center;
color: #333;
white-space: normal; /* or white-space: pre-wrap; */
word-wrap: break-word;
text-align: center; /* Add this line to center the text */
&.opened {
transform: scale(1.5) rotateX(0) rotateY(180deg) rotateZ(0) translateY(0) !important;
box-shadow: 0 5px 14px rgba(0,0,0,0.1);
font-size: 14px;
background-image: radial-gradient(#ffffff, #ffffff);
}
&.is-removed {
transform: translateY(200%) !important;
font-size: 0px;
background-image: radial-gradient(#eeaeca, #94bbe9);
height: 75px;
border-radius: 10px 10px 0 0;
box-shadow: 0 -5px 5px rgba(0,0,0,0.01);
}
&.card.opened span {
transform: scaleX(-1);
display: inline-block;
}
}
.card:first-child {
box-shadow: 12px 12px 0px 12px rgba(0,0,0,0.3);
}
.card.down:last-child:hover {
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translateZ(50px) !important;
box-shadow: -10px 40px 20px 2px rgba(0,0,0,0.2);
}
.cards {
height: auto;
width: auto;
}
</style>
<div class="cards">
<!-- generate all 52 cards with values -->
<script>
let suits = ['Hjerter', 'Spar', 'Ruter', 'Kløver'];
let values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
let translateZValue = 1;
let cards = [];
let allCardValues = [];
for (let suit of suits) {
for (let value of values) {
allCardValues.push(`${value}`);
}
}
// Shuffle the array of card values
for (let i = allCardValues.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[allCardValues[i], allCardValues[j]] = [allCardValues[j], allCardValues[i]];
}
// Generate card HTML using shuffled values
for (let cardValue of allCardValues) {
const randomRotation = Math.random() * (2) - 42;
const cardHtml = `<div class='card down' style='transform: rotateX(60deg) rotateY(0deg) rotateZ(${randomRotation}deg) translateZ(${translateZValue}px);' onclick="cardClickHandler.call(this)"><span>${cardValue}</span></div>`;
cards.push(cardHtml);
translateZValue += 1;
}
$('.cards').append(cards);
</script>
</div>
<div class="red-box"></div>
<script>
function cardClickHandler() {
if ($(this).hasClass('down')) {
$(this).removeClass('down');
$(this).addClass('opened');
} else if ($(this).hasClass('opened')) {
$(this).addClass('is-removed');
// Find the new top card and make it clickable
const isTopCard = $('.card:not(.is-removed):last');
}
}
</script>
</head>
</html>
i have tried a lot of different approaches to reading clicks from the users. all functions fine on everything except older IOS.
Earlier my onClick function was replaced by this and i did not specify an onclick="cardClickHandler.call(this)" in the cardHtml div:
$('.card').click(function(){
i also tried this:
$('.card').on('click touchend', function(event) {
and this:
$('.card').on('click touchstart', function() {
I figured out how to make it clickable. Had to add all the changes style elements in JavaScript.
For example: