0

As a continuation from this question: Mass Update lines of code for all posts

I'm wondering if it's possible to have a WP Function that disables the "href" in any anchor tag that contains "a data-name" if the screen is < 480 or so on.

My anchor tags look like the following across 600+ posts:

<a data-name="Dishwasher" href="/items/?item=Dish Washer">Dishwasher</a>

I want them to only look like this on mobile:

<a data-name="Dishwasher">Dishwasher</a>

The reasoning:

My "a data-name" anchor tag uses mouse hover to show pop-up tooltips, which work on both desktop and mobile. Since implementing the "href" to all the tags, the mobile tooltips no longer work since you have to click the anchor tag to see the tooltip which invariably uses the href then instead.

4
  • This is something you’ll need to adjust in the script. Dec 5, 2017 at 14:38
  • Hi there, which script would that be exactly? Dec 5, 2017 at 14:53
  • Presumably you have a script that turns data-name into tooltips. It’s behaviof would need to be tweaked to stop the link from working on mobile. Dec 5, 2017 at 15:05
  • Ah ok, that's right! I have a tooltip.js file which converts the data-name to tooltips. How would I go about this? I'm thinking jQuery(window).width() < 480 then disable href but not 100% sure how to do this cleanly Dec 5, 2017 at 15:20

1 Answer 1

0

Alright figured it out.

As Jacob pointed out, it should go into the script that makes data-name show as a tooltip.

So I added the following:

        if (jQuery(window).width() < 480) {
        jQuery(this).removeAttr("href");
        }

My final code:

jQuery(document).on({
    mouseenter: function(e) {
        if (jQuery(window).width() < 480) {
        jQuery(this).removeAttr("href");
        }
        setTimeoutConst = setTimeout(function() {
            tooltip.open(e);
        }, 200);
    },
    mouseleave: function(e) {
        clearTimeout(setTimeoutConst);
        tooltip.close(e);
    }
}, 'a[data-name]');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.