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>

Horizontal scroll not working #11

Description

Activity

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions