Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

How to "un-popopup" an image on iPhone

rollover.css I've just gotten an iPhone, which I'm using to test the retrofit of my website for mobile browsers.  Some of my pages have a feature which enlarges thumbnail images on mouseover, for example http://mauitradewinds.com/test.htm. On the iPhone, a larger image pops up if I tap the thumbnail.  But then, how do I remove that popup?  If I tap it again, it enlarges even further.  The only method of restoring the page seems to be to refresh it.  I'm hoping there is a simpler method.  If not, perhaps I need a different technology for enlarging the thumbnail -- one which reverses that process on the second tap?
0
ddantes
Asked:
ddantes
  • 3
  • 2
1 Solution
 
COBOLdinosaurCommented:
Well you have probably fallen into one of those big lava flows they get in your part of the world.  Iphone, and most other phone have touch events which are not the same as mouse events, and there is no direct mapping.  

The nasty part is that there are some serious cross-platform differences for touch events:

http://quirksmode.org/mobile/tableTouch.html

Mobile devices are very different from larger presentation formats and the user interface is much more text oriented, because of the limited space; there is an assumption that graphics will be at a minimum.  

IMO, trying to duplicate a browser oriented site on mobile is not a good approach.  It forces compromises that degrade the quality of both. However the current trend seems to be toward trying to duplicate cross platform.  It you are going to do that be prepared to lower your quality standards, because they just don't work the same, and it is not likely that cross device incompatibilities are going to go away as long as there are so many platforms competing for market share.

You might get it to do what you want by double tapping, and then double tapping again to reduce it.  If that works, I don't know how you let the user know what to do, and of course it will not work on all phones.

Cd&
0
 
ddantesAuthor Commented:
Thank you for that background information.  Unfortunately, our business relies on internet advertising, and the advertising relies on imagery in order to interest prospective guests.  It seems they pay relatively little attention to the text, unless they are captivated by the photos, slide shows, etc.   Since I can't reproduce a hover effect, I'll include a notice on the page, that tapping a thumbnail will produce a larger image.  Can you suggest a way to make that larger image disappear, after a measured interval?  The popup is produced by CSS, not by javascript.
0
 
COBOLdinosaurCommented:
You might be able to do something with CSS3 transitions:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

But the support on mobile is pretty thin, so you are probably going to end up having to use javascript for at least some platforms.

Cd&
0
 
ddantesAuthor Commented:
Thank you. I found the article at that link a little too challenging for my beginner's skill set.  However, it seems to me that touch screen users can enlarge the thumbnails with a finger tip gesture, if they so wish. So there is no need for a popup to appear.  I'll try using media query to determine if a mobile browser is in use, and serve an alternate style sheet which doesn't cause popup on hover over the thumbnails.
0
 
COBOLdinosaurCommented:
Yeah delivering alternate content is getting pretty common.  The platforms are a lot more different then is appent by looking at them, and cross-platform is going to be a challenge for a few years until thing shake out and the survivors get together on standards.

Cd&
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now