Databases
StackOverflow2013
Postsdbo
POAnimate() divs from a reference point?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimate() divs from a reference point?
    primarykey
    data
    text
    <p>I have 9 divs, in rows of 3. When I click one of them I want the others fadeOut (that's ok, any problem) and then the one I clicked resize anything it will need from left, right, top and bottom, until it cover all the 9 divs space. And I got that for the first div in the first row, because it's in the top-left corner, but with the other ones, they go to the top-left corner and then resize, and I want resize them in the place they were when I clicked. And then center the inside of the div of course.</p> <p>I am trying it with jquery-ui, and I am pretty new with that, so I don't know if it could be very complicated or not. I googled "jquery animate() from reference point", but I didn't get anything.. </p> <p>thanks all!</p> <pre><code> &lt;div id="row1" class="row-fluid"&gt; &lt;p id="p1" class="hero-unit span4 "&gt;P número 1&lt;/p&gt; &lt;p id="p2" class="hero-unit span4 "&gt;P número 2&lt;/p&gt; &lt;p id="p3" class="hero-unit span4 "&gt;P número 3&lt;/p&gt; &lt;/div&gt; &lt;div id="row2" class="row-fluid"&gt; &lt;p id="p4" class="hero-unit span4 "&gt;P número 4&lt;/p&gt; &lt;p id="p5" class="hero-unit span4 "&gt;P número 5&lt;/p&gt; &lt;p id="p6" class="hero-unit span4 "&gt;P número 6&lt;/p&gt; &lt;/div&gt; &lt;div id="row3" class="row-fluid"&gt; &lt;p id="p7" class="hero-unit span4 "&gt;P número 7&lt;/p&gt; &lt;p id="p8" class="hero-unit span4 "&gt;P número 8&lt;/p&gt; &lt;p id="p9" class="hero-unit span4 "&gt;P número 9&lt;/p&gt; &lt;/div&gt; $(document).ready(function() { $("p").click(function() { current = $(this); $("p").not(this).fadeOut(1000, function(){ current.animate({ margin: "0px", height: "420px", width: "940px", }, 1000, function(){ current.removeClass("span4"); }); }); }); }); </code></pre> <p>Thats' all I have, very simple.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USbonsai
    1. USbonsai
    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. COhttp://masonry.desandro.com/demos/adding-items.html click on prepend new items hope you are looking for this and post some code what have you done?
      singulars
      1. POAnimate() divs from a reference point?
      1. USRajat Modi
    2. COThanks you Rajat Modi, but is not that I am looking for. I want that if I click "p5", other ones disapear, and p5 expand to the 4 corners until it has all the width and height that I want.
      singulars
      1. POAnimate() divs from a reference point?
      1. USbonsai
 

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