CODEWITHSUNDEEP
jqueryipadhover
pepe
pepe

Reputation: 9909

"hover" effect using single tap on iPad (similar to SO)

If you've ever used StackOverflow on the iPad, you may have noticed that in order to delete a comment, you:

On a desktop, this process is more straightforward because the mouse can hover over the comment, hiding and making the icon visible on mouseenter and mouseleave via jQuery .css.

I have already set up a posts and comments system on my blog that has this functionality very similar to SO running on a desktop, but I wonder how to achieve SO's iPad functionality.

Any ideas how SO makes the single tap act as a hover on the comments?

Upvotes: 1

Views: 3748

Answers (2)

hunter
hunter

Reputation: 63522

using jQuery you could write a click event:

$(".comment").click(function(e){
    e.preventDefault();
    $(this).toggleClass("clicked");
});

And create some iPad-only CSS like this:

.comment .delete
{
    display: none;
}

.comment.clicked .delete
{
    display: inline;
}

which would work if your html was something like this:

<div class="comment">... <a class="delete">Delete</a></div>

and wire up these into their own ipad.css and ipad.js files and include them in your <head>

<!--[if iPad]>
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" />
<script type="text/javascript" src="ipad.js"></script>
<![endif]-->

working example: http://jsfiddle.net/hunter/pqLXS/

Upvotes: 1

Cory Gagliardi
Cory Gagliardi

Reputation: 780

Any time I have coded anything that responds to mouseenter in jQuery or Mootools, the iPad immediately converted this behavior to a single click. This includes links that would normally take you to another page on a single click. Is this not the behavior you are seeing?

Upvotes: 1

Related Questions