How to "un-popopup" an image on iPhone

Posted on 2013-05-18
Last Modified: 2013-05-19
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 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?
Question by:ddantes
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
LVL 53

Expert Comment

ID: 39177670
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:

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.


Author Comment

ID: 39177687
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.
LVL 53

Accepted Solution

COBOLdinosaur earned 500 total points
ID: 39177717
You might be able to do something with CSS3 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.


Author Comment

ID: 39177800
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.
LVL 53

Expert Comment

ID: 39178650
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.


Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Short answer to this question: there is no effective WiFi manager in iOS devices as seen in Windows WiFi or Macbook OSx WiFi management, but this article will try and provide some amicable solutions to better suite your needs.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question