ipad

Happy Thanksgiving!


Hi,

Wondering if anyone has a work around to this issue. I have attached to photos.

1 is a screen shot of a clip art selection pop up on a windows 7 latest firefox browser. You can see the mouse hand on top of the design that i have chosen with the rollover enlargement of the clipart. I click on the hand(mouse guide) and the clipart is placed on the product.

2 is an ipad2 safari browser(latest) . The only difference is that there is no mouse hand. I am not that familiar with the ipad, but I imagine this lack of a "mouse hand" part of the OS. The customer unfortunately is confused on how to select the design in this situation. They touch the thumbnail, the popup goes up. And now they, sometimes try to touch the popup to add the design to the clipart to the product. They don't automatically re-touch the thumbnail to add the clipart to the product. The customer becomes confused and frustrated. Sometime the keep trying to touch the larger rollover image to no avail.

The only way the customer can add the clipart to the product is to open the larger rollover image by touching the thumbnail and then after the rolllover is open then touching the thumbnail again. This is definitely confusing.

One solution is to elimate the rollover, then the ipad works great. You can just touch the thumbnail and it adds the clipart directly to the product.
However, I like the ability to rollover and see an enlargement of the thumbnail.

Is there a better way??? Half my customers use the ipad.


The template i am using for this question is http://designer.realtimedesigner.com/mybambino/index.php&tng=Y3BpPTc0Njg2JmN0aT0yNTQxOA==&extvar_origin_page=mybambino.com/g-flip-stool-white.html

thanks,
don

Agreed, but haven't tried any css solutions as yet. What would be good on touch devices is tap the thumb then tap popped image for selection.

Also, what is the css to control the size of the popped image?

Thanks for replying. the current css is

.tabs_floatingdiv_extclass_cliparts {
max-width:1000px !important;
width: 96% !important;
height: 96% !important;
max-height: 1000px !important;
left: 3% !important;
top: 0px !important;
margin-top:10px;
background: #FFFFFF
}

.local_table_clipspopup {
margin-top:2px;
background: #FFFFFF

}

.local_table_clipspopup_categories_category {
background: #45b5b1 !important;
border-bottom: 1px solid #FFFFFF !important;
cursor:pointer !important;
}

.local_table_clipspopup_categories_category a:link, .local_table_clipspopup_categories_category a:visited, .local_table_clipspopup_categories_category

a:active, .local_table_clipspopup_categories_category a:hover {
color: #FFFFFF !important;
font-size:12px !important;
}

.local_table_clipspopup_categories_category:hover, .local_table_clipspopup_categories_category:hover a:link,

.local_table_clipspopup_categories_category:hover a:visited, .local_table_clipspopup_categories_category:hover a:active,

.local_table_clipspopup_categories_category:hover a:hover, .local_table_clipspopup_categories_category[selectedcat="yes"],

.local_table_clipspopup_categories_category[selectedcat="yes"] a:link, .local_table_clipspopup_categories_category[selectedcat="yes"] a:visited,

.local_table_clipspopup_categories_category[selectedcat="yes"] a:active, .local_table_clipspopup_categories_category[selectedcat="yes"] a:hover {
background:#468f91 !important;
font-size:11px !important;
}

#panel_settings {
display:none !important; /* TEST MODE */
margin:0px;
margin-top:-1px;
left:100px;
position:relative;
}


I am not sure how you would be able to select the popup as you clip art. It maybe something Alex can look into. It does work well in the ipad with no rollover popup enabled. However I believe this would reduce desktop conversions. Thanks for looking into it.

Ok, I was thinking about this specifically for touch devices. So let's start with some initial testing.

1st idea was to keep the enlarged image, but make it so that also clicking on the enlarged version will add the clipart to the designer.
This could be done, however I feel it might give some navigiation issues because the thumbnail will still cover other options.

For this, the simplest solution would probably be hide the enlargement on touch devices only. Means nothing would change for regular computer users, while touch users would simply not see it.

As a quick thing I ahve actually ADDED this as the RTD behavior for now.
Please try and let me know how you feel it.
All I did, again, is to prevent the enlarged version to pop up if the device has touch abilities.

Let me know!

I think the touch solution works just fine.

Can the size of the popup be modified using css?

There's a class you can use, local_table_clipspopup_thumbs_large

So, if for example you want them to be max 150x200, you can add to your DirectCSS something like this:

.local_table_clipspopup_thumbs_large {
   max-width: 150px;
   max-height: 200px;
}

Great. Thanks Alex.