[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?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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@hidden wrote:

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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 Zugriff deaktiviert 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@hidden 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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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@hidden 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).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options