<div data-role="fieldcontain">
<label for="slider-2">Input slider:</label>
<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" />
</div>
Hi
is it possible to make non editable (user not able to change text field ) which is display front of slider using jquery mobile?
secondly how to reset the value of slider on click button..?
I have one more problem How to set current date on text field(on openng pop up screen) using datebox ?
http://jsfiddle.net/ravi1989/uhdYv/
I open the pop up screen using (+) Button i need to set current date on date field?
Adding disabled attribute will make it non-editable.
<div data-role="fieldcontain">
<label for="slider-2">Input slider:</label>
<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" disabled />
</div>
Check this JSFiddle
I tried .slider("refresh") but it is not working. So made a small work around like
$('button').on('click', function(){
$('input').val('');
});
Check this JSFiddle
for hide slider text box you can do it by CSS
<style type=text/css>
input.ui-slider-input {
display : none !important;
}
</style>
or if u want to keep visible but not editable then
try this
<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" onkeypress="return false;"/>
here fiddle
for reset the slider value
.slider("refresh");
here is link Slider
Related
The last radio shows like this:
radio background
When selected the icon background goes away. I tried toggling every single background from dev tools to no avail. Removing the icon images from project folder fixed the background, but renders my checkboxes useless, as they can't be visually checked without the images, so it's no solution. How do I fix this annoying bug?
EDIT:
I will assume the downvotes are because I did not provide code.
Here:
<!-- html stuff -->
<label for="21">
<input id="21" type="radio" name="bbNumber" value="1" />
Percent(%)
</label>
<label for="22">
<input id="22" type="radio" name="bbNumber" value="2" />
Number
</label>
<label for="23">
<input id="23" type="radio" name="bbNumber" value="0" checked />
Disable
</label>
<!-- more html stuff -->
JS
$(function(){
//unrelated stuff
$('input[type="checkbox"], input[type="radio"]').checkboxradio();
//some more stuff
});
No custom CSS meddling with radio. The only CSS I have used is for jQ - Autocomplete.
jQuery v 3.3.1
jQ UI v 1.12.1
Black Tie theme from Themeroller > Gallery
After a lot of fiddling, I came up with this crude, but working solution. The background in question belonged to an auto-generated span element from jQ-UI. I spotted the correct background image, wrapped all the radios in a unique div and applied the following CSS rule:
#id span.ui-checkboxradio-icon {
background-image: url('/PATH/TO/BACKGROUND.PNG') !important;
}
This is really bugging me. I am using the Chrome Ripple Emulator to test my mobile app. And I can not change the value of the slider by sliding the button when using Ripple. If I disable Ripple I can slide the slider. Has anyone experienced this?
<div class="ui-block-b">
<div class="ui-bar ui-bar-c" style="height: 78px">
<input type="range" name="slider-2" id="slider-2" data-highlight="true" min="0" max="100" value="50" data-mini="true" />
</div>
</div>
I'm pretty new to JQuery Mobile (using v1.3.1) and I'm not sure what I'm doing wrong here. I have a field-contain div with a label and a text/search input in it. When I resize the window the following happens:
First the searchbox jumps onto a new line (I could live with that), but then when I resize it further, it eventually gets taller and covers the label (I obviously cannot live with that :P ).
Here's the code:
<div data-role="fieldcontain">
<label for="city-location">Location:</label>
<input type="search" name="location" id="CheckCityNameInput" value="" data-mini="true" data-inline="true" />
</div>
<input type="button" data-inline="true" data-icon="search" data-iconpos="left" value="Locate city" data-mini="true"/>
This happens with Chrome and Firefox (I didn't test other browsers). Any idea what I'm doing wrong here?
Also when I resize it to the max, a "line" appears between the text input and the button... any idea why?
Damn, it was a conflicting CSS rules on the labels. Good to know that a float:left rule on a label would have this effect though.
Thanks for your help Gajotres.
jQuery mobile, while amazing in many ways, tends to be frustrating at times. In this instance i am trying to dynamically create one of the very nice buttons that the library has.
Basically what i want to do is enter text into an input field and when spacebar is pressed it creates a jQuery mobile button with the text.
My js works beautifully when im using just jquery to make the buttons etc but when i use jqm the but initialises to class=ui-btn-hidden for some reason.
Anyone with experience on jqm please help
Here is an example:
http://jsfiddle.net/WEyyh/3/
JS
$('#createButton').bind('click', function() {
$('#buttonPlaceHolder').append(''+$('#buttonText').val()+'');
// refresh jQM controls
$('#home').trigger('create');
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<input type="text" id="buttonText" placeholder="Enter Button Name"/>
<input type="button" id="createButton" value="Create Button" />
<div id="buttonPlaceHolder"> </div>
</div>
</div>
I have a page with several sets of radio buttons that are used to set options. When one clicks on specific ones, others are selected by default using click event handlers. The functionality works perfectly, but there is an issue with the button's visual state.
I'm using jQueryUI's .buttonset() method to improve the aesthetics, and when I trigger a .click() event programatically, the button does not change state visually. This can result in the current options being quite different from what appears on screen.
Sample code to illustrate the problem:
<fieldset>
<label for="button1">Button 1</label>
<input type="radio" id="button1" name="test" />
<label for="button2">Button 2</label>
<input type="radio" id="button2" name="test" />
</fieldset>
$('fieldset').buttonset();
$('#button2').click(function() {
alert('button 2 clicked');
});
$('#button2').click();
I also set up a fiddle so you can see it in action, if you so desire: http://jsfiddle.net/T5MGh/
As you would expect, the alert box pops up on page load as it should, but the button does not change visually as it does from a user-click.
Any thoughts?
You can click the actual label that the button set uses, like this:
$('[for=button2]').click();
This works because your structure looks like this after .buttonset():
<fieldset class="ui-buttonset">
<label for="button1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">Button 1</span></label>
<input type="radio" id="button1" name="test" class="ui-helper-hidden-accessible">
<label for="button2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right ui-state-active ui-state-hover" role="button" aria-disabled="false"><span class="ui-button-text">Button 2</span></label>
<input type="radio" id="button2" name="test" class="ui-helper-hidden-accessible">
</fieldset>
It doesn't work initially because of how jQuery UI does it, it relies on the click coming through the <label>, and the defult browser behavior actually clicking the <input> from that.
It may appear that in more recent versions of jQuery / jQuery UI, the behavior has changed, rendering the behavior of the original code posted as this question to what the author of this question wanted (clicking the button from code takes care of both invoking the event and visually changing the button).
You can see that in the referenced jsfiddle as well. So it seems this answer is only relevant for older versions of jQuery / jQuery UI.