Databases
StackOverflow2013
Postsdbo
POExpand a LI item and reorder the rest of them
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POExpand a LI item and reorder the rest of them
    text
    copied!<p>I'm trying to make the following effect in jQuery:</p> <p><strong>Description.</strong></p> <p>I have a list of LIs with thumbnails for each. When I click the thumbnail, I'm animating the width of that LI to include a big image (e.g. from 300px to 972px; something like jQuery Popeye plug-in effect).</p> <p>Each LI has a fixed width of 300px and a "nomarginright" appended via nth-child in jQuery (the 3rd item in a row must have that class).</p> <p><strong>Issues.</strong></p> <p>If I click the first LI in a row, it expands without going beyond its container. But if I click the 2nd, it expands beyond its container and it is leaving the 1st LI on the first row while the 3rd is on another row with "nomarginright" class attached (thus having no space between the 3rd and the 4th).</p> <ol> <li>How do I expand the LI in a row and reorder the inactive LI items once I click a thumbnail (reseting the "nomarginright" effect, too)?</li> </ol> <p>A desired solution will be: in that row, move the active LI before any inactive LI and reset the nomarginright.</p> <pre><code> $('#portfolio ul li div.picture a').each(function() { $(this).click(function() { $(this).parent().animate({ width: 972, height: 504 }, 2000); $(this).parents('li').addClass('active').animate({ width: 972 }, 2000); return false; }); </code></pre> <p>HTML:</p> <pre><code>&lt;li&gt; &lt;div class="picture"&gt; &lt;a href="includes/pictures/portfolio-client-2.png" title="#"&gt;&lt;img src="includes/pictures/portfolio-client-1.png" alt="#" /&gt;&lt;/a&gt; &lt;/div&gt;&lt;!-- end .picture --&gt; &lt;/li&gt; </code></pre> <p>The above just gets repeated in a UL.</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