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
  • 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
JDeveloper 12c for 32 bit 4 34
Safari SVG Image Problem 1 19
Backup / Restore an iphone 8 23
jqplot Pie Chart - javascript 2 9
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now