I want to handle slider with hidden check box for scripts using watir.
Can any one help me to resolve this issue?
This would be more like visibility: hidden
Try setting the checkbox's opacity to 0. If you want the checkbox to be out of flow try position:absolute and offset the checkbox by a large number.
HTML
<label class="checkbox"><input type="checkbox" value="valueofcheckbox" checked="checked" style="opacity:0; position:absolute; left:9999px;">Option Text</label>
How many checkboxes do you have at this page? If there is only one then this might work:
browser.checkbox(attribute: attribute-value).when_present.set
Related
I have two dynamic horizontal control groups of radio buttons:
<div class="categories-panel" id="sections-panel">
<fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
<!-- ko foreach: Sections -->
<input type="radio"
data-mini="true"
...
/>
<label data-bind="text:Name, attr:{'for':Id}"></label>
<!-- /ko -->
</fieldset>
</div>
The content of controlgroups is updated by knockoutjs. The markup is updated this way:
self.refreshCategoriesList = function() {
$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
$("#category-choice-fieldset").controlgroup();
};
The problem is: the controlgroups don't fit in one row until I turn of and turn on the display: inline-block property of .ui-controlgroup-controls div in debugger:
before display: inline-block refresh:
http://i890.photobucket.com/albums/ac105/cubius/screen-1.png
after display: inline-block refresh (desired view):
http://i890.photobucket.com/albums/ac105/cubius/screen-2.jpg
How to make jQM always paint my controlgroups in one row?
First of all, the way you select your control group is wrong in this line :
$("#category-choice-fieldset").controlgroup();
Mustnt it be
$("#section-choice-fieldset").controlgroup();
(Maybe a typo)
You could do this in any of the two ways :
Method 1
Works fine in my fiddle. I'd say you move the <script> tag from head to body because page events of jQM dont play well with KnockOut.js and KnockOut.js needs a DOM ready to work properly, AND DOM ready doesnt work well with jQM. So I guess its a vicious loop indeed.
Demo : http://jsfiddle.net/hungerpain/k7UR5/
Method 2
And you could try one more thing in your refreshCategoriesList method:
//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");
Refreshing the entire controls on the page - thats what trigger("create") does
Demo : http://jsfiddle.net/hungerpain/k7UR5/1/
If you are updating the control group (appending, modifying etc) , access the control group like this:
$("#my-controlgroup").controlgroup("container")["append"]($el);
You need to access the control group container. See my jsfiddle for modifying the control group:
http://jsfiddle.net/androdify/WAzs6/
I am using jQuery Mobile. I am attempting to allow the user to change a slider value in two ways. A number, or a percentage. For example, let's say that the total of a metric is $224. So 50% is $112. Well, I want the user to be able to specify $100 manually, OR specify 50% manually.
With this said, I placed a numeric text box and a slider next to each other. The numeric text box appears larger and different from the slider's text box. One thing to note - I have removed the up/down buttons via CSS.
Try as I might, I cannot get these to display the same way. Does anyone know what classes are needed for this? Changes done on pageinit()?
To put elements side by side, use ui-grid layout. For two items, add class ui-grid-a to a div. Then wrap first with div with class ui-block-a and the other one class ui-block-b.
Demo
<form>
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="numbers"></label>
<input type="number" name="numbers" id="number" />
</div>
<div class="ui-block-b">
<label for="slider-6" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" />
</div>
</div>
Optional - Override width of child divs.
.ui-block-a { width: 30% !important; padding-right: 10px !important }
.ui-block-b { width: 70% !important }
For input, you need to adjust input's parent div's height by either jQuery or CSS.
Note: Slider has type=number attribute as well, therefore, you need to override the input box only which has class ui-input-text.
CSS
div.ui-input-text { height: 28px !important }
jQuery
$('[type=number]').closest('div.ui-input-text').css('height', '28px');
I'm having a little trouble dynamically changing a button's theme dynamically. From a different post I learned to use:
<input type="button" data-inline="true" data-mini="true" data-theme="c" id="my-button" value="Save">
<script>
$("#my-button").buttonMarkup({ theme: 'a' }).button('refresh');
</script>
Technically this works, until I mouse over - then the button falls back to data-theme "c". Is there a better way to dynamically change theme?
if you use a button as below
Save2
You can change the theme as below
$('#my-button2').attr("data-theme", "c").removeClass("ui-btn-up-e").addClass("ui-btn-up-c");
check out a live fiddle here http://jsfiddle.net/mayooresan/jfDLU/
I tried to find the answer for this one, but came up with this solution after looking into the DOM structure. I created the below function for toggling the theme on click the button. the hover class needs to be addressed only when changing the theme of the same button you are clicking.
These seems to work for input type button element. (jqm version 1.3.2)
function changeButtonTheme(buttonSelector,toTheme){
var currentTheme = $(buttonSelector).attr('data-theme');
var parent = $(buttonSelector).parent();
$(buttonSelector).attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
parent.attr("data-theme", toTheme).removeClass("ui-btn-up-"+currentTheme).addClass("ui-btn-up-"+toTheme);
//parent.removeClass("ui-btn-hover-"+currentTheme).addClass("ui-btn-hover-"+toTheme);
}
I dont have enough points to post a picture, but I am working on a project and the input text fields are way smaller than it is on the http://twitter.github.com/bootstrap/index.html site. I have <!DOCTYPE html> in the application.html.erb, but it still dont work.
Anyone got any idea on what the problem might be?
The width of textbox may be affected by the parent html tag's width. I cant be sure without seeing the html mark-up. The default width is defined in bootstrap.css for input text field. You can override this width by including desired span classes to the control like this..
<input type="text" class="span3" />
<input type="text" class="span12" />
It would be better to use the chrome inspector to check for the CSS rule for the input field. If that doesnt work, you can add a class or id to the input fields you need and then in a custom CSS file you can set the width of the class or id. This will change the size of your input field. Just make sure that your custom css file comes after the bootstrap css file.
Dynamically injecting buttons into JQM footers seems to be an exercise in frustration. Anyone have a clue how to apply proper formatting for this? Here are several anomalies I found trying to do this:
Multi-column button grids are not properly formatted in the footer
data-corners="false" attribute (to get flush buttons) does not apply to the first and last buttons in the footer
With data-role="controlgroup" data-type="horizontal" for the footer buttons, if there are too many buttons to fit in one row the styling looks weird (since some buttons will have rounded corners, others will not)
If data-role="controlgroup" data-type="horizontal" are omitted for the footer buttons, buttons may be rendered partially off the screen...
In general - argh!!!! Anyone have any success dynamically injecting buttons into a footer? If so, would much appreciate to hear how this was achieved.
Thanks!
Would something like this work:
http://jsfiddle.net/eznh8/7/
JS
$('#addButtonName').click(function() {
var theFooter = $('#addMoreButtons');
var buttonName= $('#newButtonName');
if(buttonName.val() != '') {
theFooter.append(''+buttonName.val()+'');
buttonName.val('');
$('#theHomePage').trigger('create');
}
});
HTML
<div data-role="page" id="theHomePage">
<label for="basic">Button Name:</label>
<input type="text" name="newButtonName" id="newButtonName" value="" />
Add New button
<div data-role="footer" class="ui-bar" id="addMoreButtons">
</div>
</div>
Multi-column button grids are not properly formatted in the footer - this is my response to that.
One thing to check if you are using controlgroup with a href links - make sure your each of the links in the control group has the following CSS;
vertical-align:top;
You will also have to get more control over how the elements look if you are styling them as buttons. I posted a similar discussion over here:
https://forum.jquery.com/topic/jquery-mobile-horizontal-control-groups-creating-a-custom-split-list
https://forum.jquery.com/topic/css-code-to-help-control-entire-button-in-a-jquery-mobile-theme
Hope that helps.