I have a select box, created in the following way:
<select id="size" onchange="location=this.options[this.selectedIndex].value;" name="size">
<option value="#catalog_860">16</option>
<option value="#catalog_861">17</option>
<option value="#catalog_862">18</option>
<option selected="selected" value="#catalog_863">19</option>
</select>
On Desktop Safari and other browsers it works like expected.
On Mobile Safari (iPad) it does not respond to touching. When I connect a label with it, touching the label results in visibly selecting the select (the down arrow button turns blue), but it does not show the options.
I am fighting it for two hours now. What am I missing?
I bumped into the same thing as well.
Check any where in your javascript if you call
e.preventDefault();
on the 'touchstart' event. I manage to avoid this by
function touchStart(e) {
if (e.target.tagName != 'SELECT') {
e.preventDefault();
}
...
}
Related
I am a teacher, and I currently run a blog via blogger.com for my class. The link is http://stmlatin2019.blogspot.com
You'll notice that I have some drop-down menus in the left sidebar of the blog. These work beautifully on my laptop and on my desktop. The problem is that my school is now switching to iPads, and I am having trouble getting the menus to work on most iPad browsers. They open in Chrome, but the security restrictions on campus distort the look of the blog on Chrome.
My question is this: While I know this is not an Apple forum, could anyone show me how to tweak this code so that the dropdown menus work in iPad browsers like Safari? Currently, Safari lets me pull down the menu and make a selection, but then nothing happens once I make a selection.
I guess I should say that I know absolutely nothing about coding. In fact, I stumbled upon that dropdown code on accident a couple of years ago, and, miraculously, I got it to work. Now I'm back to square one.
Here is the code for one of the menus so that you can see what I'm dealing with:
<select style="background-color:#eee9dd"
id="Select1" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options [0].selected=true" class="text_noresize" name="select">
<option selected />Select a link
<option value="" />
<option value="http://www.stmsaints.com/site1.php" /> StM Homepage
<option value="https://mail.stmsaints.com/owa" /> StM E-mail
<option value="http://www.edmodo.com" /> Edmodo
<option value="" /> ____________________</select>"
Any help you can offer me would be most appreciated.
Here is the answer, from Apple docs
The standard window.open() JavaScript method cannot be used to open a new tab and window from a global HTML file or an extension bar. Instead, the global file and extension bars have access to the SafariApplication, SafariBrowserWindow, and SafariBrowserTab classes, whose methods and properties allow you to work with windows and tabs.
Also posted here: link
Safari/Chrome have built-in pop-up blockers that stop this from working. The only Javascript that is allowed to open a new window in Safari/Chrome is Javascript directly attached to click handlers (and other direct user input handlers).
However, you could display an alert showing pop-up blocked.
Try this:
<select id="retailer" class="windowOpen">
<option value="#">Select one</option>
<option value="http://amazon.com">Amazon</option>
<option value="http://ebay.com">eBay</option>
</select>
<script>
$(document).ready(function () {
$('select.windowOpen').change(function () {
var url = $(this).val();
var open = window.open(url);
if (open == null || typeof (open) == 'undefined') alert("Turn off your pop-up blocker!\n\nWe try to open the following url:\n" + url);
});
});
</script>
JSFiddle:
http://jsfiddle.net/utcB9/1
I have number of html <select> elements in webpages which displaying in the app (in UIWebView control). Some of them allow multiple choice. I need to perform action when user change something in the list. For multiple choice I need to perform action after user finish rearranging checkboxes and click on 'done'.
How it was implemented in iOS 6 (and works perfectly there):
<select onblur="alert('do something...');">...</select>
<select multiple='multiple' onblur="alert('do something...');">...</select>
iOS 7 issue:
<select onblur="alert('NOT ALWAYS WORK...');">...</select>
<select multiple='multiple' onblur="alert('NOT ALWAYS WORK...');">...</select>
<select onchange="alert('THIS WORKS');">...</select>
<select multiple='multiple' onchange="alert('WORKS BUT NOT AS EXPECTED');">...</select>
onblur doesn't work relyable anymore. It works only if there is some other textbox or dropdown below. If it's the only dropdown/textbox on the page, it doesn't fire.
I tried replace onblur to onchange, it works, but only for single choice. For multiple choice onchange fired when user change his selection, not when he finished (by clicking "done").
Any ideas how to solve this for both single and multiple dropdown lists in iOS 7?
Maybe I missed something obvious?
I found the solution. If load following HTML in UIWebView in iOS 7 (not Safari), the onblur event doesn't work:
<html>
<head>
<meta name='viewport' content='initial-scale=1.0,maximum-scale=10.0'/>
</head>
<body>
<table style='height:80%'><tr><td>
<select onblur="alert('blur')" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td></tr></table>
</body>
</html>
The important components: viewport, table with some height defined, select inside this table.
If remove table OR remove height style OR remove viewport, then onblur works.
I can't explain this effect, but I just remove table height style and it works. Maybe it helps somebody.
<select size="4" name="lbxEmployees" id="lbxEmployees" disabled="disabled" class="FormDropDown" style="width:100%;">
<option value="1">jim jubak</option>
<option value="2">Peyton Andrew</option>
<option selected="selected" value="3">Pat smith</option>
<option value="4">Mark Smith</option>
<option value="5">Kobe Bryan</option>
</select>
The above code renders differently on IE9 and IE7. Can someone explain why? The select box is disabled in both browsers, but one shows the selected value (IE7) while the other does not (IE9).
It's simply because IE9 is a different browser. IE7 was released back in 2006, while IE9 in 2011. There is no point of showing what is default in something that isn't enabled, so they've disabled it..
EDIT:
If you want to disable it because of security, you should enforce that on the server-side. If a hacker copies your source code, and removes the "disabled" part, they will be able to change and include that information as well.
Interesting , starting with an enabled check box, I tried this as a poss way to fool IE9 ...
<script type="text/javascript">
document.getElementById("lbxEmployees").value = 3;
document.getElementById("lbxEmployees").disabled=true;
</script>
didn't work. did in IE7
( if your goal is to presnt to the user the selected value and have to have the select box ) looks like we might need to do something like ...
<div id="EmployeesDiv">
Employee:
<select name="lbxEmployees" id="lbxEmployees">
<option value="1">jim jubak</option>
<option value="2">Peyton Andrew</option>
<option selected="selected" value="3">Pat smith</option>
<option value="4">Mark Smith</option>
<option value="5">Kobe Bryan</option>
</select>
</div>
<script type="text/javascript">
window.onload = function() {
var selectBox = document.getElementById("lbxEmployees");
var val = (selectBox.options[selectBox.selectedIndex].text;
/* remove select box and replace */
document.getElementById("EmployeesDiv").innerHTML ="Employee: "+val;
}
</script>
your app might have a simpler way of course, the IE9 thing got me thinking ...
*Not great if the reason for the disable is security, do all this on the sever side before page print if so!
For styling disabled elements I used:
[disabled] { /* Text and background colour, medium red on light yellow */
color:#933;
background-color:#ffc;
}
It's work perfectly in all browsers except Chrome. Is there exists a way to overcome this using css without classes, because I have a huge amount of elements on different pages and don't want to change it all.
Thanks in advance.
UPDATE
After some investigation I have realized that this can be reproduced only if client has a server OS like Windows 2008 and use only Chrome browser. But I hope its a rear condition in real life.
It seems to be working just fine using Chrome 15.
input[disabled] {
color: #933;
background-color: #ffc;
}
Make sure you´ve cleared any cached style sheets.
Created a jsFiddle.
UPDATE
Noticed your question title and updated the example.
It´s seems to be a known issue for Chrome in Windows, see Style disabled multiple select – google chrome
The code below is works for me (style the option colors not select box itself):
<select multiple="multiple" disabled="disabled">
<option style="color:#CCCCCC;" value="1" selected>Monday</option>
<option style="color:#CCCCCC;" value="2" selected>Tuesday</option>
<option style="color:#CCCCCC;" value="3">Wednesday</option>
<option style="color:#CCCCCC;" value="4">Thursday</option>
<option style="color:#CCCCCC;" value="5">Friday</option>
<option style="color:#CCCCCC;" value="6">Saturday</option>
<option style="color:#CCCCCC;" value="7">Sunday</option>
</select>
I have a very simple select drop down. In Chrome, it doesn't drop down. The code itself works fine, and the drop down works in Safari, but for some reason it won't open in Chrome. Here is the HTML:
<select name="pellet_credit" class="item_discount">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
It should be pretty simple. It's a dropdown... Here's a screenshot of the select, selected, but not open:
--- edit ---
This is a jsfiddle with the full source included. The dropdown works for me in the jsfiddle view, but not on the actual site.
http://jsfiddle.net/HSYvf/
--- edit ---
Other drop downs on the page work fine.
Validate your HTML to make sure there aren't extraneous closing/end tags. Make sure you aren't hiding the options through CSS as well.
I had the same problem with Firefox and Chrome and due to the z-index of the form being -1.
When changed the z-index, it worked fine.
This happened to me when I put a <select> inside a jQuery .sortable() element. I copied this code right off the jQuery website, and the .disableSelection() method call killed my <select>.
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Once I removed the .disableSelection(); (which oddly enough they've deprecated...) everything worked just fine.
I think you should set a value for your options
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
you can read more here
what ended up happening to me that caused me to be on this page is that display was set to display:none; on the option elements
solution:
$(yourdropdown).children().show();
We had a crazy problem when we were developing a client/server programming language which had a listbox. Although INPUT worked the listbox didn't. We have mouse tracking on it and by a bug the $(window).mousedown... was being enabled by default.
We were able to track the problem with this page: https://hackernoon.com/finding-that-pesky-listener-thats-hijacking-your-event-javascript-b590593f2a83
Just in case the above page disappears:
In Chrome (possibly other Chromium flavours [works on Opera too]):
Right click on element.
Click 'Inspect...'
When the 'Elements' are shown, the right panel will have [Styles][Computed][Event Listeners] (tabs). Click on 'Event Listeners'.
Look for 'mouseup', 'mousedown', 'keyup', etc and expand what you suspect and remove it to see if that fixes the problem (debug).
Change the code.
What we did was change the 'return false' to 'return true' in our code.
To debug such issues try removing all attributes from the html and add them one at a time to find out what is causing the issue.
For example, the snippet below does not work as needed.
<select size="10">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
Removing the size attribute fixes it
<select >
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
I'm adding an answer just to call out the comment by #Agos in the selected answer. Check if you have event handling code (mousedown, click, etc.) that might be stealing the events from the dropdown.
The problem for me was that I had included class names in the id declaration.
For future audience, notice in particular if your select element is inconsistent with the surrounding form styles. This is a likely clue that a class isn't being applied correctly, and you may have accidentally placed it in the wrong spot.