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

Wednesday, August 30, 2017

Arosha’s 7th Birthday

Arosha. August 30th, 2017.Earlier this month Arosha has turned 7! Happy Birthday, our son! Be healthy, happy, lucky, kind.

Multitude of helium balloons in the living room are a tradition by now, so on the morning of his birthday that was exactly what he expected and what he saw. As last year, we blew them at home using a disposable helium tank and hi-float solution. The balloons held for over a week by the way.

Baloon tradition.We got Arosha an early birthday present about 10 days before his actual birthday. He asked for a skateboard, and we were actually very happy that he had chosen something fun. It is not easy to get something for a child who pretty much has anything that he wants to as far as toys and things are concerned. We got it at a small skateboarding store in Park Slope, and along with the board we payed for a one hour lesson to learn the basics, since none of us really had any experience skateboarding. So far Arosha likes his new transport, and he even rode it to Manhattan Beach and back one day, but as far as skill goes, he is still a novice.

Poolside piñata.On the day of his birthday we celebrated it with his friends at the pool. He invited Alex, Simon and Vladik with their younger siblings. I was a little worried in the morning since the day was cloudy and on the cool side, but decided to proceed as planned anyway. It turned out to be Ok. The boys didn’t spend too much time in the water, but still had fun. We also bought a piñata this year and stuffed it with little things from 99 cent store. It was a hit as expected.

I did not cook anything for the party this year. We just ordered pizzas and had some fresh fruits, berries and vegetables as well. I think that for a pool party this made more sense than putting all that effort in cooking meat pies and salads which kids did not really touch last year.

Baloons. Evening before the birthday.After spending a few hours by the pool, we went up to the apartment to have tea and cake. Arosha picked an ice-cream cake as always — Danya and him bought it a few days prior at a Carvel store.

After the cake everyone went to the playground where the children played for another hour. The birthday was fun, I hope Arosha enjoyed it.

Birthday cake.And on the weekend we continued to celebrate with Danya’s parents and sister. Arosha picked a Korean restaurant, and we had a very nice family lunch at Kim-Chi in Bay Ridge.

As far as other gifts go, Arosha also got books, money for additional skateboarding lessons, clothes, board games and art supplies, which he kindly lends to his little sister.

Our not-so-little-anymore units.I hope Arosha will have a healthy and joyful year.

Oh, and by the way, when we went to the annual doctor’s visit, Arosha’s measurements for height and weight were 54 inches and 63 pounds.
In: Family   Tags: , , , , , , , , , , ,
Time: 13:47   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