html - How to create two inputs for the same field with responsive design? -


i'm trying create responsive design form number input in form-group using thymeleaf , bootstrap.
goal make such input slider type on mobile devices, , text type on medium devices , bigger:

enter image description here

for reason i'm using 2 different divs same field residents different classes show , hide content depending on device screen width (e.g. hidden-xs, hidden-sm, hidden-md, hidden-lg).

<div class="form-group required hidden-sm hidden-md hidden-lg">     <label for="range_02" class="col-sm-2 control-label">residents:</label>     <input id="range_02" type="text" class="form-control" value="1" th:field="*{residents}"/> </div>  <div class="form-group required hidden-xs">     <label for="residents" class="col-sm-2 control-label">residents:</label>     <input id="residents" type="text" class="form-control" th:field="*{residents}" placeholder="4"/> </div>

the input fields visibility okay, changes while change window width. seems couldn't use 2 inputs same field @ same time - value passing through first input slider.

i tried pass 2 inputs same div , use same visibility options text , slider inputs. result same.

how set input not hidden inactive when 1 shown?

as @jasc. suggested binded slider input text input fields js function:

$(function () {     var $range = $("#range_02"),         $input = $("#residents"),         instance,         min = 1,         max = 10;      $range.ionrangeslider({         type: "single",         min: min,         max: max,         onstart: function (data) {             $input.prop("value", data.from);         },         onchange: function (data) {             $input.prop("value", data.from);         }     });      instance = $range.data("ionrangeslider");      $input.on("change keyup", function () {         var val = $(this).prop("value");          if (val < min) {             val = min;         } else if (val > max) {             val = max;         }          instance.update({             from: val         });     }); });

the thing have need to make construction works put text input above slider input on form.


Comments

Post a Comment

Popular posts from this blog

Retrieving ETA (estimated time of arrival) with Google Distance Matrix API and public transit as transport mode -

Image
is possible retrieve eta google's distancematrix api (or alternative api). fyi, eta different duration, when using public transport. following example clarify request. when leave on friday @ 8.15 i'll able catch train @ 8.30 , arrive @ 9.00 am. google says duration 30 minutes. however, when leave on saturday @ 8.15 i'll able catch first train @ 9.00 , arrive @ 9.30 am. google still says duration 30 minutes, means ignore delay. google map supports functionality there api around giving me eta instead of duration. can see, distance-matrix' response no good. clarifying question little. eta estimated time of arrival , it's clear user wants know entire duration of transport (including waiting time public transport).
Read more

javascript - Confirm a form & display message if form is valid with JQuery -

i'm developing django application , use javascript in order improve website. i have form , display 2 things : confirm form before submit if form submitted, display message : 'form saved' it's first time i'm using js , need make process. this code : <form class = "form" method='post' action=''> {% csrf_token %} <br></br> {{ form.as_p}} <br></br> <button type="submit">valider</button> </form> <script> $('#form').submit(function() { var c = confirm("click ok continue?"); return c; //you can return c because true or false }); </script> and if form valid , saved : <script type="text/javascript" > $(document).on('valider', 'form.form', function(form) { var $form = $(form); $.ajax({ ...
Read more

ionic framework - Meteor - Error: Failed to execute 'insertBefore' on 'Node' -

i trying make dynamic list display using meteor, idea load more elements each time bottom of page reached. the html template following : <template name="contacts"> {{#contentfor "headertitle"}} <div class="bar bar-header bar-assertive"> <h1 class="title">contacts :</h1> </div> {{/contentfor}} {{#ionview}} {{#ioncontent}} <div class="list"> {{#each contacts}} <a class="item item-avatar" href="/contacts/{{_id}}"> <img src="/img/ico_client.png"> <h2>{{full_name}}</h2> <p>{{company}}</p> </a> {{/each}} </div> {{#if moreresults}} <div id="showmoreresults" style="margin-left: 25px;"> <span class="loading">loading...</span> </div> {{/if}} {{/ioncontent}} {{/ionview}} </te...
Read more