Databases
StackOverflow2013
Postsdbo
POExpandable unordered list animation, rendering issue
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExpandable unordered list animation, rendering issue
    primarykey
    data
    text
    <p>I am trying to animate an expandable list, but having trouble in correctly displaying list. Without animation effect list is being displayed correctly (expand/collapse). To collapse list I am using <code>ul.style.visibility = "hidden"; ul.style.height = "0px";</code>. Without animation effect, list if looking fine:</p> <p><img src="https://i.stack.imgur.com/xGxDH.jpg" alt="Correctly displayed unordered list">. </p> <p>The black borders are on UL element. I am using following Javascript code to expand the list:</p> <pre><code>var from = 0; //The height ul.style.height = "auto"; //set height to auto to get actual height var to = ul.offsetHeight; //get height ul.style.height = "0px"; ul.style.visibility = "visible"; ul.style.overflow = "hidden"; var start = new Date().getTime(), timer = setInterval(function() { var step = Math.min(1,(new Date().getTime()-start)/400); ul.style.height = (from+step*(to-from))+"px"; if( step == 1) clearInterval(timer); },20); //Expand List ul.style.overflow = "inherit"; ul.style.height = "auto"; ul.style.visibility = "inherit"; </code></pre> <p><code>ul</code> in the code is reference to the <code>ul</code> elements in unordered list currently being expanded.</p> <p>But after using this code to animate expand behavior, width of outer <code>ul</code> element is not changing with expand of inner <code>ul</code> element. However animation is working fine, but list is looking like this:</p> <p><img src="https://i.stack.imgur.com/DFohv.jpg" alt="Incorrectly displayed unordered list"> </p> <p>When I comment out <code>//ul.style.height = (from+step*(to-from))+"px";</code> from <code>setInterval</code>, list is being displayed correctly (however no animation effect). </p> <p>Can you please point out error, why is not width of outer <code>ul</code> changing with expand of inner <code>ul</code></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USHarshveer Singh
    1. USHarshveer Singh
    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. VO
      singulars
      1. POExpandable unordered list animation, rendering issue
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POExpandable unordered list animation, rendering issue
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POExpandable unordered list animation, rendering issue
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHave you checked the debugger to see what the value of ul.offsetHeight is? My guess is that this is zero or at least, not what you expect it to be, which is why it is not working correctly. Try replacing var `to = ul.offsetHeight;` with `var to = 100;`, just to see if it works.
      singulars
      1. POExpandable unordered list animation, rendering issue
      1. USCraig
    2. CO@Craig Checked, `ul.offsetHeight;` is returning correct value.
      singulars
      1. POExpandable unordered list animation, rendering issue
      1. USHarshveer Singh
 

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