Databases
StackOverflow2013
Postsdbo
POjQuery toggled tr elements drift down page
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery toggled tr elements drift down page
    primarykey
    data
    text
    <p>The gist of my problem is that I have a table that every even row is hidden, and visibility is toggled using an anchor on the row above. This works correctly, but in some browsers (Safari and Chrome) the tr below the one that just appeared moves down further than it should have.</p> <p>If you keep toggling the hidden tr the next sibling drifts down the page.</p> <p>Here is a bare bones code that shows this issue (requires jquery)</p> <pre><code> &lt;script type="text/javascript"&gt; $(function() { //document ready $('.details').hide(); $('.show_hide').click(function(event){ event.preventDefault(); $(this).parents('tr').next().slideToggle('slow'); }); }); //end doc ready &lt;/script&gt; &lt;style&gt; table { width: 500px; } .main td { width: 33%; } &lt;/style&gt; &lt;table&gt; &lt;tr class="main"&gt; &lt;td&gt;Title&lt;/td&gt; &lt;td&gt;Some Detail&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="show_hide"&gt;Show/Hide&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="details"&gt; &lt;td&gt; Sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. Pellentesque porttitor aliquet metus a accumsan. Aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed purus nisi, at venenatis tellus. Praesent id magna ac dui congue convallis. Duis sit amet arcu eu ipsum tincidunt fermentum. Praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, at rhoncus elit urna nec magna. Vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. Nam id leo eros, et posuere massa. Morbi fermentum egestas nisl, et pharetra urna convallis viverra. Maecenas id massa nulla. Pellentesque eget urna vel diam interdum sollicitudin sit amet in massa. &lt;/td&gt; &lt;/tr&gt; &lt;tr class="main"&gt; &lt;td&gt;Title 2&lt;/td&gt; &lt;td&gt;Some Detail 2&lt;/td&gt; &lt;td&gt;&lt;a href="#" class="show_hide"&gt;Show/Hide&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="details"&gt; &lt;td&gt; Sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. Pellentesque porttitor aliquet metus a accumsan. Aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed purus nisi, at venenatis tellus. Praesent id magna ac dui congue convallis. Duis sit amet arcu eu ipsum tincidunt fermentum. Praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, at rhoncus elit urna nec magna. Vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. Nam id leo eros, et posuere massa. Morbi fermentum egestas nisl, et pharetra urna convallis viverra. Maecenas id massa nulla. Pellentesque eget urna vel diam interdum sollicitudin sit amet in massa. &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>The above code seems to work fine in Opera and Firefox, but the issue mentioned above happens in Safari and Chrome. (Haven't tested in IE yet). This makes me suspicious that it is a webkit related issue.</p> <p>Anyone else found the problem? Is there a workaround?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USZak Henry
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COused your code and can't reproduce the problem, tesdted in Chrome and Safari, can you reproduce it in this fiddle: http://jsfiddle.net/fzHug/1/ ?
      singulars
      1. POjQuery toggled tr elements drift down page
      1. USSebastian Patane Masuelli
    2. COIf you google show hide tr jquery you'll find lots of references to weird things happening when trying to show hide tr's in various browsers. However, I used your code, tested with jquery 1.4.3 and chrome 7.0.517.44 and did not experience your problem. I tested in ie 8 and ff3.6 as well. All browsers worked fine. My suggestion is to try different methods instead of using slide toggle, try fade, and regular show/hide, or if you aren't using the latest jquery, upgrade. Otherwise I would just suggest not hiding tr's... switch to li's and css =]
      singulars
      1. POjQuery toggled tr elements drift down page
      1. USsuperfro
    3. CO@Sebastian Patane Masuelli Oddly no, it doesn't happen in that fiddle. jQuery 1.4.4 or otherwise. Great tool though
      singulars
      1. POjQuery toggled tr elements drift down page
      1. USZak Henry
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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