[Pro] Getting rollovers to work on iPad?

Does anyone know a way to get Rollovers and Target Images to work on iPad or any touch device, I guess. Is there an alternative?

Does anyone know a way to get Rollovers and Target Images to work on iPad

The basic premiss is that touch screen devices do not support the hover effect - full stop.

Instead they capture the click event and use that.

So no hover on iPad etc.

David

Thanks David. There must be a way of achieving a similar result on touch screen devices which constitute the majority of web viewing after all.

If your rollover element establishes a mouseover listener, iOS will handle that in the following manner: the first touch on the item will fire the mouseover event, the second will fire the click event. If your rollover element establishes a click listener, then the first click will fire the click event, and everything will proceed as you would expect. There is no cursor in iOS, so there isn’t any way to have a true mouseover, if you think about it. There is only touch, and touchend. Everything else is artifice.

Walter

On Jul 21, 2014, at 4:54 PM, Iain Mackenzie wrote:

Does anyone know a way to get Rollovers and Target Images to work on iPad or any touch device, I guess. Is there an alternative?

Walter, thanks for that. I understand that, but is there not an action that could achieve a similar effect on touch devices which after all constitute the majority of web users. Otherwise, the rollover actions are now redundant.

I think that you are missing the point - there are no actions that can suddenly make a tablet detect your finger hovering over the screen.

The Browser is built in such a way so that if there is a mouseover event attached to an item then the first touch will trigger it and if there is also a click event attached then the second touch will do that.

the rollover actions are now redundant.

Of course not - the first touch triggers the rollover/hover state. And what about the desktop users?

D

I’m not missing the point. I completely understand that. What I am asking is there an alternative way to create a similar effect? In answer to your point about desktop users, they are very much in the minority, and sites have to look good on all platforms. Businesses who have sites that don’t render well well on tablets and smartphones look pretty shoddy.

What I am asking is there an alternative way to create a similar effect?

What do you mean by a similar effect? What experience do you want Tablet users to get?

They certainly aren’t expecting hover effects.

desktop users, they are very much in the minority

I dont accept that - not yet!

D

OK guys, let’s forget the previous stuff, as it is now working by just tapping on the rollover on iOS devices. The problem I now have is that the page works fine in Chrome (OS X and iOS) but does not work on OS X Safari or iOS Safari. Have a look at this ‘work in progress’ site as an example www.eyemack.co.uk/gallery It works as intended in Chrome, but look at it in Safari - the borders are wrong, the wrong images rollover, etc. Any ideas?

Works OK for me in Safari. Have you cleared your browser cache? Or “Disable Caches” in Safari Developer tools

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

On 23 Jul 2014, at 13:42, Iain Mackenzie <[email protected]> wrote:

site as an example www.eyemack.co.uk/gallery

… looking similar here in Safari, Chrome Fox and Opera.

Cheers

Thomas

Thanks guys, but why would the cache thing affect Safari on an iOS device? So, when you look at it, do the large images have any border or shadowing?

On 23 Jul 2014, 1:11 pm, Iain Mackenzie wrote:

Thanks guys, but why would the cache thing affect Safari on an iOS device? So, when you look at it, do the large images have any border or shadowing?

… no - in none of the browser or device they have.

Should they and why? All I see is a weird source-code full of tables, divs and maps.

Cheers

Thomas

Really don’t know what you mean by ‘weird source code’, but still…. They shouldn’t, but they do in iOS and OS X Safari for me. All looks good in Chrome as I said. The other thing is, why does the address show as …/gallery.html#Rollover1 in browsers?

Update: I cleared the browsing history in iOS Safari and the problem disappeared. Bit concerning that the ‘refresh page’ doesn’t seem to work.

Can anyone help me on this? Every time I make a change to the gallery page, Safari (both iOS and OS X) will not render it correctly but Chrome will. Refresh page doesn’t work either. The only way I can get Safari to render the page correctly, is to delete browsing data on my iPad and ‘Empty Caches’ on OS X every time I make a change in Freeway Pro, which is obviously not satisfactory. I have not come across this situation before, so any advice would be appreciated.

It’s just the way on things as a web developer. You need to see the truth. I for example use the Safari with the developer tools on and “disable cache” selected while testing. Then the changes you make you can see straight away to avoid confusion.

Safari > Preference > (tick box) Show Develop menu in Menu bar.

Another neat tool I use is Ghostlab http://vanamco.com/ghostlab/ so you can view the changes simultaneously on all devices.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

On 24 Jul 2014, at 10:25, Iain Mackenzie <[email protected]> wrote:

