Databases
StackOverflow2013
Postsdbo
POAnimate DIVs hide and show
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimate DIVs hide and show
    primarykey
    data
    text
    <pre><code>&lt;script&gt; function hideBox(num, perc) { if(perc == undefined) perc = 100; if(perc-- &gt; 0) setTimeout(function(){ document.getElementById('box'+num).style.width = perc + 'px'; hideBox(num,perc); }, 1); else document.getElementById('box'+num).style.display = 'none'; } &lt;/script&gt; &lt;div id="main"&gt; &lt;div class="box" id="box1" onclick="hideBox(1)"&gt;Box 1&lt;/div&gt; &lt;div class="box" id="box2" onclick="hideBox(2)"&gt;Box 2&lt;/div&gt; &lt;div class="box" id="box3" onclick="hideBox(3)"&gt;Box 3&lt;/div&gt; &lt;div class="box" id="box4" onclick="hideBox(4)"&gt;Box 4&lt;/div&gt; &lt;div class="box" id="box5" onclick="hideBox(5)"&gt;Box 5&lt;/div&gt; &lt;div class="box" id="box6" onclick="hideBox(6)"&gt;Box 6&lt;/div&gt; &lt;div class="box" id="box7" onclick="hideBox(7)"&gt;Box 7&lt;/div&gt; &lt;div class="box" id="box8" onclick="hideBox(8)"&gt;Box 8&lt;/div&gt; &lt;div class="box" id="box9" onclick="hideBox(9)"&gt;Box 9&lt;/div&gt; &lt;div class="box" id="box10" onclick="hideBox(10)"&gt;Box 10&lt;/div&gt; &lt;div class="box" id="box11" onclick="hideBox(11)"&gt;Box 11&lt;/div&gt; &lt;div class="box" id="box12" onclick="hideBox(12)"&gt;Box 12&lt;/div&gt; &lt;div class="box" id="box13" onclick="hideBox(13)"&gt;Box 13&lt;/div&gt; &lt;div class="box" id="box14" onclick="hideBox(14)"&gt;Box 14&lt;/div&gt; &lt;div class="mid" id="mid" &gt;Box mid&lt;/div&gt; &lt;div class="box" id="box15" onclick="hideBox(15)"&gt;Box 15&lt;/div&gt; &lt;div class="box" id="box16" onclick="hideBox(16)"&gt;Box 16&lt;/div&gt; &lt;div class="box" id="box17" onclick="hideBox(17)"&gt;Box 17&lt;/div&gt; &lt;div class="box" id="box18" onclick="hideBox(18)"&gt;Box 18&lt;/div&gt; &lt;div class="box" id="box19" onclick="hideBox(19)"&gt;Box 19&lt;/div&gt; &lt;div class="box" id="box20" onclick="hideBox(20)"&gt;Box 20&lt;/div&gt; &lt;div class="box" id="box21" onclick="hideBox(21)"&gt;Box 21&lt;/div&gt; &lt;div class="box" id="box22" onclick="hideBox(22)"&gt;Box 22&lt;/div&gt; &lt;div class="box" id="box23" onclick="hideBox(23)"&gt;Box 23&lt;/div&gt; &lt;div class="box" id="box24" onclick="hideBox(24)"&gt;Box 24&lt;/div&gt; &lt;div class="box" id="box25" onclick="hideBox(25)"&gt;Box 25&lt;/div&gt; &lt;div class="box" id="box26" onclick="hideBox(26)"&gt;Box 26&lt;/div&gt; &lt;div class="box" id="box27" onclick="hideBox(27)"&gt;Box 27&lt;/div&gt; &lt;div class="box" id="box28" onclick="hideBox(28)"&gt;Box 28&lt;/div&gt; &lt;div class="box" id="box29" onclick="hideBox(29)"&gt;Box 29&lt;/div&gt; &lt;div class="box" id="box30" onclick="hideBox(30)"&gt;Box 30&lt;/div&gt; &lt;/div&gt; </code></pre> <p><a href="http://jsfiddle.net/ramswarnak/eUUpJ/2/" rel="nofollow">Demo</a></p> <p>In the above demo, you can see, when I click box it hide. And you can see the "mid box" is moving forward. </p> <p>But I need, when I click on box, it must be hide and appear at the end of the <code>div</code>s (after the box 30). And "mid box" must not be moving, it must be always at the center of the <code>#main</code>.</p> <p>And in the demo you can see there are spaces, that boxes not fix. but don't need that spaces. I need all <code>div</code>s around "mid" box without spaces.</p> <p>And all boxes must not be move out from the <code>#main</code>.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjavad amiry
    1. USuser2607456
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COi like Nicklas answer . But i need little thing change in his code. http://jsfiddle.net/dZ9Dr/1/- if you check this one, you can see it fade slowly . i need to change Niclass code code like this. can help someone?
      singulars
      1. POAnimate DIVs hide and show
      1. USuser2607456
 

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