CODEWITHSUNDEEP
javascriptjquerymobilesafari
silverfish
silverfish

Reputation: 21

Looking For A Workaround For Touchstart / Touchend in jQuery

I have a series of colored buttons made of span's which have working jQuery backing them. When the jQuery executed it moves the "active" class, loads a different colored image, changes several labels, and changes the background color of several spans in another div.

I have this working with both .click and .on(touchend but I am under the impression that the reason this seems to have worked on my mobile viewer, but not on my mobile, is because I am running safari.

I have head that touchstart, touchend, and some other touch functions are not supported in safari. The safari on my phone DOES have java enabled, but still it does not work.

1.) Does safari really not support touchstart/touchend? 2.) Does safari support any jQuery touch events? 3.) Is it inappropriate to link the website you're working on? (if it's fine, then I will) 4.) Would it be easier to turn everything into html 's?

I also have this bit of code to convert clicks into javascript but I don't know if there is an event that works in safari for touchscreens similar to .click

document.querySelectorAll('.link').forEach(link => {
  link.addEventListener('click', event => {
    /* ... */
  });
});

Upvotes: 0

Views: 180

Answers (1)

silverfish
silverfish

Reputation: 21

I fixed it.

The problem wasn't safari. The problem was I could make the buttons work when logged in, but not when I wasn't logged into the back-end. This was because of the order in which things loaded in (I was told).

To answer my own questions:

1.) Safari does support touchstart/touchend and other touch events. Safari previously had no support for these touch events but years of complaints finally added them into their system.

2.) I never looked further to find if there were more touch events that would work with safari.

3 & 4 don't need answers from me.

So how did I solve the issue? I'm working off of WordPress. WordPress loads jQuery in the footer. This means your elements will all be loaded before the jQuery (and JavaScript) can execute or ready. So to change that I had to do what is said on this site https://jamesparsons.com/2020/02/jquery-render-blocking-insights#:~:text=It%E2%80%99s%20important%20to%20check%20your%20console%20for%20JavaScript,is%20a%20much%20more%20current%20and%20efficient%20version%3A

and in-case the site ever goes down, here is the code you would need to insert into the "function.php" file of your theme (I put mine in the bottom of the page)

add_filter( 'wp_enqueue_scripts', 'replace_default_jquery_with_fallback');
    function replace_default_jquery_with_fallback() {
        $ver = '1.12.4';
        wp_dequeue_script( 'jquery' );
        wp_deregister_script( 'jquery' );
        // Set last parameter to 'true' if you want to load it in footer
        wp_register_script( 'jquery', "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", '', $ver, false );
        wp_add_inline_script( 'jquery', 'window.jQuery||document.write(\'<script src="'.includes_url( '/js/jquery/jquery.js' ).'"><\/script>\')' );
        wp_enqueue_script ( 'jquery' );
    }

From my understanding, this forced WordPress not to load jQuery in it's typical way and then forced it to load in a different way which allows it to work properly on a WordPress website when you aren't logged in to the back-end.

In WordPress, the jQuery only works if you type out "jQuery". You cannot use '$'. but by changing this code you now can (and possibly must) use the '$'

Final line look that functioned:

    $('.changecolor span').ready(function touch(e) {
        $('.changecolor span').on('touchend', function touch(e) {
         //.......//
    });
});

Follow up. I don't know the rules of this site well. Should I delete my post since I solved my issue?

Upvotes: 2

Related Questions