this is my first question on Stackoverflow, so please don't hate me for missing anything :)
I am currently trying to build a Phonegap application using jQuery Mobile.
At this point I'm having issues handling Time inputs. I need the input to only offer 15-minute steps. I've tried the DateBox plugin which offers this functionality. My code looks as follows:
<input name="txtAfzEnde" id="txtAfzEnde" type="text" data-role="datebox"
data-options='{"mode":"timeflipbox", "minuteStep":"15", "useFocus":true}' />
However on an iPhone it's not possible to switch to this input using the "Prev/Next" Buttons.
So my question is:
Is it possible to use the standard HTML-inputs like
<input name="mytime" id="mytime" type="time" />
with any customizing options to use a 15-minute step? I'm imagining something like:
<input name="mytime" id="mytime" type="time" data-options='{"minuteStep":"15"}'/>
I'd like it to use the native timepicker so it integrates well with the other UI elements.
If something like this is not possible, please suggest a plugin that allows me to customize it in the needed way and also integrates well with native UI inputs.
Greets,
Philip
Related
I am planning to create a web application based on java, jsp and struts. I have sketched the requirement and how functionality should work and who the target users would be. Even though I am very excited about the application, I am not sure how should I create a good UI design for it.
Shall I go for css as a common way of designing UI's which would be a tedious task to map css to all the elements/tags. Is there any other way of doing it? I am new to this and this would be my first project which I have been planning from very long.
Which technologies should I use in achieving this in regards to design?
Note: Also I want to keep my application light weight rather than using flash content and other sorts
I would recommend using something like Bootstrap: http://getbootstrap.com/
That library will allow you to build some nice user interfaces without having to deal with too much CSS or HTML yourself.
Attempting to roll your own CSS and HTML is just asking for pain. Use a framework like this one and things like cross browser support will be much simpler(pretty much free).
Bootstrap can easily be paired with JSP because you just make the web page output be in bootstrap format. Basically use the CSS classes it defines. For examples:
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
They have similar classes for layout and all kinds of other widgets.
I will go with the approach of Jon. When you are choosing a CSS frame work consider the paltforms ( desktop, tab and mobile ) and choose the right one.
http://webdesignlike.com/2015/best-free-responsive-html5-frameworks/
http://www.cssnewbie.com/best-free-css3-frameworks-2015/#.VVooCfxVhBc
http://devzum.com/2014/11/20/best-html-css-frameworks/
Go through these links, it will give you a better idea.
How to add datepicker in MVC without jQuery
There's no built in Datepicker in MVC. The nearest to a built-in datepicker would be the HTML 5 datetime input type
<input type="datetime " value="" />
which may show a datepicker in certain browsers, but this may not be supported across all your target browsers and is limited to how you can style it.
In light of this, you may want to look at a JavaScript based datepicker.
I don't think you can no, although when running in Chrome it will allow you to pick dates using a datepicker
So I want to use a document upload element in a web form using JQuery Mobile. Every mobile platform in my testing environment allows it, (only small additional styling is allowed but some none the less) until I come to IE and IE Mobile. It is all scew-whiff in both and doesn't function at all in IE Mobile.
Am I missing some secret documentation or am I being stupid expecting IE to behave like others... I am going to guess that yet again, they are laughing in the face of conformity.
Thank you for any input and advice.
In regards to code, I am not using anything fancier then:
<input name="exampleName" class="exampleClass" id="exampleDocument" type="file" size="250" value=""/>
<!--and Jquery Mobile changes the class name to input ui-input-text ui-body-a-->
IE for Windows Phone 7/8 as like iOS 5 and lower don't support file upload from web browser. File Upload Support
I am trying to get started with Angular UI bootstrap.
I have the example running, but I have no idea where to go from here. There isn't much ion the way of documentation or examples.
The documentation for twitter Bootstrap says that typehead has options such as minLength. How do I set that for example? How would I hook it up to a controller?
OK, the unit tests file had an example.
<input type="text" ng-model="selected" typehead="state for state in states" typeahead-min-length='3' >
I would like to focus on a text input field immediately on page load. However the following code, that works on desktop browsers, doesn't work on mobile Safari (on iOS 6).:
<input type="text" name="q" class="search" id="focusme" />
...
<script type="text/javascript">
window.onload=function(){var a=document.getElementById("focusme");a.focus();}
</script>
I have tried to implement several suggested fixes for this. However I haven't been able to get it working. It does display the CSS changes to the field when it is in focus, however the keyboard is not brought up.
I suspect this may be due to my currently very limited understanding of JavaScript, but I think it may still be a bug in Safari.
The question:
In Safari on iOS 6, Do you know of any way to auto focus on a text input field on page load?
Thank you for your help :-)
Update:
The page does have jquery and mobile-jquery available, if they need to be used.
Why using JavaScript? <input type="text" autofocus /> should do it!