Solved

CSS - Safari

Posted on 2013-06-26
4
371 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
  • 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
css, html 5 42
manage footer size 4 51
Mobile page Scrolling down when refreshing 4 26
Chrome and Firefox Java 5 27
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

785 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