How to use Tooltips with JQM Sliders? I would like to add Tooltips to my JQM Ranges (e.g. 1-5), saying at what point the ui-slider-handle is positioned ("Your choice: 3"). I've tried qTip:
$('#content a[href]').qtip({
content: 'i am a qtip'
});
but it does not work on my mobile device. I would like to let the user know which choice he has made (before he gets off the screen with his thumb).
There is an extension for jQuery Mobile that provides this functionality that can be found here
What you will do:
Add a data attribute of data-popup-enabled="true" to your input element to display the tooltip.
Copy the JavaScript code on the site and add it to your solution
Copy the CSS ruleset on the site and add it to your solution.
Here's an example of how your input element for the slider should look:
<input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" data-popup-enabled="true">
Related
I'm creating a large dynamic form and want to create checkboxes and radio buttons like:
<label><input type="radio" name="myradio"><span class="foo">This is the Label</span></label>
This is for a number of reasons. There's nothing wrong with this as far as HTML spec goes.
But, jquery mobile generates a DOM error for every checkbox or radio button generated this way. It really seems to want:
<input type="radio" name="myradio" id="radio1"><Label for="radio1">...</label>
Any workarounds? Ideas?
This works fine: http://jsbin.com/ofuhaw/228/edit with latest JQM
Maybe you should just swap the order of elements.
I need to set up two jQuery UI date pickers to always be displayed. I know there's an easy way to do this with DIVs, but I can't find anything on how to do it for inputs. I've tried the "show" method in the jQuery UI documentation, but that just acts as a click on the input on page load, which isn't what I'm looking for.
I just tested the code below and it always remains on the page. You will need to handle the selection/click events by passing options the datepicker in the javascript. I added the JS for when the user selects a date... that should give you enough to go off of.
HTML:
<div id="test"></div>
<input type="text" id="date_input">
Javascript:
$('#test').datepicker({
onSelect: function(date, obj){
$('#date_input').val(date); //Updates value of of your input
}
});
I am using this incredibly awesome jquery mobile oriented datepicker that I would like to customize based on device size. I saw some suggestions pointing towards modifying the CSS but I am unable to trap the event that creates the popup dialog that comes up with the calendar.
Is there a jsfiddle that I can look and learn from?
Looking at the examples on the page you provided, it appears to be binding to the vmouseclick event. So you should be able to use click, vmousedown, vmouseup depending on your needs.
So if you had HTML like:
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox"}'>
Your JQM Would be like:
$("mydate").click(function(){
// Do something
});
I don't see any options of configs to adjust the size of the DateBox upon opening. So you would want to examine the CSS and class settings of the DIV when it is created and then add your own CSS to override the CSS they use (<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />), or download the CSS and Edit it.
There is no default jsFiddle for this, yet I moved an example into one for you to play with if you like: http://jsfiddle.net/Twisty/pNQeD/
The mobiscroll documentation states
This preset enhances a regular HTML select to select the values with a scroller. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset.
The sample HTML code they provide uses inline styling to hide the original select element
<select name="City" id="select" style="display:none">
However, when I do this and setup the mobiscroll replacement to appear inline
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
I find that although the scroller appears I still end up with what looks like an input element above it. This does not happen in their demo code but there I note that what they do is something like this
<div id="select_cont" style="display: none;">
<select name="City" id="select">
but that simply hides everything including the mobiscroll replacement. Looking under the covers I found that calling
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
introduces a dummy input element into the DOM.
<input id='cities_dummy'...
I can get the dummy to hide itself by issuing a
$('#cities_dummy').css('display','none')
immediately after creating the scroller. However, I cannot understand why things are working differently in the demo code. I have noted that they are using jQuery Mobile v 1.1.1 whilst I am using the very latest version.
Perhaps this issue is related to versions? Or is there something else at play here? I'd much appreciate any help.
I figured it out. It is all down to the
inputClass:i-txt
bit in the scroller options settings. In the demo code they are probably playing with this class via script depending on the value of the display property in the options object. The point is this - in order to get the original select to disappear when the scroller display is set to "inline" you must define i-txt (or whatever input class you use) as
.i-txt{display:none}
(Follows on from Can you define tooltips in Dojo wijit template?)
I'd like to be able to popup some help text if a user hovers or keeps the focus on a Dojo wijit for some time. I know that these wijits come with some prompt behaviours such as when they are empty or on validation errors, but I'd like to be able to prompt regardless of the content of the control. For example:
<input name="tooltipTesting"
data-dojo-attach-point="tooltipMe"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="placeHolder:'Type Something',
required:true,
value: '${blah}'" />
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipMe'">
Got to love hovering over links. Sometimes you a get a free tooltip.
</div>
Programmatic definition of the tooltips works for plain HTML elements like anchors, but nothing I do appears to associate a tooltip with other Dojo controls. Advice?
You can programatically connect the widget to the tooltip using
tooltip.addTarget(widget.domNode);
dijit.Tooltip connects to the DOM node(s), not to Dijit Widgets (i.e. javascript objects), but you can always use widget's reference to its root DOM node accessible via widget.domNode.
There is also a problem with your markup: dojo-dojo-attach-point does not assign an id to the widget (you reference from the Tooltip via connectedId). Define id property <input id="tooltipMe"> to do so, then the ValidationTextBox itself and also the root DOM node of the ValidationTextBox will have the same id. Note that you cannot use hardcoded IDs in the widget templates.