I am working on a website using Bootstrap and have a problem I can't seem to fix. Here is the draft of the site.
On the "What We Do" panel, I made a clickable modal window on the first thumbnail box (it says "Enterprise Software development" under the thumbnail). If you click the thumbnail on a non-mobile device, a modal window will pop-up.
On a desktop computer (or laptop), it works just fine. But on a iOS (iPhone, iPad, etc.) it doesn't work at all: i.e. tapping it doesn't bring up the modal window.
However, if you look lower on the page at the "Who We are" panel, there is a "See more about Tim..." button. If you click or tap on that button, it will work across all devices (include iOS).
The only difference I can see between the two is that the first one is on a <div> tag, whereas the second one is on a <button> tag.
Does Bootstrap not support starting up a modal window from a <div> on an iOS device? If it does, do you see anything wrong with my code that would make it fail only on iOS devices?
Chris's answer is correct. Changing the div to a button would help clarify your markup. If, however, you need to keep the same markup, you can also add cursor: pointer to your div element to let safari know that this is something that might be clickable. It also let's mouse users have a standard visual cue that the element is clickable as well.
Just add the class clickable and then include the following CSS:
.clickable {
cursor: pointer;
}
Here's an MCVE in Fiddle with the fix as well
notice I haven't used Bootstrap's btn classes here because they will add the cursor rule automatically.
This isn't Bootstrap-specific at all, it's a general problem on iOS. By default, many not-usually-interactive elements (such as <div>s) aren't clickable/tappable on iOS.
See https://github.com/facebook/react/issues/134 and the links & follow-ups therein for some more details.
If possible, use a <button> or <a> instead. A <div> for an interactive element isn't very semantically appropriate anyway.
Related
This is my website for a school project, it is designed to be viewed on a phone. I have a dropdown menu on it near the top that uses hover, which does not work on touch devices. I need to make this work with clicking (I don't really care if hover still works, I need to click) but do not know how. How do I make this work with tapping on a touchscreen? I really want to stay away from javascript for now and just use HTML and CSS. I am very new to webdesign so I will need a very basic explanation. Also I know my images take a long time to load, any suggestions on how to address that would also be appreciated.
Thank you!
Most touch devices lack the ability to provoke a true hover interaction (some exceptions would be the Samsung Galaxy Note with pen, Microsoft Surface devices with pen, and the iPad Pro with pen).
That said, touching an element that has a :hover pseudo selector with associated styles (as you do) should invoke that hover event, even in mobile browsers on touch devices.
Have you viewed your website on a touch device? The menu appears as expected with tapping on my Google Pixel (with Chromium browser) as well as on my Surface device in tablet mode.
There may be some browsers/devices or combinations thereof that do not exhibit this behavior, but I believe it's quite standard.
If you need a more principled solution, I'd suggest making the nav toggle a <button> element and executing some basic JavaScript on click events. I realize you don't want to stray into that territory right now, but that's exactly the sort of use case at which JavaScript excels.
If you really want to avoid JavaScript and you don't like relying on the touch-invokes-hover-event approach, there's always the checkbox hack. As the name indicates, it's a hack. I wouldn't recommend it for your particular use case. But to each his/her own.
Here's a CSS Tricks article on all the interesting uses the checkbox hack can be applied to.
I was faced with this problem on IE11 Mobile (Lumia 520 Phone) on an existing navigation menu, where every link inside my submenus were not firing a click, on the first tap.
This fiddle repro is a partial flyout accessible navigation menu, taken from a sample WAI app menu.
If you test it on IE10 or IE11 Mobile or Touch, you will obverse that none of the submenu links work.
They must be clicked twice to fire the click events.
Why is that?
This bug is a result of a feature to "help simulate hover on touch-enabled devices" that was deployed starting in IE10-11 for Touch.
In short, what causes and requires the double tap is having aria-haspopup=true as the submenu parent element level. Because of it, IE Touch wrongly assumes all those links are toggle themselves and treat them as such. I shall also note that for similar reasons, iOS Safari has its own way to treat elements with “:hover[s] that either hides or shows another element using visibility or display”.
As explained on MSDN’s Internet Explorer 10 Samples and Tutorials:
Alternatively, Internet Explorer 10 adds new behavior to the existing aria-haspopup property to simulate hover on page elements with hidden interactive content.
The issue is that while it was supposedly designed to be helpful, that implementation is based on an incomplete and somewhat misguided reading of what aria-haspopup is, and what it is supposed to do.
aria-haspopup is technically a property (and not state). Meaning that IE placed a touch behavior on an element that isn’t supposed to change at runtime. Unless a responsive context would perhaps require such a change; aria-haspopup='true' shall remain true even if the popup element is shown. The state for the switch being aria-expanded instead.
The concept only works for the MSDN example of aria-haspopup as implemented on that tutorial. i.e. If aria-haspopup=true is placed on the toggle button itself, that IE Touch feature will work as intended. However if the aria-haspopup=true attributes is placed at the parent level like my repro, or like a more traditional app menu, as per this W3C/WAI example, it's a problem.
The solutions to go around this bug are to, either not use aria-haspopup=true on parent elements because of IE10-11 Touch (which sucks for accessibility), or remove it from touch enabled IE10/IE11, either on the server side or with Javascript accordingly.
I use Responsive Web design to turn my page into mobile layout, but something weird happens,, why the style of checkbox in IOS changes like that, the checkbox border disappear, and the check symbol is hollow.
please see the attachment.
The first image is the screenshot of Chrome
The first image is the screenshot of iphone4
What should I do to make the checkbox in IOS as same as normal checkbox?
In general, you shouldn't. Each browser and OS can style their controls differently. This is not a part of the HTML standard.
MacOS also styles their checkboxes different, as does Linux.
Why do you feel the need to change the way the checkboxes are styled? Users of that platform are used to the checkboxes looking the way that OS makes them. If you style them differently, then users will find this odd.
Today I have launched a WordPress blog it took me much time to develop the theme for. Now it was the first time I could request the site via iPhone I was just shocked. I thought it would be a simple task to realize a touch menu by writing simple HTML and styling it taking advantage of the :hover-state to display or not display it's content.
If you switch your Browser to a mobile user agent and load this site (make the window about 640px wide before), you will see my light blue widget bar. Hovering over the icons on it will toggle the inner containers with the main widget contents — works like a charm.
Unfortunately, when I call the site on my iPhone, that bar with the icons will appear but will not be touchable at all. Damn! What's wrong with my code? I hope you can help me. Thanks in advance
Here is what I found with hover in iOS. http://www.websitecodetutorials.com/code/iPhone-&-iPad/apple-iPhone-iPad-IOS-simulate-hover.php. It may be the fix to your problem. Or others down the road.
"With the rule -webkit-transition:all 0.3s ease-in-out; (and possibly others) in place iOS won't hover unless you add display:none/display:block or display:table/display:block. Additionally I found that, without the hover code in place, if you actually have a destination link in the href, upon clicking it, it just strait launches to it. With the code in place, you click once for hover event, and an additional time to follow the link. So if you find the iOS device won't (or correctly) hover for whatever reason here is your probable fix."
Now I figured out I never could get it working the way I wanted when posting this question (I'm sorry the link doesn't show it anymore). Explanation: My markup was like:
<li class="widget-container">
<p class="widget-title">Categories</p>
<div class="widget-content">
<ul>...</ul>
</div>
</li>
The style was like:
.widget-content {display:none}
.widget-container:hover .widget-content {display:block}
I'd love to code as simple as this but it won't work for a good reason: On touch devices, the touch-action is always targeting the uppermost object in z-index which in this example would be the .widget-title. Thatfor, the wrapping .widget-container can never be touched and thus its :hover-state will never be triggered.
This exercise made me recognize a touch-screen-optimized site has to incorporate JavaScript to work well. So I came up with a jQuery accordion solution now.
I have a few "a href" image links and hovers on a website for navigation (www.byrdnick.com, in the non-mobile version of the site). It seems that these image links confuses iOS browsers. When you tap the image link once, it changes to the hover image. When you tap the hover image, nothing happens. When you tap the hover image a second time, you are finally redirected to the link.
Is there any way I can make these image links work or am I going to have to try a whole new method like a map or something?
Thanks in advance to all you gurus who help guys like me out!
This is because of all the strange stuff your psd2css.js javascript does to tweak your divs and links.
I never used this tool, but it seems that your Web page was generated using an tool called psd2cssonline? This tool seems to add some obscure treatments behind the scenes to all your <a href> links. This is easy to see in the psd2css.js file, once the document is loaded, the script adds some magic to all your <img> hover functions.
I didn't study the whole javascript added by this tool, but I'm pretty sure that it is the reason of the problems. This tools does not seem to be compatible with touch-screen devices or somehow does mess with touch events in a mobile environment where "hover" are non-sense (you can't "hover" an item on a touch-screen!), and will probably need to be updated to be able to manage mobile versions of the web sites it generates.
Meanwhile, you may try to disable this script (and everything else that may be generated by this tool to automatically add behavior to your links) when your website is accessed on mobile, to avoid messing with the "hover" events in such cases and simply keep the standard behavior that you have without any similar script.
As long as it's something similar to what I have below and you don't have any odd class that is conflicting, you should be ok.
<img src="some image" />