Getting :focus working in WordPress

  • Nostra

    (@nostra)


    8 years, 4 months ago

    I’m running a movie review blog and I wanted to add the option for the user to view the score I gave a movie by hovering above the first image of the review (this way they can steer away from spoilers, but still see if I liked it).

    I’ve managed to get this working with a hover function, but as you know this function does not work on mobile devices. Therefore I reasearched if there was a way to show it when tapping on an image on a mobile device and read that you can use :focus for this.

    If you load up the Fiddle below on a mobile device, you’ll see that works.
    https://jsfiddle.net/z5e1xzdj/

    After implementing this (see the link I’ve added) focus doesn’t seem to work when loading the page on a mobile device. Loading the page on a computer shows that the hover is working.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Konstantinos Xenos

    (@xkon)

    8 years, 4 months ago

    If i recall correctly at least from some time ago the :focus etc was only getting activated on links not on everything a quick trick was to add onclick="void(0)" on everything you wanted to appear as a link on devices so you could actually ‘tap’ on them lets say. Try that even if it’s a little ‘hacky’ maybe it is still the case.

    Else my best guess would be to use some jQuery to target your images and on(‘click’) for example trigger whatever else you want to show.

    I’ll be happy to assist further if you like 🙂

    Thread Starter Nostra

    (@nostra)

    8 years, 4 months ago

    What I’m wondering though is why this is working when I test it on the Fiddle site, but when I implement it in WordPress it doesn’t. Does WordPress do something that prevents it from working?

    I’ve tried to add the onclick in the html, but that doesn’t work.

    *Small update*
    I just was testing if it would respond on a tablet (Galaxy Tab S2), which it did. So this sounds like WordPress normally can handle it, but that something changes in the execution if it is run on a lower resolution? Where should I look to investigate this? I’m thinking it might be a responsive thing, but not sure…

    • This reply was modified 8 years, 4 months ago by Nostra.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 4 months ago

    Try deactivating all of your plugins to explore whether any could be responsible. If none are, keep all plugins deactivated and switch to the Twenty Seventeen theme to check whether it’s an issue with your theme.

    Thread Starter Nostra

    (@nostra)

    8 years, 4 months ago

    Although I appreciate the suggestion, I noticed that the positioning of the overlay image was different on the tablet (slightly outside the existing image). So I fired up the responsive design mode in Firefox and noticed that on smaller screens it doesn’t show, making me think that the current way I’ve implemented the positioning of the overlay might cause it to draw outside the visible window. Could this be the case and what would be the best way to solve this?

    It currently set as follows:

    .overlay10 {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 575px;
  top: 0px;
  z-index: 50;
  background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
  -webkit-transition: opacity 0.5s ease-in;
  -moz-transition: opacity 0.5s ease-in;
  -ms-transition: opacity 0.5s ease-in;
  -o-transition: opacity 0.5s ease-in;
  transition: opacity 0.5s ease-in;
}
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Getting :focus working in WordPress’ is closed to new replies.