Tips for implementing clickable elements on both desktop and mobile platforms

I have encountered an issue with my CSS

function focusCard(element) {
  element.getElementsByClassName("front")[0].classList.toggle("show");
  element.getElementsByClassName("back")[0].classList.toggle("show");
}
.box {
  cursor: pointer;
  width: 270px;
  height: 170px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.front {
  position: absolute;
  width: 270px;
  height: 170px;
  background-color: #778da9;
  transform: perspective(800px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.5s;
  overflow: hidden;
}

.box:hover .front,
.show {
  transform: rotateX(180deg);
}

.back {
  position: absolute;
  width: 270px;
  height: 170px;
  background: #415a77;
  transform: perspective(800px) rotateY(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.5s;
  flex-direction: column;
  transform: rotateX(180deg);
}

.box:hover .back,
.show {
  transform: rotateX(0deg);
}
<div class="container">
  <div class="questions">
    <div class="">
      <div class="box" onclick="focusCard(this)">
        <div class="front center">
          <h2>Front #1</h2>
        </div>
        <div class="back center">
          <p>Back #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

Everything is working fine on desktop, but there seems to be a problem on mobile devices. When clicking on the front part of the card on mobile, the back appears but does not revert to the front when clicking the back. Can anyone provide assistance with this issue?

Appreciate any tips and advice. Thank you!

javascripthtmlcss

Answer №1

The issue you are encountering is unrelated to mobile event registration. The mobile device can also handle the click event without any issues. It performs well on PCs primarily because of the :hover pseudo-class.

It would be more logical to apply .show to .box instead of its child elements. Additionally, consider adding perspective to .box.

Furthermore, only include :hover for devices that have a cursor, as on mobile devices, the :hover state remains active after tapping the element until tapping elsewhere.

/* limit hover effect to PCs */
@media (hover: hover) {
  .box:hover .front {
    transform: rotateX(180deg);
  }
      
  .box:hover .back {
    transform: rotateX(0deg);
  }
}

Below is a refined version of what you might want to achieve:

function focusCard(element) {
  element.classList.toggle("show");
}
.box {
  cursor: pointer;
  width: 270px;
  height: 170px;
  perspective: 800px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.front {
  position: absolute;
  width: 270px;
  height: 170px;
  background-color: #778da9;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.5s;
  overflow: hidden;
}

.back {
  position: absolute;
  width: 270px;
  height: 170px;
  background: #415a77;
  transform: rotateY(0deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.5s;
  flex-direction: column;
  transform: rotateX(-180deg);
}

/* limit hover effect to PCs */
@media (hover: hover) {
  .box:hover .front {
    transform: rotateX(180deg);
  }
  
  .box:hover .back {
    transform: rotateX(0deg);
  }
}

.show .front {
  transform: rotateX(180deg);
}

.show .back{
  transform: rotateX(0deg);
}
<div class="container">
  <div class="questions">
    <div class="">
      <div class="box" onclick="focusCard(this)">
        <div class="front center">
          <h2>Front #1</h2>
        </div>
        <div class="back center">
          <p>Back #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

npm encountered an error while trying to install selenium-webdriver using the npm install command

My operating system is Windows Server 2008 R2 EE and I have the npm package manager installed. I am attempting to install the Selenium Webdriver package using the command below. Command: npm install selenium-webdriver However, when running this comma ...

javascriptnode.jsseleniumselenium-webdrivernpm

Tips for achieving JSON formatting with JavaScript or jQuery

To achieve the desired output format, I am required to transform the provided input json. input json: [ { "key a": "value alpha" "key b": "value beta" "key c": "value gamma& ...

javascriptjqueryjson

Once the form is submitted, Vue automatically resets all the data

export default { data() { return { usrName: null, pass1: null, pass2: null, regState: {stateCode:-1}, } }, methods: { register: function () { this.axios.post("/login/", { baseURL: 'http://127 ...

javascriptvue.jsaxios

Each entry is linked and separated by a comma in the text

In the table I created, one of the columns displays values like A,B,C or D,E or F. Each entry in this column has a hyperlink below it that redirects the user to another page with the corresponding value passed as a parameter. However, currently, the hyperl ...

javascripthtmltwitter-bootstrapvue.js

Leveraging the power of the map function to cycle through two arrays

Right now in React, I am utilizing array.map(function(text,index){}) to loop through an array. But, how can I iterate through two arrays simultaneously using map? UPDATE var sentenceList = sentences.map(function(text,index){ return <ListGr ...

javascriptreactjs

Managing promise errors by verifying the response

I am currently facing an issue where I need to handle inappropriate responses in the 'then' block of the code snippet below. getData().then(response => transformData(response)); I believe I need to implement something like this, but I am uns ...

javascriptreactjspromiseresponse

Exploring the integration of d3 in an Express application - encountering an error: document is not recognized

I am facing a challenge in my expressjs application where I need to dynamically render vertices in a graph using d3. However, the code execution order seems to be causing issues for me. When attempting to use the d3.select function, I encounter the followi ...

javascriptnode.jsexpressdomd3.js

AngularJS experiencing issues with Bootstrap multiselect functionality

I am currently integrating bootstrap-multiselect into my AngularJS application. To do this, I've included the following scripts in my master page (index.html). <script src="/bower_components/jquery/dist/jquery.min.js"></script> <scrip ...

javascriptangularjstwitter-bootstrapselect

What is the best method for converting a png file to base64 and incorporating it into an asp.net mvc project?

I'm trying to export an image list in HTML, and it seems that the best way to do this is by converting them to base64. However, I've been having trouble finding clear instructions on how to transform an image into base64 and insert it into HTML. ...

c#htmlasp.net

It is not possible to expand the textarea on mobile devices

I have an HTML textarea in one of my web pages using the HTML5 boilerplate template. The pages are responsive and display correctly on all devices, however, I am encountering an issue with the textarea element not being able to stretch. The resizing patter ...

phpandroidhtmlhtml5boilerplate

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

Currently studying the Material UI documentation, I came across this statement: It is noted in the example above that we used: import RaisedButton from 'material-ui/RaisedButton'; instead of import {RaisedButton} from 'material-ui&apo ...

javascriptreactjstypescriptecmascript-6material-ui

The website experiences performance issues when large amounts of data are being uploaded

Our internal team website is built using Python Django and AngularJS. While the website runs smoothly with low data, it slows down significantly as more content is loaded. The biggest issue arises when attempting to open modals or type in text areas, with ...

javascriptjqueryangularjsdjangotwitter-bootstrap

Express.js refuses to serve static assets

I've been struggling to set up my express server to serve static files, but no matter what I try, I can't seem to get it working. I've attempted various solutions without success. Here is my folder structure: App - Web -- public --- images ...

javascriptnode.jsexpress

Steps to dynamically adjust an element's width in CSS depending on the presence of a separate element

I have a text input box appearing on the left side with a button positioned next to it on the right. For certain pages, I want to display a checkbox next to the input box and move the button below it. Is there a way to achieve this using CSS flexbox or a ...

javascripthtmljquerycss

Google AdSense shifts entire webpage to the left

After adding the Google AdSense code to my website on one page, I noticed that the entire layout (including the top navigation, etc.) shifted slightly to the left. This shift is especially noticeable when transitioning from a page without the ad to one wit ...

htmlcssadsense

Selenium in C#: Timeout issue with SendKeys and Error thrown by JS Executor

Attempting to insert the large amount of data into the "Textarea1" control, I have tried two different methods. The first method successfully inserts the data but occasionally throws a timeout error, while the second method results in a JavaScript error. A ...

javascriptc#seleniumselenium-webdriver

Validating emails using angular material chips

I'm currently working on implementing a form that utilizes input chips to facilitate sending messages to multiple email addresses. While I've made progress in making the form functional, I'm facing difficulties in displaying error messages w ...

htmlangulartypescriptformsvalidation

Moving the webpage into the realm of mobile and tablet devices

Over the next few weeks, I will be working on transitioning my website content to have both a mobile and tablet version. During this process, I have some questions: What is the best way to redirect users to the correct site based on their device/browse ...

htmlcssmobiletablet

AngularJs is not responsive to sending POST requests with hidden <input> values

Within my web application, there are multiple forms on a single page. I am looking to utilize AngularJS to submit a specific form. Each form requires a unique ID with a hidden value for submission. However, using value="UNIQUE_ID" in a hidden input field ...

javascriptangularjs

Initiate the Bull Queue Process upon launching the Application

As I develop my API, I am setting up a queue and adding jobs to it. Additionally, I have configured the API to start processing these jobs as soon as they are added. const newQueue = createQueue(queueName, opts); newQueue.add('JokesJob', data, o ...

javascriptnode.jsqueuebull.jsbull-queue