Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Use the <code>:active</code> pseudo-class in your css, then add <code>ontouchstart=""</code> and <code>onmouseover=""</code> to the body tag.</p> <p>The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)</p> <pre><code>&lt;style&gt; .boxbutton:active{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -ms-transform:scale(0.9); -o-transform:scale(0.9); transform:scale(0.9); -webkit-box-shadow:0px 0px 20px #FFF; -moz-box-shadow:0px 0px 20px #FFF; -o-box-shadow:0px 0px 20px #FFF; box-shadow:0px 0px 20px #FFF; } &lt;/style&gt; &lt;body ontouchstart=""&gt; &lt;a href="#teamdiv"&gt; &lt;div class="boxbutton" id="teambb"&gt; &lt;h5&gt;Team&lt;/h5&gt; &lt;/div&gt; &lt;/a&gt; &lt;/body&gt; </code></pre> <p><em>The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful</em></p> <p><strong>EDIT:</strong> I have discovered it works more reliable if, rather than putting <code>ontouchstart=""</code> in each link, put it in the <code>&lt;body&gt;</code> tag. So your body tag should look like this<code>&lt;body ontouchstart=""&gt;</code> and your links look like this </p> <pre><code>&lt;a href="#teamdiv"&gt; &lt;div class="boxbutton" id="teambb"&gt; &lt;h5&gt;Team&lt;/h5&gt; &lt;/div&gt;&lt;/a&gt; </code></pre> <p><strong>EDIT 2:</strong> I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.</p>
    singulars
    1. This table or related slice is empty.
    1. POHover effects using CSS3 touch events
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USChuck Dries
    1. USChuck Dries
    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. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUndeletion
    1. COthx, works for me.
      singulars
      1. PO
      1. USMario
    2. COThis works. Thanks. But I'd love an explanation of *why* ontouchstart="" and onmouseover="" achieve the desired effect. Certainly not self-evident to me.
      singulars
      1. PO
      1. USDave Feldman
    3. COWell, I may not be the best person to explain this, but the way I understand it is this: ontouchstart and onmouseover are listeners, they wait for the element in question to be touched or moused over (in this case) then would call the javascript function that is named inside the quotes. In our case, we left the quotes empty so no script was executed, but because the listeners are there, the web browser still considers them active. The :active pseudo class is applied to an element if it is currently active with javascript. The listeners cause the :active pseudo classes to be applied.
      singulars
      1. PO
      1. USChuck Dries
 

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