Is there a simple way to generate a 5 star rating element in Jquery-mobile?
Similar to http://orkans-tmp.22web.net/star_rating/.
You can use any jQuery plugin that fulfills this task. In the past, I have used the jQuery Star Rating plugin at
http://www.fyneworks.com/jquery/star-rating/
The only thing you need to think about is to stop jQuery Mobile from rendering the radio buttons with its own style. You can achieve this by adding data-role="none" to the input tag, see
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-all-native.html
I find the jQuery Raty plugin a lot easier to use!
I could never get the class="star" to work with fyneworks.
If you're looking for a mobile rating component, take a look at the http://demo.mobiscroll.com/rating
EDIT: And the scroller integrates with jQuery Mobile Themes.
Tutorial for building a rating system with jQM + Rating & Grading scroller here.
i have managed to use http://www.fyneworks.com/jquery/star-rating/ together with jquery-mobile (version 1.4.5)
the above mentioned trick with data-role="none" on the input field does not work.
you need to render an own tag around. I used the most simple example on page http://www.fyneworks.com/jquery/star-rating/#tab-Testing
<div data-role="none">
<input name="star1" type="radio" class="star" value="1"/>
<input name="star1" type="radio" class="star" value="2"/>
<input name="star1" type="radio" class="star" value="3"/>
<input name="star1" type="radio" class="star" value="4"/>
<input name="star1" type="radio" class="star" value="5"/>
</div>
adjustments to color and size is quite difficult and needs changes to the star.gif and .css file
Here's my solution with Jquery Mobile.
Hope you like it:
<style>
.rated { background-color: yellow !important; }
.rating a { border: 0px !important; }
</style>
<div class="rating" id="first">
</div>
$(".rating a").on("vmouseover", function () {
var id = $(this).parent().attr("id");
$("#" + id + ".rating a").each(function (i, v) {
$(v).removeClass("rated");
});
$(this).prevAll().each(function (i, v) {
$(v).addClass("rated");
});
$(this).addClass("rated");
$("#" + id).data("vote", $(this).data("vote"));
});
https://jsfiddle.net/lgrillo/cz7z479j/
Related
I'm creating custom radio / checkbox icons by adding a pseudo-element on a label element with the :before css rule. I've added aria-hidden to the label element, but VO on iOS is still reading the pseudo-element.
I understand that some screen readers will ignore an aria-hidden attribute if the element is providing additional context (this is the case for label elements, since they provide additional information about a connected input element). To get around this I've added a aria-label attribute, but again, this is ignore by VO on iOS. This seems to fix the same problem for other screen reader, browser, and device combinations (Narrator and IE / Edge for example).
I've also tried to add a child span or i element to the label and add the :before css rule and aria-hidden attribute to that, but VO on iOS is still reading the pseudo-element.
Does anyone have any advice for having the screen reader read the correct content?
My basic approach is below (note: won't work in a jsfiddle since I'm not loading my font-face).
You can also view the first example here:
http://uatwww.surveygizmo.com/s3/4102902/Basic-Radio
<input type="radio" id="radio1" value="1" name="example" />
<label for="radio1" class="custom-icon" aria-hidden="true" aria-label="example 1">Example 1</label>
<input type="radio" id="radio2" value="2" name="example" />
<label for="radio2">
<span class="custom-icon" aria-hidden="true" aria-label="example 2"></span>
Example 2
</label>
<input type="radio" id="radio3" value="3" name="example" />
<label for="radio3">
<i class="custom-icon" aria-hidden="true" aria-label="example 3"></i>
Example 3
</label>
<style>
input[type=radio] {
opacity: 0;
position: absolute;
border: 0;
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
input[type=radio] + .custom-icon:before,
input[type=radio] + label .custom-icon:before {
content: "\26aa";
}
input[type=radio]:checked + .custom-icon:before,
input[type=radio]:checked + label .custom-icon:before {
content: "\26ab";
}
</style>
I think the problem is that you are giving confusing instructions to both the browser and screenreader. You have an invisible input with CSS content attached to it, which is then associated to a label which is aria-hidden but also has an aria-label. You’re definitely going to get inconsistent interpretations of that markup across different browser/screenreader combinations.
I’ve used Heydon Pickering’s custom control method successfully on a bunch of sites with no problems. It seems like a simpler version of what you’re aiming for. It accessibly hides the input from everyone except screenreader software, puts the CSS content on a span instead of the label or input. He doesn’t use any ARIA, but if more recent versions of VoiceOver announce the CSS content you can just put aria-hidden on the span and let screenreaders treat the label and input as normal.
Concerning radio1, the W3C says:
If the current node is hidden and is not referenced by aria-labelledby or aria-describedby, nor referenced by a native host language text alternative element or attribute, return the empty string.
So as long as you reference an element even though it has the aria-hidden attribute, it will be spoken out.
If you want to give an alternative text for an element, you have to set the aria-label attribute on the element:
<input type="radio" id="radio1" value="1" name="example" aria-label="example 1" />
<label for="radio1" class="custom-icon" aria-hidden="true">Example 1</label>
Pseudo elements have different beheviours on browsers, and as you can see the alternative text for :before elements will be given even though the associated element is marked with the aria-hidden attribute.
I use jquery mobile for build a Phonegap application. I create any radio sets like this :
I want to checked a radio in a switch case!
switch (font_family){ case 'tahoma': $('#radio-1').checked(); ... }
Can you help me?
From the picture I am assuming you are using jQM version 1.3.x, however this solution works with 1.4.x too.
Assuming you have markup similar to this:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font:</legend>
<input type="radio" name="thefont" id="radio-1" value="arial" checked="checked" />
<label for="radio-1">Arial</label>
<input type="radio" name="thefont" id="radio-2" value="verdana" />
<label for="radio-2">Verdana</label>
<input type="radio" name="thefont" id="radio-3" value="tahoma" />
<label for="radio-3">Tahoma</label>
</fieldset>
The script to switch to Tahoma would be:
$("[name='thefont']").prop( "checked", false ).checkboxradio( "refresh" );
$("#radio-3").prop( "checked", true ).checkboxradio( "refresh" );
The first line unchecks all boxes and the second checks the tahoma box. In jQM you must refresh the checkboxradio widget after changing values.
DEMO
I'm trying to create something like the following in jQueryMobile 1.4.2 - i.e. a list of radio buttons with content to explain each option. This is a jquery screenshot from version 1.2 from this great article best practices article. The size of the description text is smaller than the body text.
However when I copy his sample code directly from it comes out sized incorrectly like this (other controls shown for reference size).
Here's the sample code
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">
<h3 class="ui-li-heading">jQuery Mobile</h3>
<p class="ui-li-desc">Easy and great for all project from smartphones to dumbphones</p>
</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">
<h3 class="ui-li-heading">Sencha Touch</h3>
<p class="ui-li-desc">Great for complex apps but a higher learning curve</p>
</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">
<h3 class="ui-li-heading">jQTouch</h3>
<p class="ui-li-desc">Simple, lightweight, but focused on webkit</p>
</label>
</fieldset>
It turns out the reason the above code no longer works is that it references css class name ul-li-desc which used to be in jquery mobile 1.2.1 css but is no longer in the latest css for version 1.4.2.
The new 1.4.2 version has sample code for something very similar in the ListView component that looks like this
The css class that reduces the size of the font here is .ui-listview>li p
So what's the correct way in jQuery Mobile 1.4.2 to create a radio button list with added content that isn't huge?
The easiest way to undetstand jQM CSS structure, is to firebug current view. jQM changes HTML markup based on widget as it adds extra elements and wraps others in order to each the final UI.
Bear in mind, you have to be specific and caucious when overriding jQM styles. Most of the widgets share the same classes (global classes).
Also note that as of jQM 1.4 to increase performance, the team has reduced the amount of inner elements that are you used for styling widgets.
/* <p> within <label> */
label p {
font-size: .9em;
font-weight: 400;
display: block;
}
/* <h3> & <p> within <label> */
label h3, label p {
margin: .45em;
}
/* adjust position of radio button itself */
.ui-radio input, label.ui-btn:after {
top: 35% !important;
}
Demo
I'm working on a Pyramid (python) web application, and trying to create a responsive-ish design that will gracefully switch between a desktop-sized browser and a mobile browser. I'm wanting to use Twitter Bootstrap for the desktop UI and jquery mobile for the mobile UI.
My CSS is like this:
#charset "utf-8";
#import url("http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css") (max-width: 480px);
#import url("css/bootstrap.min.css") (min-width: 481px);
This actually seems to be working well in switching styles on the fly as the window resizes. If it's a larger window, it shows my desktop UI styles, and once it hits the "mobile" threshold it shows the jquery mobile UI. Sweet.
My problem appears to be in my HTML/mako template, though. I've placed my .js includes at the bottom of the page. The important snippet is:
[...snip..]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>
I have radio buttons with labels on the desktop UI like so:
<label>
<input type="radio" name="answer" id="1" value="1"> 1</label>
<label><input type="radio" name="answer" id="2" value="2"> 2</label>
<label><input type="radio" name="answer" id="3" value="3"> 3</label>
<label>
<input type="radio" name="answer" id="foo" value="foo">foo
</label>
When all .js includes are active, the actual radio input control is not inline with the label text; instead it appears to be set as a block element and is appearing onscreen on its own line after the label. I've tried tweaking the CSS to override the radio input styles but the best I can get so far is setting the radio type to inline but it's still appearing after the label, instead of before.
Buuuut, if I comment out the jquery mobile .js include:
[...snip...]
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>-->
<script src="${request.static_url('myapp:static/js/bootstrap.min.js')}"></script>
</body>
then the desktop UI looks correct. Of course at that point I've lost my jquery mobile UI.
So what seems to be happening is something in the jquery mobile javascript is overriding the style includes, but I don't know what or why. Is there a way I can force things to not run the jquery mobile stuff at larger resolutions? Any help or hints?
You may need to disable jquery mobile for these input fields:
from http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html :
if you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:
<label for="foo">
<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
I have this scipt,
<script>
$(document).ready( function() {
$('.add').button({
icons: 'ui-icon-plus',
text: false
}).next().button({
icons: 'ui-icon-minus',
text: false
}).next().button({
icons: 'ui-icon-arrowthick-1-w',
text: false
}).next().button({
icons: 'ui-icon-arrowthick-1-e',
text: false
});
$('.radio-container').buttonset();
});
</script>
<button class="add">Add</button>
<button class="delete">Delete</button>
<button class="left">Left</button>
<button class="right">Right</button>
<span class="radio-container">
<input type="Radio" name="radio" id="radio_1"><label for="radio_1">Radio 1</label>
<input type="Radio" name="radio" id="radio_2"><label for="radio_2">Radio 2</label>
</span>
It works fine with Firefox but failed with Internet Explorer (tested with Internet Explorer 8), radio button shifted down like this:
How do I fix it?
I use jQuery 1.4.2 and jQuery UI 1.8.5.
I hope this code can help you to solve your problem. It works fine in my IE 8.
$('.radio-container').buttonset().find('label').css({"vertical-align":"middle"});
jQuery sets CSS on a label to a margin of 8 pixels. Override and set CSS label { margin: 0px; } to fix it.
I think this has to do more with CSS than it does with the jQuery. For some reason you're styling your radio inputs as buttons--which I question why. But at any rate, I can only suggest hitting F12 on Internet Explorer 8 and take a look at your elements and how they're being represented by the CSS.
You may want to put the CSS as part of your question.