Solved

CSS - Safari

Posted on 2013-06-26
4
375 Views
Last Modified: 2013-06-27
See attached; note the pulldown menus under workorder.

The dropdowns under Workorder DO NOT appear on an iPad in Safari.

It works fine in IE, Firefox & Chrome on a PC, Win 7.

Thanks
mainpage.htm
0
Comment
Question by:Richard Korts
[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
4 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39279354
That's because there's no way to hover on a touch screen. You'll need to use javascript to simulate hover/blur when the menu is tapped. For example, add a class selector to line 24 such as:
ul.drop li:hover > ul, ul.drop li.hover > ul { visibility: visible }

Open in new window

Add a javascript function to your script element such as:
function toggleHover(el) {
	el.className = (el.className.indexOf('hover') > -1) ? '' : 'hover';
}

Open in new window

And add a click event to the list item such as:
<li onClick="javascript: toggleHover(this);">Work Orders

Open in new window

0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 39279471
I just discovered a better solution. It seems the click event triggers the hover pseudo state anyway, but on the iPad, the click event is distracted by the copy/paste function where if you hold your finger on the item, it will select the text for copy/paste. You can prevent this distraction by adding an empty click event to your list item. Do not change the css on line 24 nor add the javascript. Simply add the empty click event:
<li onClick="">Work Orders

Open in new window

0
 

Author Comment

by:Richard Korts
ID: 39279568
To xmediaman

I added what you said firsr; it works on the iPad & on Firefox; I didn't test the other browsers yet.

So you are saying just add onClick = "" to links with pulldowns (& skip the rest)?

R
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39279587
Exactly.
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

A professional opinion on which Apple product to buy, and a tidbit about the WWDC.
Is your phone running out of space to hold pictures?  This article will show you quick tips on how to solve this problem.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

691 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