Databases
StackOverflow2013
Postsdbo
POMove div to top after click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMove div to top after click
    primarykey
    data
    text
    <pre><code>$(document).ready(function() { $('div.post').click(function() { // the clicked LI var clicked = $(this); // all the LIs above the clicked one var previousAll = clicked.prevAll(); // only proceed if it's not already on top (no previous siblings) if(previousAll.length &gt; 0) { // top LI var top = $(previousAll[previousAll.length - 1]); // immediately previous LI var previous = $(previousAll[0]); // how far up do we need to move the clicked LI? var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop'); // how far down do we need to move the previous siblings? var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight()); // let's move stuff clicked.css('position', 'relative'); previousAll.css('position', 'relative'); clicked.animate({'top': -moveUp}); previousAll.animate({'top': moveDown}, {complete: function() { // rearrange the DOM and restore positioning when we're done moving clicked.parent().prepend(clicked); clicked.css({'position': 'static', 'top': 0}); previousAll.css({'position': 'static', 'top': 0}); }}); } }); </code></pre> <p>});</p> <p>How can I move a div to the top of a list of divs upon clicking a link.</p> <p>eg;</p> <pre><code>&lt;div id=1&gt;Div One &lt;a&gt;Click to update&lt;/a&gt;&lt;a&gt;a different link&lt;/a&gt;&lt;/div&gt; &lt;div id=2&gt;Div One &lt;a&gt;Click to update&lt;/a&gt;&lt;a&gt;a different link&lt;/a&gt;&lt;/div&gt; &lt;div id=3&gt;Div One &lt;a&gt;Click to update&lt;/a&gt;&lt;a&gt;a different link&lt;/a&gt;&lt;/div&gt; &lt;div id=4&gt;Div One &lt;a&gt;Click to update&lt;/a&gt;&lt;a&gt;a different link&lt;/a&gt;&lt;/div&gt; &lt;div id=5&gt;Div One &lt;a&gt;Click to update&lt;/a&gt;&lt;a&gt;a different link&lt;/a&gt;&lt;/div&gt; </code></pre> <p>and when you click ONLY on the link "CLICK TO UPDATE" for any div, it should move that div to the top of the page!</p> <hr> <p>80% done. Thanx guys for the swift response. Preciate it to the max. Anyways thanx to @valipour I managed to get the div to move ONLY when you click on a specific link by adding a class to the link and changing my first two lines from;</p> <pre><code>$('div.post').click(function() { // the clicked LI var clicked = $(this); </code></pre> <p>to;</p> <pre><code>$("a.rep").click(function() { var clicked = $(this).closest("div.post"); </code></pre> <p>html code is;</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div class="post"&gt;&lt;a class="rep"&gt;1 Aasdjfa&lt;/a&gt; &lt;a&gt;6 Aasdjfa&lt;/a&gt;&lt;/div&gt; &lt;div class="post"&gt;&lt;a class="rep"&gt;2 Aasdjfa&lt;/a&gt; &lt;a&gt;7 Aasdjfa&lt;/a&gt;&lt;/div&gt; &lt;div class="post"&gt;&lt;a class="rep"&gt;3 Aasdjfa&lt;/a&gt; &lt;a&gt;8 Aasdjfa&lt;/a&gt;&lt;/div&gt; &lt;div class="post"&gt;&lt;a class="rep"&gt;4 Aasdjfa&lt;/a&gt; &lt;a&gt;9 Aasdjfa&lt;/a&gt;&lt;/div&gt; &lt;div class="post"&gt;&lt;a class="rep"&gt;5 Aasdjfa&lt;/a&gt; &lt;a&gt;10 Aasdjfa&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Thanks!</p> <p>BUT it doesn't work with div's that were dynamically loaded? eg. I have 10 divs showing by default then I have a script that loads more divs when you scroll...this script won't move the divs in the autoload section when you click on any of them...any idea why???</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USreporter
    1. USJay Smoke
    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
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCan you post your javascript or better yet, make a new fiddle at http://jsfiddle.net/ and put your code there ?
      singulars
      1. POMove div to top after click
      1. USRuss Clarke
    2. COhttp://jsfiddle.net/vHCQY/ what is currently happening is that when I click on the other link "a different link" it still moves the div which isn't what I want!
      singulars
      1. POMove div to top after click
      1. USJay Smoke
    3. COok! Thanx to @pehmolelu's tip I was able to get this to work on dynamic contents by changing this line $("a.rep").click(function() to $("a.rep").live('click', function() and it's working like a charm! Thanx and I hope this helps anyone who is looking for a way to move divs to the top of a page!!! Big ups! U guys are amazing!!!
      singulars
      1. POMove div to top after click
      1. USJay Smoke
 

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