Solved

How to "un-popopup" an image on iPhone

Posted on 2013-05-18
5
422 Views
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 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
Comment
Question by:ddantes
[X]
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
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
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:

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
 

Author Comment

by:ddantes
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.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39177717
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
 

Author Comment

by:ddantes
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
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.

Cd&
0

Featured Post

Independent Software Vendors: 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

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
This video demonstrates how to sync Microsoft Exchange Public Folders with smartphones using CodeTwo Exchange Sync and Exchange ActiveSync. To learn more about CodeTwo Exchange Sync and download the free trial, go to: http://www.codetwo.com/excha…

734 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