jQuery mobile, show message when form element input type="range" value is max -
i creating form in jquery mobile , using form element input type="range". when max value picked want message show "ok, value or more" in span underneath. generic function supports multiple ranges useful. how can such function made?
<label>highest price? <input type="range" name="highest_price" id="highest_price" data-highlight="true" step="500" value="38000" min="2000" max="40000" size="29"/> </label> here's option put that's function , works multiple range fields in form. improved $(document).on('slidestop' etc..
<label>highest price? <input type="range" name="highest_price" id="highest_price" data-highlight="true" step="500" value="38000" min="2000" max="40000" size="29"/> </label> <label>when? <input type="range" name="withindays" id="withindays" data-highlight="true" step="1" value="5" min="1" max="20" size="29"/> </label> <script> //gives msg when value max in range function nyakilian_range_max_msg (thisinput){ thisinputspan = thisinput+'_span'; thisinput = '#' + thisinput; maxvalue = jquery(thisinput).attr('max'); slider_value = jquery(thisinput).val(); if(slider_value == maxvalue){ jquery('#'+thisinputspan).fadein(); jquery('#form_search_txrn_milage_span').fadein(); } else { jquery('#'+thisinputspan).hide(); } } function nyakilian_range_max_msg_init(thisinput, mess) { jquery('#'+ thisinput).parent().change( function() { nyakilian_range_max_msg(thisinput); }); jquery('#'+ thisinput).after('<span id="' + thisinput + '_span" style="display: none;">'+mess+'</span>'); } nyakilian_range_max_msg_init('highest_price', 'alright that\'s max! '); nyakilian_range_max_msg_init('withindays', 'alright before or later! '); </script>
working example: http://jsfiddle.net/gajotres/an7ax/
$(document).on('pagebeforeshow', '#index', function(){ nyakilian_range_max_msg_init('#highest_price', 'alright that\'s max! '); nyakilian_range_max_msg_init('#withindays', 'alright before or later! '); }); function nyakilian_range_max_msg_init(thisinput, msg) { $(document).on('slidestop', thisinput, function(){ if($(this).val() == $(thisinput).attr('max')) { $(this).parent().after('<span class="slider-msg">'+ msg +'</span>'); $(this).parent().parent().find('.slider-msg').fadein(); } else { if($(this).parent().parent().find('.slider-msg').length > 0 ) { $(this).parent().parent().find('.slider-msg').fadeout().remove(); } } }); }
Comments
Post a Comment