Can anyone help me on this? Every time I make a change to the gallery page, Safari (both iOS and OS X) will not render it correctly but Chrome will. Refresh page doesn’t work either. The only way I can get Safari to render the page correctly, is to delete browsing data on my iPad and ‘Empty Caches’ on OS X every time I make a change in Freeway Pro, which is obviously not satisfactory. I have not come across this situation before, so any advice would be appreciated.

Thanks David. What I don’t get though, is why it is only Safari. Also, why does it look fine when previewing in Safari in FWP, but not when it is published to the web?

I should add, that it’s not a rendering problem as such, it’s that the wrong images are shown on the rollover in Safari (only).

In the inspector palette try renaming the faulty images photos using Name/ID: field. This should kick the images to be re-generated when publishing the page and viewing in Safari.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

On 24 Jul 2014, at 12:00, Iain Mackenzie <[email protected]> wrote:

I should add, that it’s not a rendering problem as such, it’s that the wrong images are shown on the rollover in Safari (only).

Thanks again, David. That’s another thing I don’t understand. FWP won’t let me rename any of the images in the Target Image action. Even taking the action off, I can’t rename the Graphic Items. whenever I try to change the name in the Name/ID field, it just reverts to the original name when I hot enter or tab!

Sorry, ignore that last post. That was happening as I was trying to rename as an existing name! I’ll experiment a little more.

Yes, David, that has worked! Thanks a lot. I renamed all the graphic items and now the page renders perfectly in all browsers. Not sure why that was necessary, but…….

On 24 Jul 2014, 11:00 am, Iain Mackenzie wrote:

I should add, that it’s not a rendering problem as such, it’s that the wrong images are shown on the rollover in Safari (only).

Some things can’t be explained, cause the mistakes are sitting up to 99% in front of the screen.

It happened in the past that people simply surfed the wrong page (URL), so they had some “work-in-progress-page”, renamed in “life-page”, still calling the old one (just in one specific browser).

Cheers

Thomas

Can anyone tell me how to ad a mouse listener event to a reveal tab that I have on my page. Basically touching on the item will fire the mouseover event, the second touch will fire the click event.

See the page I’m working on, divs on the right of the page.

http://smartytest.com/Wren/

Billy

On 23 Jul 2014, 12:42 pm, Iain Mackenzie wrote:

OK guys, let’s forget the previous stuff, as it is now working by just tapping on the rollover on iOS devices.

Sorry to drag this one out of the archives again!

I understand the issue with rollovers not working on tablets and screen based touch devices so I guess I was wondering if there had been anything in the intervening six years which may have enabled such a rollover effect to function on such devices?

Or is it possible or necessary, when using the rollover action, to switch it from being a hover for desktop users to a click for touch screen devices such as tablets and phones in order to do the reveal of the hidden image?

Its a really useful effect for wheat I am working on.

Many thanks for any inputs.

Rollovers require a cursor in order to work, and iOS (and iPadOS) doesn’t have one. What iOS has done forever is provide an affordance that works like this: when you first touch on an object that has a rollover specified, the rollover event fires and whatever handler is defined is fired. The second touch on that same object will fire the click event, and that handler will fire (usually meaning the link will be followed).

Walter

On Jun 29, 2020, at 8:02 AM, tonzodehoo <[email protected]> wrote:

On 23 Jul 2014, 12:42 pm, Iain Mackenzie wrote:

OK guys, let’s forget the previous stuff, as it is now working by just tapping on the rollover on iOS devices.

Sorry to drag this one out of the archives again!

I understand the issue with rollovers not working on tablets and screen based touch devices so I guess I was wondering if there had been anything in the intervening six years which may have enabled such a rollover effect to function on such devices?

Or is it possible or necessary, when using the rollover action, to switch it from being a hover for desktop users to a click for touch screen devices such as tablets and phones in order to do the reveal of the hidden image?

Its a really useful effect for wheat I am working on.

Many thanks for any inputs.

All true statements. There is no equivalent to mouseover in a touch interface. What your challenge is as a designer is to figure out how to progressively surface that same information. You could do something heavy, like a modal dialog, or your could simply present the information at all times (most accessible for everyone, honestly). You could break up your pages to have a true “index” followed by an intermediate page followed by a true deep-dive into the topic (Google loves that last one, by the way).

Walter

On Jul 8, 2020, at 2:46 AM, Madhusingh <[email protected]> wrote:

Hello,

Sorry for that, Walter. I understand that, but there’s no behavior that could have a similar impact on touch devices that make up the majority of web users after all. Otherwise, the actions of rollover are redundant now.

Thanks,

https://askmeoffers.com/