jQuery on a .php file not working on mobile (iOS and Android) but works perfect on computer

Question

I have a very interesting problem. I recently created a simple one page static website (.html) based on Bootstrap with some jQuery in it, and is working perfectly on localhost (xampp) and live server (PC and mobiles).

I then added a .php file to the site, which is similar to the html page, but has a script in it. After uploading, everything is fine except on mobile browsers; jQuery doesn't work. The html file working perfect, the php doesn't work. I tried opening in Chrome-Android, Samsung Internet-Android and a Safari-iOS; all not working. I downloaded the .min.js jQuery and Bootstrap files and linked them, not working. Changed CDNs, not working. Changed

$(document).ready(function(){...

to

$(function(){...

you guessed it, not working.

Every time I change, I make sure it is working well on localhost and on PC but on mobiles it wont.

Any help regarding this issue? I'm banging my head on the desk!

My link tags:

<meta http-equiv="Cache-control" content="no-transform" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">

My current jQuery:

<script>
    $(function() {
        $("html,window").stop().scrollTop(0);
        $("#mainmenu").stop().fadeIn(0);
        $("#scrollup").stop().fadeOut(0);
        $(window).scroll(function() {
            if ($(this).scrollTop() > ($("#about").position().top + $("#about").height()) / 2) {
                $("#mainmenu").stop().fadeTo('300', 0.5);
                $("#scrollup").stop().fadeTo(0, 1);
            } else {
                $("#mainmenu").stop().fadeTo('300', 1);
                $("#scrollup").stop().fadeTo(0, 0);
            }
        });
        $("#scrollup").click(function() {
            $("html,window").stop().animate({
                scrollTop: 0
            }, 1000, 'swing');
        });
        $("#readmore").click(function() {
            $("html,window").stop().animate({
                scrollTop: $("#projects").position().top
            }, 1000, 'swing');
        });
    });

</script>

I'm using the free plan of 000webhost.com, which I do primarily for testing purposes.

edit: My php script is a simple include() function, and is working without any problems on all devices.

Edit2: After investigating further, I found that the fading in and out functions are working quite well. The functions with scrollTop() are the ones having problems.

@OfirBaruch I edited my question. The php script is an include function that calls wordpress API. It is working as it should on all servers and devices. — Ahmed Mohamed, Feb 01 '17 at 13:49
If you remove the php script - everything works as it should be? — Ofir Baruch, Feb 01 '17 at 14:06
But in your question you've said that the problem happened after adding the php script...?? — Ofir Baruch, Feb 01 '17 at 14:18
No, I added a new index.php file, which is identical to the HTML but with a '' line. The problems happen in index.php — Ahmed Mohamed, Feb 01 '17 at 14:24
You're losing me... And after adding this code it started to have problems? So if you remove that line everything would work? — Ofir Baruch, Feb 01 '17 at 14:25

score 0 · Accepted Answer · edited May 23 '17 at 11:53

After a lot of research, head banging and decrease in my lifespan, I found that the problem is not in jQuery itself but rather with specific functions. I noticed that the fadeIn, fadeOut and fadeTo functions work properly, but scrollTop related functions and Bootstrap jQuery weren't working. The fix to scrollTop, referencing this old SO question, was to set overflow to hidden on body and html tags before scrolling, then resetting it. So basically:

CSS:

.fix{
         overflow, overflow-x, overflow-y:hidden; !important
    }

jQuery:

$("body,html").addClass("fix").animate/scrollTop(...).removeClass("fix");

After checking it works on all mobile browsers I have access to. Still though, Bootstrap navbar collapse scripts are not working on mobile browsers, and I am yet to find a solution for it.

UPDATE

After further head banging, I found out that I loaded Bootstrap .css and .js BEFORE loading jQuery:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

A simple trivial and logical change of loading jQuery BEFORE Bootstrap solved all my issues, obviously due to BS scripts using jQuery which must be already loaded:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Along with the mobile fix for scrolling functions, these 2 solutions fixed all my issues I had on mobile devices.

jQuery on a .php file not working on mobile (iOS and Android) but works perfect on computer

1 Answers1