Mobile Page Changing Script Not Working - Desktop Works

Design help Custom code
1

Hey guys I have a one page site (that acts as 4 pages), and I needed to get all 4 pages on their own unique URL.

To do this I hired someone who had experience with this and he duplicated my one page site 3 more times, making 4 different pages. Wrote custom code so the URL’s would be different and so the click through animation would take them to the correct page.

Making all of this so the user is unaware.

It works great on desktops as you can see if you click this live link:
http://travisbklein.webflow.io/

Designer link (each page has its own page code that you can view):
https://preview.webflow.com/preview/travisbklein?preview=c9a223b9ad616b860ba1acc25a62ff34

Problem is, it doesn’t work on mobile devices, and I’m hoping it might be a simple fix. If not I’m going to have to hire someone who can help me. (not sure if original person is still available)

So yea, thanks for any help!

<script type="text/javascript">
var Webflow = Webflow || [];
Webflow.push(function () {
  
  // The Grind
  $(".navelement").click(function(){
  	//When a nave element is clicked
    //Remove all current nav classes
  	$(".navelement").removeClass("current");
    //Then add current to the one you just clicked
  	$(this).addClass("current");
    //Update URLs
    var scrollV, scrollH, loc = window.location.hostname;
    var currentSlideURLname = $('.navelement.current').html();
    var currentSlideURLlowercase = currentSlideURLname.replace(/\s+/g, '-').toLowerCase();
    // if ("pushState" in history)
    if (("pushState" in history) && (currentSlideURLlowercase !== "home"))
        history.pushState("", currentSlideURLname, currentSlideURLlowercase);
    else if (("pushState" in history) && (currentSlideURLlowercase === "home"))
                  history.pushState("null", "null", "/");
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;
        loc.hash = "currentSlideURLlowercase";
        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
  });
  
  
});
</script>

this is another pages code just for reference on the thread for easy readability:

<script type="text/javascript">
var Webflow = Webflow || [];
Webflow.push(function () {
  $("a[data-ix='clk-myjourney']").click();
  $(".navelement").click(function(){
  	//When a nave element is clicked
    //Remove all current nav classes
  	$(".navelement").removeClass("current");
    //Then add current to the one you just clicked
  	$(this).addClass("current");
    //Update URLs
    var scrollV, scrollH, loc = window.location.hostname;
    var currentSlideURLname = $('.navelement.current').html();
    var currentSlideURLlowercase = currentSlideURLname.replace(/\s+/g, '-').toLowerCase();
    // if ("pushState" in history)
    if (("pushState" in history) && (currentSlideURLlowercase !== "home"))
        history.pushState("", currentSlideURLname, currentSlideURLlowercase);
    else if (("pushState" in history) && (currentSlideURLlowercase === "home"))
                  history.pushState("null", "null", "/");
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;
        loc.hash = "currentSlideURLlowercase";
        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
  });
  // My Journey
  // When the my journey page is loaded, tap the my journey link
  setTimeout(function() {$("a[data-ix='clk-myjourney']").click();}, 1);
});
</script>

Thanks so much coder guys :smile:

2

ok so the person who coded this is not to be found, so does anyone have any advice that I could use maybe to fix this so it works on mobile also?

Where I could go to hire someone who knows webflow and what I need done maybe?

thanks so much!

3

I just tested it… I’m not sure what you mean by it doesn’t work on mobile… I tested on my phone and in browserstack and I think that you are thinking its not working because the url doesn’t change in the browser? the thing is, it actually does, you just have to click in the address bar to see the full url… this is true for any website on ios, it only shows you the domain name until you click the url bar.

Here is proof:
enter link description here

4

what I meant by it doesn’t work is that, when someone (on any iphnone or android device) goes to a link like this:

http://travisbklein.webflow.io/my-journey

it brings them to a page that looks like this:

I don’t care what the address bar is.

The problem is that page is not the “my journey” page. This is not my opinion, this is what happens when 8 different people on 8 different devices do this action.

this video on the browserstacker site shows 100% that it does not, I’m not sure about your video because you are pressing “cancel” instead of pressing “go” which doesn’t make any sense

