[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

CSS - Safari

Posted on 2013-06-26
4
Medium Priority
?
379 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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.
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
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 +…
Suggested Courses

650 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