asked on

Important jQuery / Javascript specific features not working on mobile Safari and Chrome

For some reason, 2 important features of this landing page that I'm trying to wrap up aren't working on mobile:

https://www.movingpicture.com/camera-rentals/

1) My multi-step form is not displaying
2) My jQuery load() methods for the sections with the headings "Browse cameras. Then rent." and "Other equipment you might also need" are not working working.

I've been testing using Safari and Chrome using an iPhone X and both mobile browsers are having the same exavt problems.

I suspect that the problem is Javascript based, but I have no idea what's broken or incompatible. How can I fix these 2 important features so that they both work on mobile?

Here is a link to my custom.js file:

https://www.movingpicture.com/camera-rentals/js/custom.js

Thanks,
- Yvan

Robert Perez

Hey Egoselfaxis,

I'm actually not having trouble loading your website on mobile. (Google Pixel XL 2), but I AM having troubles loading your website on my imac.

The errors in the console indicate your Jquery isn't being loaded.

Could you switch out

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Open in new window

with

<script
  src="https://code.jquery.com/jquery-2.2.3.js"
  integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
  crossorigin="anonymous"></script>

Open in new window

egoselfaxis

ASKER

Changing out the jQuery script tag made it so that the multi-step form now initially displays in both mobile Safari and chrome .. but it doesn't work the way it's supposed to (ie: the required field highlighting isn't working, and clicking on the GET A QUOTE button doesn't advance you to the next step/tab like it's supposed to).

Also .. my jQuery load() methods for the sections with the headings "Browse cameras. Then rent." and "Other equipment you might also need" still aren't working .

- Yvan

Robert Perez

Hey Yvan,

Sorry if you receive 2 test notifications. I tested from my iMac and an iPad pro and both successfully passed through the checkout method.

On the initial load, it didn't come up, but once I refreshed, your site worked. So it looks like there might be some inconsistency with the loading of the Jquery script.

-Robert

egoselfaxis

ASKER

Ah - hah!!! I apparently had a typo in a couple of my javascript methods (I was missing a closing parentheses in a couple of places).

document.querySelector('#camera-nav li:nth-child(1').addEventListener('click', function() {

Open in new window

Should have been ...

document.querySelector('#camera-nav li:nth-child(1)').addEventListener('click', function() {

Open in new window

Now almost everything is working. The only thing that still isn't working is when I click on the GET A QUOTE button in the form (after typing in some text) .. the screen that displays the next step in the multi-stop form is being displayed UNDERNEATH the first form .. instead of replacing it. And ideas as to why this might be happening?

- Yvan

egoselfaxis

ASKER

Hmm .. now it appears to be working correctly for me. I'm not sure what I did exactly, but I think it might have been a CSS tweak. Could you please verify that it's now behaving correctly for you on your mobile device?

ASKER CERTIFIED SOLUTION

Robert Perez

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

Thanks for your help Robert!

Robert Perez

Glad to help, have a great weekend!