Horizontal scroll not working #11

diegomesata · 2015-05-21T20:46:37Z

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 · 2015-06-11T01:52:37Z

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

waynebloss · 2015-11-04T01:35:00Z

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:

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 · 2015-11-04T14:06:11Z

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

freezeheader/js/jquery.freezeheader.js

Line 60 in b95b852

if (obj.header.offset() != null) {

,
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:
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script> <script type="text/javascript" src="js/jquery.freezeheader.js"></script> <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>

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
#11 (comment)
.

att,

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

waynebloss · 2015-11-04T21:21:14Z

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.)

waynebloss · 2015-11-05T03:20:03Z

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.

waynebloss · 2015-11-05T03:28:32Z

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);

…rom waynebloss on Nov 4 in laertejjunior#11

saxrub · 2016-05-09T10:39:55Z

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

waynebloss · 2016-05-09T14:25:20Z

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

singhswat · 2017-02-01T15:03:31Z

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 · 2021-03-11T20:36:40Z

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.

ehammond added a commit to campus-explorer/freezeheader that referenced this issue Nov 17, 2015

To fix horizontal scrolling in our environment, copied in some code f…

12c1b22

…rom waynebloss on Nov 4 in laertejjunior#11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Horizontal scroll not working #11

Horizontal scroll not working #11

diegomesata commented May 21, 2015

duhnochi commented Jun 11, 2015

waynebloss commented Nov 4, 2015

laertejjunior commented Nov 4, 2015

waynebloss commented Nov 4, 2015

waynebloss commented Nov 5, 2015

waynebloss commented Nov 5, 2015

saxrub commented May 9, 2016

waynebloss commented May 9, 2016

singhswat commented Feb 1, 2017

fanelligroup commented Mar 11, 2021

Horizontal scroll not working #11

Horizontal scroll not working #11

Comments

diegomesata commented May 21, 2015

duhnochi commented Jun 11, 2015

waynebloss commented Nov 4, 2015

laertejjunior commented Nov 4, 2015

waynebloss commented Nov 4, 2015

waynebloss commented Nov 5, 2015

waynebloss commented Nov 5, 2015

saxrub commented May 9, 2016

waynebloss commented May 9, 2016

singhswat commented Feb 1, 2017

fanelligroup commented Mar 11, 2021