
FreewayTalk
26 replies to this thread. Most Recent
Iain Mackenzie
21 Jul 2014, 8:54 pm
[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?
DeltaDave
21 Jul 2014, 9:06 pmDoes 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
Glasgow, Scotland
iMac 27 5K El Cap and Pro Final
Iain Mackenzie
21 Jul 2014, 9:09 pmThanks David. There must be a way of achieving a similar result on touch screen devices which constitute the majority of web viewing after all.
waltd
21 Jul 2014, 9:09 pmIf 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?
Freeway user since 1997
Iain Mackenzie
22 Jul 2014, 5:37 pmWalter, 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.
DeltaDave
22 Jul 2014, 10:04 pmI 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
Glasgow, Scotland
iMac 27 5K El Cap and Pro Final
Iain Mackenzie
22 Jul 2014, 11:02 pmI’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.
DeltaDave
23 Jul 2014, 12:32 amWhat 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
Glasgow, Scotland
iMac 27 5K El Cap and Pro Final
Iain Mackenzie
23 Jul 2014, 12:42 pmOK 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?
David Owen
23 Jul 2014, 12:58 pmWorks 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
Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)
Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.
Thomas Kimmich
23 Jul 2014, 1:03 pm… looking similar here in Safari, Chrome Fox and Opera.
Cheers
Thomas
Thomas Kimmich
Kimmich DigitalMedia
http://www.kimmich-digitalmedia.com
T.+49(0)7404-914 384
Somewhere in the South of Germany
Iain Mackenzie
23 Jul 2014, 1:11 pmThanks 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?
Thomas Kimmich
23 Jul 2014, 1:28 pmOn 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
Thomas Kimmich
Kimmich DigitalMedia
http://www.kimmich-digitalmedia.com
T.+49(0)7404-914 384
Somewhere in the South of Germany
Iain Mackenzie
23 Jul 2014, 1:36 pmReally 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.
Iain Mackenzie
24 Jul 2014, 9:25 amCan 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.
David Owen
24 Jul 2014, 10:14 amIts 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.
Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)
Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.
Iain Mackenzie
24 Jul 2014, 10:33 amThanks 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?
Iain Mackenzie
24 Jul 2014, 11:00 amI 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).
David Owen
24 Jul 2014, 11:30 amIn 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).
Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)
Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.
Iain Mackenzie
24 Jul 2014, 11:40 amThanks 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!
Iain Mackenzie
24 Jul 2014, 11:43 amSorry, ignore that last post. That was happening as I was trying to rename as an existing name! I’ll experiment a little more.
Iain Mackenzie
24 Jul 2014, 11:56 amYes, 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…….
Thomas Kimmich
24 Jul 2014, 11:56 amOn 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
Thomas Kimmich
Kimmich DigitalMedia
http://www.kimmich-digitalmedia.com
T.+49(0)7404-914 384
Somewhere in the South of Germany
billy kimmel
23 Jan 2015, 7:37 pmCan 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.
Billy
tonzodehoo
29 Jun 2020, 12:02 pmOn 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.
Gorbals Glasgow
MacOs 10.8.5 Freeway Pro 7! At last!
waltd
29 Jun 2020, 2:43 pmRollovers 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.
Freeway user since 1997
waltd
8 Jul 2020, 12:37 pmAll 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,
Freeway user since 1997
