I've just put a wordpress site live and noticed a few jquery functions weren't working in safari on iPhone and Ipad (i have yet to test other mobile devices but everything seems to be working on chrome/firefox/IE on desktop). Here is the site www.sparkyboys.com.au
First problem i found was a fade in effect i created wasn't working. After searching i found that scrollTop was a problem so changed the code to this but it still didnt work.
var isMobile = false; //initiate as false
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;
function fadeInUp(fadeElement) {
var bottom_of_object;
var bottom_of_window;
if( isMobile) {
bottom_of_object = $(fadeElement).offset().top + $(fadeElement).outerHeight() / 2;
bottom_of_window = $(window).pageYOffset + $(window).height();
}
else{
bottom_of_object = $(fadeElement).offset().top + $(fadeElement).outerHeight() / 2;
bottom_of_window = $(window).scrollTop() + $(window).height();
}
/* If the object is completely visible in the window, fade it it */
if (bottom_of_window > bottom_of_object) {
fadeReady = false;
$(fadeElement).css('margin-top', 0);
$(fadeElement).css('margin-bottom', 0);
$(fadeElement).css('opacity', 1);
$(fadeElement).removeClass('js-fadeInUp');
}
}
I resigned myself to just admitting defeat and getting rid of fade in effects on smaller screen sizes.
Next problem I came across was on a service list page (e.g www.sparkyboys.com.au/general ). It seems on the iPhone the dropdowns aren't clickable with the .toggle() jQuery functionality. using the following code.
function categoryDropDown (dropDownElement) {
dropDownElement.next('.list-filler').css({'display': 'block'});
var index = dropDownElement.parent().next('.sublist').index('.sublist');
dropDownElement.parent().next('.sublist').css({'height': dropdownHeights[index]});
dropDownElement.children('.dropdown-arrow').children('.fa-angle-down').css({'transform': 'rotate(180deg)'});
}
function categoryLiftUp (dropDownElement) {
dropDownElement.next('.list-filler').css({'display': 'none'});
dropDownElement.parent().next('.sublist').css({'height': '0'});
dropDownElement.children('.dropdown-arrow').children('.js-rotate').css({'transform': 'rotate(0deg)'});
}
$('.js-categoryDropDown').toggle(function() {
categoryDropDown($(this));
}, function(){
categoryLiftUp($(this));
});
and then finally - (and there's probably more problems i haven't found) - on the booking page there's meant to be a little notice that shows at the top next to 'important - '. This notice is dynamically added with jQuery since it has to calculate the amount of time that is shown. I'm using the jquery function .html() to add it, but it doesn't seem to be working. This is called from the booking_page.js file once the document has loaded, and that js file is only loaded on the booking page. ( www.sparkyboys.com.au/booking )
$('#important-notes').html('Estimated job duration:<div class="job_total_time"> '+total_time.toFixed(2)+' hours.</div>' + '<br />' +
'If \'Job Duration\' of less time is selected and the job can\'t be completed in one booking you will be charged for an extra call out fee.');
So i'm wondering if there are workarounds for these problems, or if I'm loading/calling my js files in the wrong way or something on phones.
I did download this https://github.com/artygus/ios-webkit-debug-proxy-win32 and got it running and it says that all the files are being loaded without any errors and the only console warnings i got were about unexpected css tokens from libs I included. It just seems strange to have so many problems with some basic jquery functions. I'd expect ios/safari to have that functionality. I'm pretty new to some of this though so i wouldn't know.
As a side note the calendar from the booking plugin I'm using also doesn't seem to be loading on iPhone/iPad but i was going to take this up with the developers. It might be a hint as to something bigger going on though since there doesn't seem to be many problems about mobile compatibility listed on their support forums.
