My FixedHeader fixes: iPad compatibility and correct parenting

My FixedHeader fixes: iPad compatibility and correct parenting

arturoeaarturoea Posts: 4Questions: 0Answers: 0
edited January 2011 in FixedHeader
This patch to version 2.0.4 makes the headers compatible with iPad, which calculates offsets in an incompatible way.

Another fix is that it sets the new div with the cloned headers as a child of the div wrapper. This allows the headers to be automatically hidden if the corresponding table is hidden itself, and allows for top/left offset calculations to be done relative to the table, not the screen.

The offsets have only been corrected for the iPad for the header, not for fixedFooter nor fixedLeft nor Right.

This is a result of my work and needs for our systems; maybe integration into the mainstream code will require a better, more general (iPhone?) adaptation and maybe better coding; I am posting them here hoping that the main ideas will be integrated upstream.

Replies

  • arturoeaarturoea Posts: 4Questions: 0Answers: 0
    [code]: FixedHeader.js
    ===================================================================
    --- FixedHeader.js
    +++ FixedHeader.js-new
    @@ -98,6 +98,17 @@
    * Scope: global
    */
    FixedHeader.prototype = {
    + /*
    + * Function: fnIsiPad
    + * Purpose: Detect if this is safari iPad browser.
    + * Returns: bool: detected
    + * Inputs: -
    + */
    + _fnIsiPad: function ()
    + {
    + return (jQuery.browser.safari && navigator.platform.indexOf("iPad") != -1);
    + },
    +
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    * Initialisation
    */
    @@ -153,7 +164,7 @@
    s.bFooter = ($('>tfoot', s.nTable).length > 0) ? true : false;

    /* "Detect" browsers that don't support absolute positioing - or have bugs */
    - s.bUseAbsPos = (jQuery.browser.msie && (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"));
    + s.bUseAbsPos = this._fnIsiPad () || (jQuery.browser.msie && (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"));

    /* Add the 'sides' that are fixed */
    if ( s.oSides.top )
    @@ -288,7 +299,7 @@

    /* Insert the newly cloned table into the DOM, on top of the "real" header */
    nDiv.appendChild( nCTable );
    - document.body.appendChild( nDiv );
    + s.nTable.parentNode.appendChild (nDiv);

    return {
    "nNode": nCTable,
    @@ -314,6 +325,7 @@
    m = s.oMes,
    jqTable = jQuery(s.nTable),
    oOffset = jqTable.offset(),
    + oPosition = jqTable.position(),
    iParentScrollTop = this._fnSumScroll( s.nTable.parentNode, 'scrollTop' ),
    iParentScrollLeft = this._fnSumScroll( s.nTable.parentNode, 'scrollLeft' );

    @@ -324,6 +336,8 @@
    m.iTableRight = m.iTableLeft + m.iTableWidth;
    m.iTableRight = FixedHeader.oDoc.iWidth - m.iTableLeft - m.iTableWidth;
    m.iTableBottom = FixedHeader.oDoc.iHeight - m.iTableTop - m.iTableHeight;
    + m.iTablePosTop = oPosition.top;
    + m.iTablePosLeft = oPosition.left;
    },

    /*
    @@ -560,19 +574,20 @@
    nTable = oCache.nWrapper,
    iTbodyHeight = s.nTable.getElementsByTagName('tbody')[0].offsetHeight;

    - if ( oMes.iTableTop > oWin.iScrollTop )
    + var iTableTop = (this._fnIsiPad ())? oMes.iTableTop - oWin.iScrollTop: oMes.iTableTop;
    + if ( iTableTop > oWin.iScrollTop )
    {
    /* Above the table */
    this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
    - this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
    - this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
    + this._fnUpdateCache( oCache, 'sTop', oMes.iTablePosTop+"px", 'top', nTable.style );
    + this._fnUpdateCache( oCache, 'sLeft', oMes.iTablePosLeft+"px", 'left', nTable.style );
    }
    - else if ( oWin.iScrollTop > oMes.iTableTop+iTbodyHeight )
    + else if ( oWin.iScrollTop > iTableTop+iTbodyHeight )
    {
    /* At the bottom of the table */
    this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
    - this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iTbodyHeight)+"px", 'top', nTable.style );
    - this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
    + this._fnUpdateCache( oCache, 'sTop', (iTableTop+iTbodyHeight)+"px", 'top', nTable.style );
    + this._fnUpdateCache( oCache, 'sLeft', oMes.iTablePosLeft+"px", 'left', nTable.style );
    }
    else
    {
    @@ -580,14 +595,14 @@
    if ( s.bUseAbsPos )
    {
    this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
    - this._fnUpdateCache( oCache, 'sTop', oWin.iScrollTop+"px", 'top', nTable.style );
    - this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
    + this._fnUpdateCache( oCache, 'sTop', (oWin.iScrollTop-iTableTop+oMes.iTablePosTop)+"px", 'top', nTable.style );
    + this._fnUpdateCache( oCache, 'sLeft', oMes.iTablePosLeft+"px", 'left', nTable.style );
    }
    else
    {
    this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
    this._fnUpdateCache( oCache, 'sTop', "0px", 'top', nTable.style );
    - this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style );
    + this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft) +"px", 'left', nTable.style );
    }
    }
    },
    [/code]
  • allanallan Posts: 62,377Questions: 1Answers: 10,234 Site admin
    Hi arturoea,

    Very interesting - thanks for the diff! I'll have a proper look through when I get a chance later on and see what is involved in adding in the remaining options needed for left right etc.

    Regards,
    Allan
  • KibodeauxKibodeaux Posts: 1Questions: 0Answers: 0
    edited June 2011
    This allows the headers to be automatically hidden if the corresponding table is hidden itself, and allows for top/left offset calculations to be done relative to the table, not the screen.


    Thanks
This discussion has been closed.