rajeshkr Posted June 6, 2014 Share Posted June 6, 2014 hi, I am using fixed-header code for my table on vertical scroll, its working fine for all column name except last two (balance and pay status) because they are going out side page (horizontally). and when i scroll from bottom to see the last two columns values , the fixed header only show the columns till advance, fixed header not showing last two remaining columns that go out side page horizontally. Check the screen shots for better understanding. image-1 you can see all column till pay status. [ATTACH=CONFIG]64973[/ATTACH] image -2 you can see vertical scroll working fine till advance column. [ATTACH=CONFIG]64974[/ATTACH] Image -3 but in this you can see after full horizontal scroll towards right side, it only showing column till advance, instead of balance and pay status. [ATTACH=CONFIG]64975[/ATTACH] Here is the full code Untitled Document $(document).ready(function() { function moveScroll(){ var scroll = $(window).scrollTop(); var anchor_top = $("#maintable").offset().top; var anchor_bottom = $("#bottom_anchor").offset().top; if (scroll>anchor_top && scroll Please check this and if found give me the solution for this. thanks in Advance Quote Link to comment Share on other sites More sharing options...
rajeshkr Posted June 6, 2014 Author Share Posted June 6, 2014 (edited) hi, I am using fixed-header code for my table on vertical scroll, its working fine for all column name except last two (balance and pay status) because they are going out side page (horizontally). and when i scroll from bottom to see the last two columns values , the fixed header only show the columns till advance, fixed header not showing last two remaining columns that go out side page horizontally. Check the screen shots for better understanding. img-1 you can see all column till pay status. http://www.sitepoint.com/forums/attachment.php?attachmentid=64973&d=1402046213 img -2 you can see vertical scroll working fine till advance column. http://www.sitepoint.com/forums/attachment.php?attachmentid=64974&d=1402046221 Img -3 but in this you can see after full horizontal scroll towards right side, it only showing column till advance, instead of balance and pay status. http://www.sitepoint.com/forums/attachment.php?attachmentid=64975&d=1402046226 Here is the full code <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function() { function moveScroll(){ var scroll = $(window).scrollTop(); var anchor_top = $("#maintable").offset().top; var anchor_bottom = $("#bottom_anchor").offset().top; if (scroll>anchor_top && scroll<anchor_bottom) { clone_table = $("#clone"); if(clone_table.length == 0){ clone_table = $("#maintable").clone(); clone_table.attr('id', 'clone'); clone_table.css({position:'fixed', 'pointer-events': 'none', top:0}); clone_table.width($("#maintable").width()); $("#table-container").append(clone_table); $("#clone").css({visibility:'hidden'}); $("#clone thead").css({visibility:'visible', 'pointer-events':'auto'}); } } else { $("#clone").remove(); } } $(window).scroll(moveScroll); }); </script> <style> thead { background-color:white; } </style> </head> <body> <div id="table-container"> <table border="1" align="center" cellpadding="0" cellspacing="0" class="display" id="maintable"> <thead> <tr class="heading"> <td width="37" align="center">S.No.</td> <td width="56" align="center">Booking Date</td> <td width="55" align="center">Delivery Date</td> <td width="41" align="center">Order No.</td> <td width="65" align="center">Customer Name</td> <td width="47" align="center">Status</td> <td width="27" align="center">P.R.</td> <td width="40" align="center">Cover</td> <td width="25" align="center">Size</td> <td width="75" align="center">Accessories</td> <td width="32" align="center">Bag</td> <td width="50" align="center">Packing</td> <td width="39" align="center">Paper</td> <td width="61" align="center">Coating</td> <td width="32" align="center">G Total</td> <td width="54" align="center">Advance</td> <td width="48" align="center">Balance</td> <td width="57" align="center">Pay Status</td> </tr> </thead> <tr> <td>1</td> <td >12-02-2014</td> <td >16-02-2014</td> <td >1234</td> <td >Rajesh Kumar Rathor</td> <td >pending</td> <td >80</td> <td >ultra cover</td> <td >200</td> <td >Flip flop cover</td> <td >Jute bag</td> <td > Box packing</td> <td >Thick matt</td> <td > Matt lamination</td> <td >2000</td> <td >1000</td> <td >1000</td> <td >Paid</td> </tr> <tr> <td>1</td> <td >12-02-2014</td> <td >16-02-2014</td> <td >1234</td> <td >rkr</td> <td >pending</td> <td >80</td> <td >ultra cover</td> <td >200</td> <td >Flip flop cover</td> <td >Jute bag</td> <td > Box packing</td> <td >Thick matt</td> <td > Matt lamination</td> <td >2000</td> <td >1000</td> <td >1000</td> <td >Paid</td> </tr> <tr> <td>1</td> <td >12-02-2014</td> <td >16-02-2014</td> <td >1234</td> <td >rkr</td> <td >pending</td> <td >80</td> <td >ultra cover</td> <td >200</td> <td >Flip flop cover</td> <td >Jute bag</td> <td > Box packing</td> <td >Thick matt</td> <td > Matt lamination</td> <td >2000</td> <td >1000</td> <td >1000</td> <td >Paid</td> </tr> </table> <div id="bottom_anchor"></div> </div> </body> </html> Please check this and if found give me the solution for this.thanks in Advance Edited June 6, 2014 by rajeshkr Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.