Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>UPDATE</strong>: after recently resorting to using this script again, I realized things can be done a lot simpler, not requiring any flags at all.</p> <p><a href="http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/" rel="nofollow">See revised code on my website.</a></p> <p>Original answer:</p> <p>Had the exact same issue today. I solved it using the data attribute, live bound to a touchstart event (which is a basic touch-device check, but you could make this more thorough). Try using the following code, replacing the 'clickable_element' to suit your needs.</p> <pre><code>$('clickable_element').live("touchstart",function(e){ if ($(this).data('clicked_once')) { // element has been tapped (hovered), reset 'clicked_once' data flag and return true $(this).data('clicked_once', false); return true; } else { // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true e.preventDefault(); $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. $(this).data('clicked_once', true); } }); </code></pre> <p>This should stop the tablet from activating the link on the first tap, activating it on the second tap.</p> <p><strong>Edit</strong>: in case of multiple link elements, which need to be 'reset' when one of the other elements are clicked, try attaching the data attribute to the parent container:</p> <p>The HTML:</p> <pre><code>&lt;div id="parent-element"&gt; &lt;a href="" id="1"&gt;Link 1&lt;/a&gt; &lt;a href="" id="2"&gt;Link 2&lt;/a&gt; &lt;a href="" id="3"&gt;Link 3&lt;/a&gt; &lt;/div&gt; </code></pre> <p>jQuery:</p> <pre><code>$('#parent-element a').live("touchstart",function(e){ var $link_id = $(this).attr('id'); if ($(this).parent().data('clicked') == $link_id) { // element has been tapped (hovered), reset 'clicked' data flag on parent element and return true (activates link) $(this).parent().data('clicked', null); return true; } else { // element has not been tapped (hovered) yet, set 'clicked' data flag on parent element to id of clicked link, and prevent click e.preventDefault(); // return false; on the end of this else statement would do the same $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. I do suggest adding a class with addClass, as this is much more reliable. $(this).parent().data('clicked', $link_id); } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POJquery hover function and click through on tablet
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USc_kick
    1. USc_kick
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POJquery hover function and click through on tablet
      singulars
      1. PTQuestion
    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. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COc_kick, you are a damned genius! Thank you!
      singulars
      1. PO
      1. USjkilp
    2. COActually, another question. So when I tap it the first time, it highlights, but does not click through, but when I tap a sibling li, then tap back to that one, it clicks through. Is there a way to reset the 'clicked_once' state if you tap off of that one?
      singulars
      1. PO
      1. USjkilp
    3. COGood point (which indeed I also ran into ;)) see my edit!
      singulars
      1. PO
      1. USc_kick
 

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