1

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

  • first tap the comment field
  • the field gets highlighted in gray and the delete icon appears in gray
  • you can then tap on the icon to delete the comment

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?

rene
  • 41,474
  • 78
  • 114
  • 152
pepe
  • 9,799
  • 25
  • 110
  • 188
  • To echo Cory, I *think* iOS (or, rather Mobile Safari) will automatically handle this in many cases. The key is to find the particular case that it handles the conversion automatically for you. – DA. Jul 19 '11 at 02:17

2 Answers2

1

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?

Cory Gagliardi
  • 770
  • 1
  • 8
  • 13
  • good point @cory, i just checked again and notice that when i tap on the comments container (which I use to trigger the icon visibility on mouseenter) nothing happens. but if i tap on an unrelated link within that container (eg, "add comment", similar to SO) then the icon appears -- maybe i need to change things around in my code – pepe Jul 19 '11 at 02:03
1

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/

Community
  • 1
  • 1
hunter
  • 62,308
  • 19
  • 113
  • 113
  • thx @hunter - now the issue is that on desktop i would need the red delete from your example to show on hover (mouseenter) -- which I already have implemented -- but on iPad 'delete' would need to show on click -- any idea how to adapt your example to this? – pepe Jul 19 '11 at 02:15