Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>My suggestion would be to adjust your HTML layout. Since we are trying to create a sliding effect, why not set up your HTML to actually slide your button content. Use <code>overflow: hidden;</code> to hide any extra you don't need. This also allows you to set very specific widths and heights to assist in consistency.</p> <p>We'll use a container to specify the total width and height of your button plus an active or inactive span. Then we'll use another container that holds the total width of all 3 spans. Then all we have to do is add <code>margin-left:</code> to the second container to "slide" it within the first container. <code>Overflow:hidden;</code> is our real champion here.</p> <p>Here is a JSFiddle in which I have included some sample jquery to demonstrate that it works. You will need to adapt the code to match your checkbox requirement and such. Feel free to use the jquery if you decide that jquery is a better solution.</p> <p><a href="http://jsfiddle.net/D6EWF/1/" rel="nofollow">http://jsfiddle.net/D6EWF/1/</a></p> <p><strong>HTML:</strong></p> <pre><code>&lt;div class="container"&gt; &lt;div id="button-container" class=""&gt; &lt;span class="red"&gt;Inactive&lt;/span&gt; &lt;span id="button" class="button"&gt; | | | &lt;/span&gt; &lt;span class="green"&gt;Active&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>.container { width: 100px; height: 40px; background: orange; overflow: hidden; } #button-container { width: 170px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .active { margin-left: -70px; } .red, .button, .green { display: block; height: 20px; float: left; } .red, .green { width: 50px; padding: 10px; } .button { text-align: center; width: 30px; background: #ccc; padding: 10px 0; cursor: pointer; } .red { background: red; } .green { background: green; } </code></pre>
 

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