I've discovered that my iPad (iOS 7) doesn't disable <button> elements even when they have the disabled attribute on them. They are disabled on every other browser I've tried on my OS (Windows 7): FF, Chrome, Safari.
If I take the same html and simply replace the <button> and with an <input type="button">, the input becomes disabled as you'd expect. The reason I want to keep it as a <button> is because I want to put an img inside and that doesn't seem to work with an input. So how do you disable <button> on iOS Safari? Here is a jsfiddle that can reproduce this issue:
<div id="hero-1" class="hero">
<button disabled="" class="go-to-hero">
<div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-oWvCrkzPjX9VBkJavc48RfBP1mSLPYMUIe8FpSaNzpgWWEL55A');background-position: -399px -42px;width: 13px;height: 15px">
</div>
</button>
</div>
<div id="hero-2" class="hero">
<input type="button" disabled="" class="go-to-hero">
<div style="background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-oWvCrkzPjX9VBkJavc48RfBP1mSLPYMUIe8FpSaNzpgWWEL55A');background-position: -399px -42px;width: 13px;height: 15px">
</div>
</input>
</div>
When I view this in my iPad, the first button is enabled and the second is disabled. I want them to both be disabled.
Related
I have some Bootstrap-based HTML pages with some javascript and internal CSS, served in Flask, using Jinjja templates. It works perfectly fine on Windows and Android, using Chrome. But when I try to click certain buttons while on an iPhone (Chrome) or on Safari, they don't work. There's no error message in Chrome either.
Here's a sample of the button I used:
<div class="container mt-4">
<form action="/skill" method="get">
<div class="btn-group-vertical mt-10" style="width:100%">
<button id="Health" onClick="selection(this.id)" type="button" class="btn btn-secondary mb-3" style="background-color: #4a8bae;white-space: normal;">
<h4 class="display-5 pt-2">Health</h4>
<p class="mb-2 font-weight-normal">The centre of human happiness and well-being.</p>
</button>
</div>
</form>
</div>
After clicking the button, it's supposed to sessionstorage the id chosen.
Please advise on what I can do to fix this! Let me know if I should post any other information. Thank you!
I had the same situation, but at least in my case I just turned of the safari's pop-up blocker (at the iphone settings) and everything works fine...
On my React site, I have a profile/account dropdown (similar to Github's, where you click on your profile picture and a dropdown appears). On most browsers, it works correctly. When the div is clicked, it applies the dropdown--active class to itself. This dropdown--active class contains a rule for the child element, dropdown__content, to change its display from none to block, thereby toggling the display of the dropdown content on click.
Before click:
<div class="dropdown account-dropdown">
<a href="/#" class="dropdown__trigger ">
<span class="account-dropdown--name">admin</span>
</a>
<div class="dropdown__content">
<div class="account-dropdown--identity account-dropdown--segment">
Signed in as admin
</div>
</div>
</div>
After click:
<div class="dropdown dropdown--active account-dropdown">
<a href="/#" class="dropdown__trigger ">
<span class="account-dropdown--name">admin</span>
</a>
<div class="dropdown__content">
<div class="account-dropdown--identity account-dropdown--segment">
Signed in as admin
</div>
</div>
</div>
However, the only way I can get it to display in Microsoft Edge is to click some where else on the screen after I've already clicked the parent element. With Inspect Element open, I can tell that the class is in fact being applied immediately after click, but the child element is not redrawn/reevaluated until some where else on the screen is clicked. Alternatively, tabbing to the element and clicking "enter" does not cause this problem.
Works in Chrome, IE 11, Firefox fine though.
I have html code like this:
<div class="container">
<input type="text" name="name" value=""/>
<div class="error">Error here!</div>
</div>
With css this div block positions inside input by position: absolute.
When I open page on mobile phone, such as iPhone 5S Chrome Browser, click on this div focus it and I can delete it by click delete button on keyboard.
And when I bind click event on this div, on desktop browsers it is working, but on mobile browsers not working.
On desktop browsers no such problem.
My HTML code is mentioned below. It is working fine on IE and chrome
browser. But in Mozilla, when focus occurs on DIV having class=""mejs-
button mejs-volume-button mejs-mute" it selects the unwanted width.
Is it possible that on Tab press focus only occurs on Anchor elements and
we can skip main outer DIV. I have tried by using Tabindex="-1". But then
focus will not reflect on anchor elements.Issue occurring only in latest Mozilla.
The issue is related to HTML5 Video plugin. I have used 'mediaelementplayer-min.js'.
<div class="mejs-button mejs-volume-button mejs-mute">
<button type="button" aria-controls="mep_0" title="Mute"
aria-label="Mute"></button>
<a tabindex="0" role="slider" aria-valuetext="10%" aria-valuenow="10" aria-valuemax="100" aria-valuemin="0" aria-label="volumeSlider" style="display: none;" href="javascript:void(0);" class="mejs-volume-slider">
<span class="mejs-offscreen">Use Up/Down Arrow keys to increase or
decrease volume.</span>
<div class="mejs-volume-total"></div>
<div style="height: 10.3833px; top: 97.6167px;"class="mejs-volumme-current"></div>
<div style="top: 95px;" class="mejs-volume-handle"></div></a>
</div>
i have create a app. in phoneGap. it work fine on iphone but in android click event not work.
have any idea what is wrong in my code
this is my html:-
<div id="logInScreen">
<div class="logInScreen">
<a class="main_logo" href="#"><img src="logo.png" alt=""/></a>
<p class="main_text">Digital Discount Vouchers <br /> On Your Phone</p>
<div id ="divRegister" class="main_reg" onclick="GeneralTransit('#register')">Register</div>
<div id ="divNotNow" class="main_reg" onclick="GeneralTransit('#t_featured')">Not Now...</div>
<div id ="divLogin" class="main_reg" onclick="GeneralTransit('#login')">Login</div>
<div class="main_forgot" onclick="GeneralTransit('#login_fog')">FORGOT PASSWORD?</div>
<p class="main_text2">IN ORDER TO PURCHASE ADDITIONAL VOUCHERS <br /> YOU NEED TO BE REGISTERED</p>
<p class="main_text3">POWERED BY YALLAMOB.COM</p>
</div>
</div>
there is also some other div's that hide and show on conditions .
I thought it was the missing ';' (GeneralTransit('#register');)
But it works here with and without the';': http://jsfiddle.net/ZVFgW/11/
Your problem is likely somewhere else.
Did you debug it using Chrome or Firefox+Firebug?