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

Monday, March 24, 2008

Script: Image Captions

Image Captions Script on Mac ScreenImage Captions is a simple script that uses the alt attribute of your images to create a mouse-over captions for them. The captions do not change the layout of your site in any way and the installation is as simple as including 1 line of code in the header of the page. If you kept the alt attributes of your images in order you won’t have to change anything else. The script finds the right images and adds the captions automatically.

You can see the example of the script in action on the image above. To get that result all I had to do was to add the following to my post:
<img src="mac_screen.jpg" class="centered"
alt="Image Captions Script on Mac Screen"/>

The script will work on any page and does not rely on any WordPress functionality. The code has been tested in the following browsers: Firefox 2.x, Firefox 3.x, Safari 3.x, IE 6.x and IE 7.x. Continue Reading
In: Software   Tags: , , , ,
Time: 15:45   Comments: 4 Comments   Post a Comment  
1
1
2
2
3
3
4
4

Leave a comment

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