Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>It <strong>seems</strong> that when the iPhone user touches the box, first the "hover" event gets fired (so the grey box is displayed always) and then the "click" event gets fired, so the user is directed to the link if within the 80% area. The problem is that this two events happen sequentially and immediately (unlike in the computer), so you cannot even see the grey box because the page is already being re-directed to a new page.</p> <p>Have you tried also displaying the grey box on the link's onclick event? I mean, copying the styling procedure you do on the "hover" event and putting it in the link's "click" event.</p> <p><strong>Update to answer your comment:</strong></p> <p>You can detect if the user is on a mobile device with something such as this Javascript:</p> <pre><code>function isMobileDevices() { return navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) !== null } </code></pre> <p>And act differently in that case. For example, and this is pretty ugly, do the link opening via Javascript on the "click" event instead of using a real <code>&lt;a&gt;</code> link, but if we are in a mobile device, only open the link when it is the second or above time the user clicks it. For this, you will have to track every box status, little bit laborious.</p> <p>Probably better alternative is to research about <a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" rel="nofollow">touch events</a> and manage those events accordingly.</p> <p><strong>Update</strong></p> <p>Looking at your website's source, I can't see that your are using <code>display:none</code>, as you mentioned in your question. I see <code>opacity:0</code>, which is different. Have you tried really using <code>display:none</code> until you need to start animating the opacity?</p>
    singulars
    1. This table or related slice is empty.
    1. POdisplay:none links clickable on iPhone
      singulars
      1. PTQuestion
    1. PTAnswer
    1. UScprcrack
    1. UScprcrack
    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. This table or related slice is empty.
    1. COHi, thnaks for the answer. On the iPhone: I would like the user not to be redirected onclick. It would be ideal if the hover always came up no matter where the user clicks, and then they have to click it again to get redirected. Here is my website: motodz.com view it on a phone and click on a thumbnail to see what I'm talking about. :)
      singulars
      1. PO
      1. USDyck
    2. COTested on the iPhone. As I thought, the grey box is being shown (you can see it when you go back to the main page after opening a link in a new page. If you need "two touches" for the iPhone users that's a different thing. I have updated my answer.
      singulars
      1. PO
      1. UScprcrack
    3. COWow, I always thought I used display none, not opacity. But opacity is essential because it creates the animated fade effect on hover in / out. Is there any way we could get this working so you have to double tap like you were saying, while still making opacity work like it does?
      singulars
      1. PO
      1. USDyck
 

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