Monday, November 11, 2019

ios/iphone safari table header static with content scroll fix

We fix the problem with javascript.
1. You need to create normal table functioning on others browser.
2. Apply this solution below with cloning concept.

var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };

function iosTablesScroll(){
        return true;
        if(isMobile.iOS() && $('#table-wrapper').length){
            //create same scroll
            $("#table-wrapper").scroll(function(){
                $(".table-header").scrollLeft($(this).scrollLeft());
            });

            if($(".table-header:visible").length){
                $(".table-header").remove(); //reset before create
            }
            //create dummy table header
            var iostable = '
'+
                        '  '+
                        ' 
'+
                        '
';
            $("#content").before(iostable);
            $(".crypto-table thead").clone().appendTo('.table-header table');
            $('#table-wrapper').removeClass('full-height'); //reset

            //put same width td and th
            t1 = $("#table-wrapper table th");
            t2 = $("#table-wrapper table td");
            if(t2.html() != 'No stock at the moment') {
                t2.each(function (index) {
                          $(this).attr('width',t1.eq(index).attr('width'));
                });
            }

            $("table").css('table-layout','fixed');
            $(".table-header").show();
            $(".crypto-table thead").hide();
        }else{
            $(".table-header").hide();
            $(".crypto-table thead").show();
        }
    }

No comments: