?
Solved

CSS - Safari

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

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

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.
A professional opinion on which Apple product to buy, and a tidbit about the WWDC.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month11 days, 22 hours left to enroll

752 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