Horizontal scroll not working

diegomesata commented 9 years ago

Hello, if the table doesn't fit horizontally in the screen, the horizontal scroll bar doesn't work. It shows only the first left columns. #2 talk about it, but I don't understand where to put that fix code?

duhnochi commented 9 years ago

I do not remember.. But... Do you tried put it after freeze header initialization (of course, inside in document.ready)?

Yeah, i know.. My english is not perfect :DDD, sorry

ghost commented 9 years ago

I was playing around with this last night and here is the code that I changed to enable horizontal scrolling. Sorry, no time for a pull request right now...

Here is what it looks like:

table-grid

Starting at line 60 of jquery.freezeheader.js, here are the changes that made the horizontal scrolling possible:

if (obj.header.offset() != null) {
    if (limiteAlcancado(obj, params)) {
        if (!copiedHeader) {
            cloneHeaderRow(obj);
            copiedHeader = true;
        }
        // The following line was added - waynebloss
        obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
    }
    else {

        if (($(document).scrollTop() > obj.header.offset().top)) {
            obj.container.css("position", "absolute");
            obj.container.css("top", (obj.grid.find("tr:last").offset().top - obj.header.height()) + "px");
            // The same exact line was added here (yuck!) - waynebloss
            obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
        }
        else {
            obj.container.css("visibility", "hidden");
            obj.container.css("top", "0px");
            obj.container.width(0);
        }
        copiedHeader = false;
    }
}

I did not use the included style.css file from the freezeheader repository, instead I used Bootstrap and here is the HTML for the demo shown above:

<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery.freezeheader.js"></script>
    <!-- link rel="stylesheet" type="text/css" href="css/style.css" / -->
    <style type="text/css">
        .navbar { margin-bottom: 0 !important; }
        body { padding-top: 50px; }
    </style>
 <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#table1").freezeHeader({offset: '50px'});
        })
    </script>
  </head>
  <body>
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Title, Navbars, Menus, etc...</a>
            </div>
        </div>
    </div>
  <table class="table" style="min-width: 1000px" id="table1">
        <thead>
            <tr style="background-color:white;">
                <th style='width: 250px'>
                    Culture Name
                </th>
                <th style='width: 250px'>
                    Display Name
                </th>
                <th style='width: 250px'>
                    Culture Code
                </th>
                <th style='width: 250px'>
                    ISO 639x
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="grid">
                <td>
                    hr-HR
                </td>
                <td>
                    Croatian - Croatia
                </td>
                <td>
                    0x041A
                </td>
                <td>
                    HRV
                </td>
            </tr>
            <!-- Lots more rows go here, get them from freezeheader repo index.html file. --> 
        </tbody>
    </table>    
</body>
</html>

laertejjunior commented 9 years ago

very good!

with a small change

//at line 46: obj.scroller = params && params.height !== undefined ? $('#hdScroll' + obj.id) : $(window);

// The following line was added - waynebloss obj.container.css("left", ("-" +* obj.scroller.scrollLeft()* + "px"));

I will publish your changes using the bootstrap.

2015-11-03 23:35 GMT-02:00 Wayne Bloss notifications@github.com:

I was playing around with this last night and here is the code that I changed to enable horizontal scrolling. Sorry, no time for a pull request right now...

Here is what it looks like:

[image: table-grid] https://cloud.githubusercontent.com/assets/623736/10926986/f992ed4e-8269-11e5-8199-738b934e0187.gif

Starting at line 60 of jquery.freezeheader.js https://github.com/laertejjunior/freezeheader/blob/b95b8523ba084cc4f243e129135f29bbc32c46e7/js/jquery.freezeheader.js#L60, here are the changes that made the horizontal scrolling possible:

if (obj.header.offset() != null) { if (limiteAlcancado(obj, params)) { if (!copiedHeader) { cloneHeaderRow(obj); copiedHeader = true; } // The following line was added - waynebloss obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px")); } else {
    if (($(document).scrollTop() > obj.header.offset().top)) {
        obj.container.css("position", "absolute");
        obj.container.css("top", (obj.grid.find("tr:last").offset().top - obj.header.height()) + "px");
        // The same exact line was added here (yuck!) - waynebloss
        obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
    }
    else {
        obj.container.css("visibility", "hidden");
        obj.container.css("top", "0px");
        obj.container.width(0);
    }
    copiedHeader = false;
}
}

I did not use the included style.css file from the freezeheader repository, instead I used Bootstrap and here is the HTML for the demo shown above:

<!DOCTYPE html>

Title, Navbars, Menus, etc...

Culture Name Display Name Culture Code ISO 639x

hr-HR Croatian - Croatia 0x041A HRV

— Reply to this email directly or view it on GitHub https://github.com/laertejjunior/freezeheader/issues/11#issuecomment-153543004 .

Culture Name	Display Name	Culture Code	ISO 639x
hr-HR	Croatian - Croatia	0x041A	HRV

att,

Laerte Mercier Junior laertejjunior@gmail.com Tel:(27)9643-9964 "O ignorante afirma, o sábio duvida, o sensato reflete." (Aristóteles)

ghost commented 9 years ago

One more change. Subtracting obj.grid.position().left is necessary when the table has a parent with padding:

obj.container.css('left', '-' + (obj.scroller.scrollLeft() - obj.grid.position().left) + 'px');

There may be a better way to do all of this, but it's working for me right now. (UPDATE: This addition does not work.)

ghost commented 9 years ago

