Databases
StackOverflow2013
Postsdbo
POjQuery: calculate the top in live jquery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery: calculate the top in live jquery
    primarykey
    data
    text
    <p><a href="http://jsfiddle.net/xHE3S/" rel="nofollow noreferrer">http://jsfiddle.net/xHE3S/</a></p> <p>There are 12 li. Each row contains 3 li. So there will be four rows.</p> <p>What I am doing is first calculating the each li location from ul and then using ajax fetching the product data. Ajax data displaying in new row below the clicked li.</p> <p>To display the new li created through ajax i am applying top . now the problem starts here.</p> <p>For first row it displaying correctly just below the row1</p> <p>Now when i click on row 2 product it will calculate the distance again and apply the top to newly created li. While previously created element removed when user clicks on anyother li. So in distance calculation it also calculate the space covered by new created li. So the second row li will display on row3 li because getting wrong <strong>top</strong></p> <p>Here is my code:</p> <pre><code>jQuery(function () { jQuery('.products li a').click(function (e) { e.preventDefault(); jQuery('li.new-rows').remove(); var relativeY = jQuery(this).offset().top - jQuery('ul.products').offset().top; jQuery.ajax({ url: links, beforeSend: function () { alert('Yes'); }, success: function (data) { var dd = jQuery(data).find('#content .product').html(); if (jQuery('.products li.new-rows').length == 0) { jQuery('.products').append('&lt;li class="new-rows"&gt;&lt;/li&gt;'); jQuery('.new-rows').html('&lt;div class="data-len"&gt;' + dd + '&lt;/div&gt;'); jQuery('.new-rows').css({ top: relativeY + 280 }); } else { jQuery('.new-rows').html(dd); jQuery('.new-rows').css({ top: relativeY + 280 }); } } ) };) };) }; </code></pre> <p>in this screen you can see it is getting top correctly</p> <p><img src="https://i.stack.imgur.com/nVNc6.png" alt="properly working . getting right top for created li] ![enter image description here]![enter image description here"></p> <p>while here it is calcultes the height covered by li , which is created using ajax. so top value getting addition of it. you can see it is going on third row.</p> <p><img src="https://i.stack.imgur.com/a58Zd.png" alt="enter image description here"></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJack Torris
    1. USJack Torris
    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. COCould you make a jsfiddle for us to be able to see what you want to do/get ? Thanks.
      singulars
      1. POjQuery: calculate the top in live jquery
      1. USOlivierH
    2. COare you trying to add li's in a certain order? if so instead of positioning them, why not use [`.after`](http://api.jquery.com/after/) and then place it after the li you want (using `li.eq(index)`) instead of just appending it to the bottom of the list and moving it with css
      singulars
      1. POjQuery: calculate the top in live jquery
      1. USPete
    3. COno what i am doing is i am appending the li whenuser click on any li. the newly created li will be the last element now i want to display it in new row below the clicked element. you can see the screenshot. for the first one it is working correctly while when we click on second row li it consider the space cover by the created li and add that top in newly created li. so for row2 the new li top should be around 320 px while getting 280px+320px where 280px is the height of the previously open element. i tried to get the top in ajax but it is not working, need help
      singulars
      1. POjQuery: calculate the top in live jquery
      1. USJack Torris
 

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