Wednesday, August 16, 2017

iOS Hover Target

Sample of an added touch target on Icy Veins Diablo 3 guide.With all the recent talk about a rather common practice of placing annoying overlays over the content of a website by a website itself — or as John Gruber calls them — dickbars and ways to remove them by simple iOS content blockers or bookmarklets suddenly caused me to realize that there is a simple solution to an unrelated long time annoyance of mine that I have with iOS by doing the opposite — adding something to the site.

Problem


There are numerous website that use hover events (placing a mouse cursor over a link) to show vital content — this is especially common on various gaming guide sites such as HearthPwn for Hearthstone or Icy Veins for Diablo 3 among others. While this works wonderfully on a standard non-touch devices it creates big problems for iOS.

The problem is that naturally there are no hover events on iOS — there is nothing to hover. So the way iOS tries to deal with an issue is treating the first touch of a target as a hover event and a second touch as a click.

The problem with that is once you touch something and get a hover popup there is no way to dismiss it. You can either touch another object to get rid of the first popup, but you get another one in it’s place. You can touch a link which will take you away from the content you were reading or you can reload the page. All of the above is quite annoying to say the least.

Solution


As I mentioned at the begging of this article I had a small eureka moment with regards of all the content adding and removing. While the above tools remove DOM elements I decided that I could create a tiny simple bookmarklet to actually add a small touch target out of the way of content that would respond to hover events and do nothing. By triggering a hover event on this object iOS removes it from the previously touched element, thus hiding the popup.

So if you’re running into the same issue just create a bookmarklet on your iPad or iPhone and activate it when you are looking at a site that uses the above mentioned technique to render content.
​javascript:(function(){
var e=document.createElement("div");
e.setAttribute("style","
position:fixed; right:-25px; top:50%;
height:48px; width:48px; margin-top:-25px;
border-radius:25px; border:1px solid #ccc;
background-color:#fff; z-index:1000");
e.addEventListener("mouseover",
function(){e.style.backgroundColor="#fff"});
document.body.appendChild(e)})
();

Enjoy your game guides! Is there an even easier way? Let me know.
In: Software   Tags: , , , , , , , , , ,
Time: 19:09   Comments: 1 Comment   Post a Comment  
1
1

Leave a comment

O.o teeth mrgreen neutral -) roll twisted evil crycry cry oops razz mad lol cool -? shock eek sad smile grin