link to dropbox video

this video shows it does not work. Notice how I am pressing “GO” and not “Cancel”. Nobody enters a web address and presses “cancel” when they want to go to that address(obviously).

I have no idea about the video you posted, somehow you are clicking the “cancel” button instead of clicking “go” which is how you execute a link, obviously.

8 people are not setting up some kind of trick and lying to me telling me what shows up when they click,

http://travisbklein.webflow.io/work-with-me

all 8 people tell me the same exact thing, it does not bring them to any page that has a form on it about how to contact me, they ALL tell me it brings them to a page with a video that does not autoplay (the homepage).

had to do some more tests, this is on the ipad air on browserstack
dropbox video link

5

Just an idea…

Try changing these parts:
setTimeout(function() {$("a[data-ix='clk-myjourney']").click();}, 1);

to:
setTimeout(function() {$("a[data-ix='clk-myjourney']").click();}, 150);

This might help.

Let me know if this works… 1ms might be too quick. try upping the number until it works.

So in any of the setTimeout change the 1 to a higher number…
http://stackoverflow.com/questions/8230380/settimeout-not-working-on-safari-mobile

6

whew so atleast we are on the same page with this NOT working.

so go from 1, to 150. Ok I can test that now.

Edit, nope that doesn’t work.

your site is working great on mobile when going to page links:
https://thomasarts.com/about-us

just wish mine could :frowning: :frowning:

7

http://forum.webflow.com/t/trigger-webflow-interaction-in-custom-code/18993/3

trying something…

I think it’s because your click trigger is simulating “clicks” on many elements…

each of those elements needs to have the css (cursor:pointer;) added to them or onclick=“” for ios…

I’ll test that first, but you might need to change your click actions to hover actions from what its looking like for it to work on mobile… my site is different and uses the slider… in mine I use .trigger(‘tap’) on the slider that triggers things… this works on mobile. we’ll get this figured out… wish webflows triggers could be activated easier.

8

Hey James. And thanks for helping.

I hear what you are saying but they do have to stay click actions as they are what should happen when someone clicks the mouse or touches their device with their finger.

I couldn’t have pages moving around because someone hovered over a link ya know?

We know it can work because I built my navigation based on Daniel’s awesome website, which works perfect in mobile when going to direct links.

9

Curious why no one from webflow has figured out why this can’t work on mobile but it works on desktop.

10

After being fed up this not working I decided to export my site and get this done outside of webflow.

I did that and it works outside of webflow on my servers.

Here was the fix:

in webflow.js

line 204
added this

// fix for mobile
	touch = false;

Maybe this info can help:

Webflow.validClick = touch ? function(clickTarget) {
   return clickTarget === touchTarget || $.contains(clickTarget, touchTarget);
 } : function() { return true; };

On mobile, the validClick function is returning false when using the trigger(‘click’) or trigger(‘touchstart’) functions.

So my question is how can I update the webflow.js file for my site on webflow servers?

11

Hi @TravisBKlein, at the moment, it is not possible to modify the webflow.js file, but one thing you might try is to put this custom code in the Footer of your site wrapped in a document.ready jquery call (to wait until the dom has loaded first).

I hope this helps.

12

hey @cyberdave.

Ok I will look into that but I don’t think that will have any affect.

The problem is that webflow validclick is returning an incorrect value.

13

so what’s the word on this, I’ve emailed support about the problem but no response.

I guess I’m replying too quickly, how ironic.

14

Hi @TravisBKlein from what I understand, this is not a supported feature - can you please submit a feature request in our Wish List category? http://forum.webflow.com/c/wish-list

15

Hey @thewonglv , I’m actually not looking for a feature to be included.

I am interested in getting the webflow.js file fixed so Validclick returns correctly on mobile devices. (it is currently not doing so)

16

somehow this problem got confused with creating custom URLs, which it is DEFINITELY not.

Custom URLs have nothing to do with this problem.

The problem is webflows.js file is returning an INCORRECT value for Validclick on mobile devices.