The most recent addition that I noted earlier does not actually work.

Any suggestions on how to account for horizontal padding on the left would be appreciated. If I find something I will post it here.

ghost commented 9 years ago

The code that is working the best for me is the line from #2:

obj.container.css('left', (window.pageXOffset * -1) + obj.grid.offset().left);

saxrub commented 8 years ago

Hi all Why the last version do not include these modifications?

ghost commented 8 years ago

@saxrub Here is an alternative - http://mkoryak.github.io/floatThead/

singhswat commented 7 years ago

Hi @laertejjunior

Whats the change that got horizontal scroll working

here's what I tried

`(function ($) { var TABLE_ID = 0; $.fn.freezeHeader = function (params) {

    var copiedHeader = false;

    function freezeHeader(elem) {
        var idObj = elem.attr('id') || ('tbl-' + (++TABLE_ID));
        if (elem.length > 0 && elem[0].tagName.toLowerCase() == "table") {

            var obj = {
                id: idObj,
                grid: elem,
                container: null,
                header: null,
                divScroll: null,
                openDivScroll: null,
                closeDivScroll: null,
                scroller: null
            };

            if (params && params.height !== undefined) {
                obj.divScroll = '<div id="hdScroll' + obj.id + '" style="height: ' + params.height + '; overflow-y: scroll">';
                obj.closeDivScroll = '</div>';
            }

            obj.header = obj.grid.find('thead');

            if (params && params.height !== undefined) {
                if ($('#hdScroll' + obj.id).length == 0) {
                    obj.grid.wrapAll(obj.divScroll);
                }
            }

            //obj.scroller = params && params.height !== undefined
            //   ? $('#hdScroll' + obj.id)
            //   : $(window);
            obj.container.css("left", ("-" + obj.scroller.scrollLeft()* + "px"));

            if (params && params.scrollListenerEl !== undefined) {
                obj.scroller = params.scrollListenerEl;
            }
            obj.scroller.on('scroll', function () {
                if ($('#hd' + obj.id).length == 0) {
                    obj.grid.before('<div id="hd' + obj.id + '"></div>');
                }

                obj.container = $('#hd' + obj.id);

                if (obj.header.offset() != null) {
                    if (limiteAlcancado(obj, params)) {
                        elem.trigger("freeze:on");
                        if (!copiedHeader) {
                            cloneHeaderRow(obj);
                            copiedHeader = true;
                        }
                        // The following line was added - waynebloss
                        obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
                    }
                    else {

                        if (($(document).scrollTop() > obj.header.offset().top)) {
                            obj.container.css("position", "absolute");
                            obj.container.css("top", (obj.grid.find("tr:last").offset().top - obj.header.height()) + "px");
                            // The same exact line was added here (yuck!) - waynebloss
                            obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
                        }
                        else {
                            elem.trigger("freeze:off");
                            obj.container.css("visibility", "hidden");
                            obj.container.css("top", "0px");
                            obj.container.width(0);
                        }
                        copiedHeader = false;
                    }
                }

            });
        }
    }

    function limiteAlcancado(obj, params) {
        if (params && (params.height !== undefined || params.scrollListenerEl !== undefined)) {
            return (obj.header.offset().top <= obj.scroller.offset().top);
        }
        else {
            var top = obj.header.offset().top;
            if (params) {
                if (params.offset !== undefined) {
                   top -= parseInt(params.offset.replace('px',''),10);
                }
            }

            var gridHeight = (obj.grid.height() - obj.header.height() - obj.grid.find("tr:last").height()) + obj.header.offset().top;
            return ($(document).scrollTop() > top && $(document).scrollTop() < gridHeight);
        }
    }

    function cloneHeaderRow(obj) {
        obj.container.html('');
        obj.container.val('');
        var tabela = $('<table style="margin: 0 0;"></table>');
        var atributos = obj.grid.prop("attributes");

        $.each(atributos, function () {
            if (this.name != "id") {
                tabela.attr(this.name, this.value);
            }
        });

        var clone = obj.header.clone(true);

        clone.appendTo(tabela);

        obj.container.append(tabela);
        obj.container.width(obj.header.width());
        obj.container.height(obj.header.height);
        obj.container.find('th').each(function (index) {
            var cellWidth = obj.grid.find('th').eq(index).width();
            $(this).css('width', cellWidth);
        });

        obj.container.css("visibility", "visible");

        if (params && params.height !== undefined) {

            if(params.offset !== undefined){
                obj.container.css("top", obj.scroller.offset().top + (params.offset.replace("px","") * 1) + "px");
            }
            else
            {
                obj.container.css("top", obj.scroller.offset().top + "px");
            }

        obj.container.css("position", "absolute");

        } else if (params && params.scrollListenerEl!== undefined) { 
            obj.container.css("top", obj.scroller.find("thead > tr").innerHeight() + "px");
            obj.container.css("position", "absolute");
            obj.container.css("z-index", "2");
        } else if (params && params.offset !== undefined) {
            obj.container.css("top", params.offset);
            obj.container.css("position", "fixed");
        } else {
            obj.container.css("top", "0px");
            obj.container.css("position", "fixed");
        }
    }

    return this.each(function (i, e) {
        freezeHeader($(e));
    });

};

})(jQuery);`

fanelligroup commented 3 years ago

Hello, it's possible to have the final fixed code? I tried to apply the fix on the existing but it didn't work. You would be of great help to me. Thanks.

laertejjunior / freezeheader

Horizontal scroll not working #11