Code Monkey home page Code Monkey logo

Comments (10)

duhnochi avatar duhnochi commented on June 27, 2024

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

from freezeheader.

waynebloss avatar waynebloss commented on June 27, 2024

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>

from freezeheader.

laertejjunior avatar laertejjunior commented on June 27, 2024

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 [email protected]:

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

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>
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
[email protected]
Tel:(27)9643-9964
"O ignorante afirma, o sábio duvida, o sensato reflete."
(Aristóteles)

from freezeheader.

waynebloss avatar waynebloss commented on June 27, 2024

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

from freezeheader.

waynebloss avatar waynebloss commented on June 27, 2024

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.

from freezeheader.

waynebloss avatar waynebloss commented on June 27, 2024

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

from freezeheader.

saxrub avatar saxrub commented on June 27, 2024

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

from freezeheader.

waynebloss avatar waynebloss commented on June 27, 2024

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

from freezeheader.

singhswat avatar singhswat commented on June 27, 2024

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

from freezeheader.

fanelligroup avatar fanelligroup commented on June 27, 2024

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.

from freezeheader.

Related Issues (18)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.