Databases
StackOverflow2013
Postsdbo
POjQuery should return to exact same vertical position in tab when changing from another tab
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery should return to exact same vertical position in tab when changing from another tab
    text
    copied!<p>If you see this Fiddle demo, <a href="http://jsfiddle.net/Zj2Vq/1/" rel="nofollow">http://jsfiddle.net/Zj2Vq/1/</a> it is working but what I really would like is for it to scroll to the exact same position (in tab "one") as were I left it the last time (so the yellow/clicked line is not necessarily as the first line). Instead it is scrolling to the clicked line but I would like some more context before showing the active/clicked line.</p> <p>HTML:</p> <pre><code>&lt;div id="tabsMain"&gt; &lt;!-- The menu line of the three tabs --&gt; &lt;ul&gt; &lt;li id="tab_one"&gt; &lt;a href="#one"&gt;one&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#two"&gt;two&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#three"&gt;three&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;!-- Tab "one" --&gt; &lt;div id='one'&gt; &lt;table&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1000' class='edit'&gt;Line 1&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1001' class='edit'&gt;Line 2&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1002' class='edit'&gt;Line 3&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1003' class='edit'&gt;Line 4&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1004' class='edit'&gt;Line 5&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1005' class='edit'&gt;Line 6&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1006' class='edit'&gt;Line 7&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1007' class='edit'&gt;Line 8&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1008' class='edit'&gt;Line 9&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1009' class='edit'&gt;Line 10&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1120' class='edit'&gt;Line 11&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1121' class='edit'&gt;Line 12&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1122' class='edit'&gt;Line 13&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='1123' class='edit'&gt;Line 14&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='2001' class='edit'&gt;Line 15&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='2003' class='edit'&gt;Line 16&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3000' class='edit'&gt;Line 17&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3001' class='edit'&gt;Line 18&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3002' class='edit'&gt;Line 19&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3003' class='edit'&gt;Line 20&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3004' class='edit'&gt;Line 21&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3005' class='edit'&gt;Line 22&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3006' class='edit'&gt;Line 23&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3007' class='edit'&gt;Line 24&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3008' class='edit'&gt;Line 25&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='3009' class='edit'&gt;Line 26&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='4120' class='edit'&gt;Line 27&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='4121' class='edit'&gt;Line 28&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='4122' class='edit'&gt;Line 29&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='4123' class='edit'&gt;Line 30&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='5001' class='edit'&gt;Line 31&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div data-id='5003' class='edit'&gt;Line 32&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;!-- Two --&gt; &lt;div id='two'&gt; Tab two will do some stuff ... &lt;/div&gt; &lt;!-- Three --&gt; &lt;div id='three'&gt; Tab three will do some other stuff ... &lt;/div&gt; &lt;/div&gt; </code></pre> <p>jQuery:</p> <pre><code>$(function () { $("#tabsMain").tabs({ // Populate a variable with the current/active tab activate: function (event, ui) { oldTabIndex = ui.oldTab.index(); } }); }); // -------------------------------------------------------------------- // Return to same vertical position when clicking the view tab // but only if we come from the 2nd tab $("#tab_one").click(function (event) { if (oldTabIndex == 1) { if ($("#selectedRow").length &gt; 0) { $('html, body').animate({ scrollTop: $("#selectedRow").offset().top }, 500); } } }); // -------------------------------------------------------------------- // Highlight current row and set selection color and 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 the "edit" class $(".edit").click(function (e) { e.preventDefault(); // prevent the window/page to jump to the top // Change focus to tab "two" (0-based index so this is the 2nd tab) $("#tabsMain").tabs("option", "active", 1); // Get the ID we need to edit var id = $(this).closest('div').data('id'); // some Ajax stuff ... }); </code></pre> <p>Is this anyhow possible?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload