Sorry, this question might not be the best worded question, please feel free to advice if i should change (if i can change).
Background:
Different browsers/OS's render html differently, we all know this. One of the significant things is, how certain form tags work.
Eg.
<select>
<option>option 1</option>
</select>
In desktop browsers, we see a dropdown, but in ios/android, we see a OS level modal/popup.
Other obvious tags are, multiselect, and input type "date" (nice date selector pops up on ios/android as opposed to the desktop simple text field).
Question:
So as a html/js developer, is there any way to detect if the current browser renders these tags differently?
Eg. its in good practice to let users select date using the most native thing you can, however, its not nice to tell them to type it out. So if the os/browser has a pre-made modal for date, i want to show the native implementation, and if no such implementation exists, then display a custom date picker.
Sure i can use a library to differentiate ios/android/pc, but thats not exactly what im looking for. is there a way to actually check if the browser supports custom behaviour for these tags?
Related
I am working on a simple web app using nothing but Vanilla JS, HTML and CSS.
I have created a form, which contains multiple input fields of type "text". Now I want to add a datepicker. I have tried adding an input field of type "date", but I really don't like the design of this datepicker and I haven't found any way of styling the calendar that pops up when clicking into this field.
My first question is: Is there a way to style the calendar of an input field of type "date"?
As I assume the answer to this question is "no", I have searched for an alternative. There are multiple GitHub projects out there, designing a calendar. One example is this. This example requires adding the html-code to my webpage. Initially, I wouldn't show the calendar-div, for example by setting its style to display: none in my css file. I would have to add a listener- to an input field of type "text" as well and then upon clicking into this field display the calendar. But this would rearrange the input fields below this "datepicker", which I don't want. Is there a way to just display the calendar and let it overlap with its surroundings, for example the input fields below this "datepicker"-field?
I would also appreciate any well known alternatives to styling datepickers with nothing but Vanilla JS, HTML and CSS, if there are any.
You have done your research and the answer is: No.
<input type="date"> or <input type="datetime-local"> are HTML inputs and its up to the browser vendor (Google, Mozilla, Apple) to decide how to render them.
If you open your dev tools and enable shadow DOM, you can even inspect the nodes created by these inputs but it's not recommended styling them.
It's a Front-end developer's life in 2022 (and perhaps more years to come) to introduce datepicker dependency or create datepicker yourself if you want to have specific look or functionality. From my experience, datepickers are not that hard to make but it's all the corner cases and localized edge cases you have to look out for. So I think it's easier to just go with a dependency.
If you don't want to bring full-fledged framework just for the datepicker then there are various options if you search for them.
You might like modern web components and you could search for date picker created with web components. These do not require any framework, just a supported browser. They usually come with their own stylesheets and JS with ability for some customization, I'd try it out.
I don't know that Scroll Wheel is the right name for what I want, but I'll try to explain it.
On my I phone there are text boxes I can click on. Once you click on that box, you are presented with a scrollable list of items, for example numbers 1-10.
When you choose the number 1-10, either that value is placed in the text box and the list view is closed or you can "submit" that choice.
Is it possible to replicate this scrolling list of preset values in bootstrap? Ideally I want to have a list of times to choose from (1:00-1:30, 1:30-2:00) that an end user can scroll through on their phone and make a decision.
The answer to your question
Like others have mentioned in the comments, this is just how iOS renders <select> elements. Different browsers will render this differently, i.e. Android browsers come up with a slightly more conventional list, and desktop browsers will render it as a standard drop down list (albeit styled to fit with their UI, which can be frustrating).
Other things to be aware of
Bear in mind that if you try and override the default select elements with a plugin such as Chosen you will lose the various browsers default rendering of these elements, which can be one hell of a headache. There is also currently no easy way to detect whether your browser will render a select in a special way (such as the iOS style spinner) or use a dropdown, so its not like you can use something like Modernizr to apply your select plugin only when you're not using iOS/Android. If you want to do that you're in the murky world of user agent sniffing. (If anyone wants to correct me on this please do!)
Further reading
As a bit of an aside make sure you check out the new HTML5 input types. These provide things like native datepickers with no need for plugins (if the browser supports it) and many other types that have varying degrees of usefulness. For example, the type="tel" input is a nice one, that will render a normal text box in most desktop browsers, but on most phones/tablets/devices with virtual keyboards it will bring up a dial pad style keyboard, making it much easier for the suer to type in a phone number and giving them a strong indication of what you want. Just something that is very much worth thinking about if you are making forms for mobile and desktop, as it can make the mobile experience much more fluid. Browsers that don't support these elements will continue to render as they normally do as well, which is doubly nice. You can also use the likes of Modernizr to detect whether any of these input types are available to you, and do things differently. For example we have used Modernizr to detect if there is a native datepicker available, if there is, we just leave our <input type="datepicker/> alone, but if there is no datapicker we load in the jQuery datepicker, therefore making sure everyone has a datepicker.
This might be all obvious stuff to some of you but since this question had been pretty much answered in the comments I thought it would be useful to include some extra information about input types and different browsers rendering. If anyone wants to expand on my answer or correct anything (I'll be the first to admit to not being a complete expert on these things) please feel free.
Recently I have received a project to make a webpage comply with WCAG 2.0 Level A. The part that I am running into a problem at the moment is the datepicker component. The datepicker component allows the user to select the date in two ways. One way is to manually type in a date, for example, 04/06/2014. The other way is to select the small image beside it and a calendar would basically pop-up and the user can select the date from there.
While researching over the web, some people have suggested that we do not have to make the image part of the datepicker component accessible since the text-field itself provides an alternative for accessibility. Is this acceptable (First Question)?
If this is the right way to go, how do I make it so that accessibility technology like screen reader would ignore the image icon (Second Question)? I have also tried to research for this issue. Basically, if it was just an image, we could set the "alt" attribute to null. But this image is actually embedded inside an "anchor" tag (which makes the image click-able) therefore this practice is invalid (verified by achecker.ca).
Update: HTML5 Accessibility: aria-hidden and role=”presentation” answers the second question
Any thoughts would be helpful. Thank you
The answer to the first question depends on what the usability reason is for showing a visual calendar? If you are showing it so that users can select a date based on use cases like "first Friday in Month X" or something similar, then simply providing a text input, while making the page at least usable, does not make the page functionally equivalent for screen reader and keyboard-only users and therefore does not pass WCAG 2.
Your answer to the second question that you posted, works for screen readers (in terms of removing the aforementioned functionality) but it now presents a problem to sighted keyboard-only users. You are therefore still not WCAG 2 compliant.
Making date pickers accessible, while difficult, is possible. Are you using the jQuery UI datepicker?
Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.
I am in the process of converting a Silverlight app into a standard Web app (ie all HTML, CSS and JavaScript via jQuery 1.4.4). I'm not the most experienced when it comes to web development, so I am wondering what would be the best way to convert this custom Silverlight control into a web equivalent?
It boils down to just being a fancy radio button group. The user can click on any type, and only one type can be selected at a time. For the web equivalent, it needs to set a value that will get POSTed to the server.
For now I am just using a standard <select> tag which is of course functional and doesn't require JavaScript (which is nice), but ultimately is not going to fly. I will place a <select> inside of a <noscript> tag to allow non-js people to still be functional.
Can anyone recommend a good approach for tackling this? Any existing plugins/controls out in the wild I could take advantage of?
(I am using ASP.NET MVC 3, but I don't think that's very relevant here)
I would use a <ul> and make the selections a <li>. Styling is easy enough to apply to that, and there are tons of samples online.
Place a click on the li using jQuery to disable. If you are going to disable other selections, you should also include a reset/clear type function to they can choose again in case they made a mistake.
Think of them as an array of buttons. When one is clicked, all others are unselected. Draw a rectangle around the one that was clicked and set a hidden form field equal to the value you expect when the form is submitted.