jQuery should return to exact same vertical position in tab when changing from another tab -
if see fiddle demo, http://jsfiddle.net/zj2vq/1/ working scroll exact same position (in tab "one") left last time (so yellow/clicked line not first line). instead scrolling clicked line more context before showing active/clicked line.
html:
<div id="tabsmain"> <!-- menu line of 3 tabs --> <ul> <li id="tab_one"> <a href="#one">one</a> </li> <li> <a href="#two">two</a> </li> <li> <a href="#three">three</a> </li> </ul> <!-- tab "one" --> <div id='one'> <table> <tr><td><div data-id='1000' class='edit'>line 1</div></td></tr> <tr><td><div data-id='1001' class='edit'>line 2</div></td></tr> <tr><td><div data-id='1002' class='edit'>line 3</div></td></tr> <tr><td><div data-id='1003' class='edit'>line 4</div></td></tr> <tr><td><div data-id='1004' class='edit'>line 5</div></td></tr> <tr><td><div data-id='1005' class='edit'>line 6</div></td></tr> <tr><td><div data-id='1006' class='edit'>line 7</div></td></tr> <tr><td><div data-id='1007' class='edit'>line 8</div></td></tr> <tr><td><div data-id='1008' class='edit'>line 9</div></td></tr> <tr><td><div data-id='1009' class='edit'>line 10</div></td></tr> <tr><td><div data-id='1120' class='edit'>line 11</div></td></tr> <tr><td><div data-id='1121' class='edit'>line 12</div></td></tr> <tr><td><div data-id='1122' class='edit'>line 13</div></td></tr> <tr><td><div data-id='1123' class='edit'>line 14</div></td></tr> <tr><td><div data-id='2001' class='edit'>line 15</div></td></tr> <tr><td><div data-id='2003' class='edit'>line 16</div></td></tr> <tr><td><div data-id='3000' class='edit'>line 17</div></td></tr> <tr><td><div data-id='3001' class='edit'>line 18</div></td></tr> <tr><td><div data-id='3002' class='edit'>line 19</div></td></tr> <tr><td><div data-id='3003' class='edit'>line 20</div></td></tr> <tr><td><div data-id='3004' class='edit'>line 21</div></td></tr> <tr><td><div data-id='3005' class='edit'>line 22</div></td></tr> <tr><td><div data-id='3006' class='edit'>line 23</div></td></tr> <tr><td><div data-id='3007' class='edit'>line 24</div></td></tr> <tr><td><div data-id='3008' class='edit'>line 25</div></td></tr> <tr><td><div data-id='3009' class='edit'>line 26</div></td></tr> <tr><td><div data-id='4120' class='edit'>line 27</div></td></tr> <tr><td><div data-id='4121' class='edit'>line 28</div></td></tr> <tr><td><div data-id='4122' class='edit'>line 29</div></td></tr> <tr><td><div data-id='4123' class='edit'>line 30</div></td></tr> <tr><td><div data-id='5001' class='edit'>line 31</div></td></tr> <tr><td><div data-id='5003' class='edit'>line 32</div></td></tr> </table> </div> <!-- 2 --> <div id='two'> tab 2 stuff ... </div> <!-- 3 --> <div id='three'> tab 3 other stuff ... </div> </div> jquery:
$(function () { $("#tabsmain").tabs({ // populate variable current/active tab activate: function (event, ui) { oldtabindex = ui.oldtab.index(); } }); }); // -------------------------------------------------------------------- // return same vertical position when clicking view tab // if come 2nd tab $("#tab_one").click(function (event) { if (oldtabindex == 1) { if ($("#selectedrow").length > 0) { $('html, body').animate({ scrolltop: $("#selectedrow").offset().top }, 500); } } }); // -------------------------------------------------------------------- // highlight current row , set selection color , id attribute var bgcolor; var yellow = "rgb(255, 255, 0)"; $("table tr").hover( function () { // hover-in bgcolor = $(this).css("background-color"); if (bgcolor != yellow) { $(this).css("background-color", "khaki"); } }, function () { // hover-out bgcolor = $(this).css("background-color"); if (bgcolor === yellow) { $(this).css("background-color", "yellow"); } else { $(this).css("background-color", ""); } }); $("table tr").click(function () { $("table tr").each(function () { $(this).css("background-color", ""); $(this).removeattr('id'); }); $(this).css("background-color", "yellow"); $(this).attr('id', 'selectedrow'); }); // -------------------------------------------------------------------- // clicks on "edit" class $(".edit").click(function (e) { e.preventdefault(); // prevent window/page jump top // change focus tab "two" (0-based index 2nd tab) $("#tabsmain").tabs("option", "active", 1); // id need edit var id = $(this).closest('div').data('id'); // ajax stuff ... }); is anyhow possible?
i fixed myself using jquery-cookie plugin - returns exact same vertical position left last.
when clicking line in list (in tab one), save position cookie , once clicking on tab one, fetch old position cookie , scroll down it.
i replaced code:
$(".edit").click(function (e) { e.preventdefault(); // prevent window/page jump top // change focus tab "two" (0-based index 2nd tab) $("#tabsmain").tabs("option", "active", 1); .. code (i added cookie part - didn't change/delete anything):
$(".edit").click(function (e) { e.preventdefault(); // prevent window/page jump top // set cookie named "scrollpos" lives 7 days var scrollpos = $(window).scrolltop(); $.cookie("scrollpos", scrollpos, { path: '/', expires: 7 }); // change focus tab "two" (0-based index 2nd tab) $("#tabsmain").tabs("option", "active", 1); note "e.preventdefault()" can deleted - doesn't in here have found out.
and replaced this:
$("#tab_one").click(function (event) { if (oldtabindex == 1) { if ($("#selectedrow").length > 0) { $('html, body').animate({ scrolltop: $("#selectedrow").offset().top }, 500); } } }); .. this:
$("#tab_one").click(function (event) { if (oldtabindex == 1) { var scrollpos = $.cookie("scrollpos"); // "scrollpos" cookie $('html, body').animate({ scrolltop: scrollpos }, 500); } }); i cannot fiddle demo include jquery-cookie plugin(?) :-/
Comments
Post a Comment