I am trying to add a horizontal toolbar at he top of my application (uses android webview and jquery mobile) that contains a bunch of buttons (too many to fit across the screen in a single line).
The problem that I am facing is that instead of hiding the extra buttons, they wrap around to the next line. What I would like is for them to hide and be accessible by scrolling them horizontally just like a native ListView would allow me to do.
I have tried to use a ListView to put the buttons in, and pass the button presses to the javascript code by doing loadUrl(), but this causes other issues and is not usable in my case (it automatically hides the soft keyboard).
I have tried the following code (along with this code wrapped in a jquery mobile toolbar):
<ul data-role="controlgroup" data-type="horizontal">
<li>B</li>
<li>I</li>
<li>U</li>
<li>S</li>
<li>ol</li>
<li>ul</li>
<li>in</li>
<li>out</li>
<li>sub</li>
<li>sup</li></ul>
But this just wraps around to the next line.
Try putting the ul in a div, and set the div's width property to a large value, enough to accomodate all the buttons. Then set the overflow property to auto, and you should be good to go.
Related
The bug is described in detail here https://bugs.webkit.org/show_bug.cgi?id=134596
Relevant part is this:
Without Scrolling you should be able to click any of the radio buttons
Now scroll down the page
Trying to click any of the radio buttons on the left results in an
offset click. One of the radio buttons below your click will receive
the event.
Expected: The radio button I clicked on gets focus
Actual: The click event is offset the amount the iframe was scrolled.
Main difference is im not using an iframe, just a div, but the same problem.
If I remove either overflow:auto (but it wont let me scroll then) or -webkit-overflow-scrolling property the correct clicks happen. It looks like it was fixed in a nightly, but this has to work now and for backwards compatibility. Is there a hack to get this to work? My best idea so far is to just not have that -webkit-overflow-scrolling prop for iOS until it works, but that kinda sucks because momentum scrolling is what makes it feel much more like an app.
I have a custom radio button that has a colorized and larger circle for the button. It's implemented using CSS as found in http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953
However, when you have display:none in your CSS for the radio button, it confuses VoiceOver and the element is no longer read as a radio button even though the <input> type is 'radio'.
<input type="radio" value="1" id="rad1" name="station"><label for="rad1"><span></span>Helium</label>
<input type="radio" value="2" id="rad2" name="station"><label for="rad2"><span></span>Hydrogen</label>
input[type="radio"]
{
display:none;
}
I tried adding role='radio' to the <input> tag but that didn't help. When VoiceOver doesn't think it's a radio button, then you lose valuable interaction information. VO no longer says "radio button" or "1 of 4" or "checked".
All I can think of is not using display but rather using position and left to force the original radio button circle to be off the display.
input[type="radio"]
{
position: absolute;
left: -1em;
}
This does seem to work but doesn't seem "right". Is there something more elegant? Typically, with screen readers, you don't want to move an element off the visible display because with a screen reader, you can still put your focus on the item through various navigation techniques.
Also, when the circle itself is just pushed off the display, VoiceOver still knows about it and draws its focus rectangle to include the item that's off the display. This causes the rectangle to span all the way to the left edge.
Edit: Using left:-1em doesn't work either because it causes the display to scroll to the item that's off the screen when you swipe with VoiceOver on. My next attempt is to not hide the radio buttons (ie, don't use display:none) but leave the buttons there but cover them up with the background image used for the buttons (as explained in the webdesign url). This seems to work. I have
left:-20px;
position: relative;
for my <span> tag (which is where the image is displayed) and that causes the image to be displayed on top of the radio button circle.
So the end result is that, visually, you don't see the native radio button circle but rather see my image circle, and VoiceOver still thinks everything is a radio and announces "1 of 4" and "checked".
I didn't mark this as my answer to my own question because it still feels like a hack. It sounds like a bug with VoiceOver that it doesn't announce the element as a radio button.
display:none and visibility:hidden will hide content from screen readers. Using an absolute position off the screen is called "Screen reader text", this will hide the content visually but still have it read by a screen reader. This is true for all desktop and mobile screen readers.
So if you use display:none your radio button will be ignored, this is correct behaviour. The usual solution would be to place the radio button off the screen, but you are right that VoiceOver then places the focus on the left edge of the screen. Other (desktop) screen readers won't do that, it's just a weird behaviour of VoiceOver (imho a bug in VoiceOver). I wouldn't worry about this too much as this is just how VoiceOver works, but obviously your own suggested solution (placing the radio button behind the image) is possible in this case and is far better as the visual VoiceOver focus is then in the correct place. I wouldn't call it a "hack" - at least not any more that the very common practice of "screen reader text" is essentially just a hack.
Note there are often situations where you need to add some extra information for screen readers like VoiceOver where you don't have an image to hide the text behind, then placing the text off the screen may be the only option and the visible VoiceOver focus at the edge of the screen is a trade-off you need to accept.
A good summary of different techniques how to hide content can be found here: http://webaim.org/techniques/css/invisiblecontent/
Another option is to use role="radio" on the element you want screen readers to focus as the radio button. You'll want to make sure you add aria-checked, aria-disabled, etc as needed. Lastly, you can use aria-hidden on the real radio button to make screen readers ignore them.
More info. about role="radio": https://www.w3.org/TR/wai-aria-1.1/#radio
I use CSS to hide the actual <input type=radio/> under the <label>-graphic by using z-index: 2; or something else higher then the <input>'s z-index on the <label>.
This is proven to work even on older iOS where pressing the label didn't focus/activate the input.
Another way is to hide the <input type=radio/> by hiding it off-screen like this:
position: absolute;
left: -999em;
(If you minus this could you explain why? This is the most accessible solution for all iOS versions and other User Agents/Assistive Technologies combos)
I have created tab layout as in this example http://jqueryui.com/demos/tabs/#bottom with controls bellow the panel. I have 3 default tabs, which can't be delted and than user can add some more tabs and also delete them.
The problem is that the default tabs should be on the top like there http://jqueryui.com/demos/tabs/#default so because UI doesn't support two control panels, I have created new element looking like control panel on top <p class="ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top tabs-header-top"></p> with fixed heigth. But now I don't know how to move the default tabs to the right position. I tried adding them position: relative; top:-20em; ,but to make this working, the whole tab container must have fixed heigth and that's bad, because I need it to stretch within the window to be as big as possible.
So is there any other way how to move the default tabs to the top?
Thanks
edit: here is example of my idea, but achieved with fixd heigth http://jsfiddle.net/L6QjK/2/
To be clear: This method is technicaly working, so the questin is not about making tabs with two control panels, but about positioning the tabs
Not sure if it will work, but try creating two DIVs, one with default styling and one with the bottom styling:
<div class="tabs">...
<div class="tabs tabs-bottom">
and then use $(".tabs").tabs(...)
So finally I managed to create two control panels on my own by changing the jquery ui code.
If somebody is trying to make same thing as I here are some tips:
1) To create multiple control panels, find this.list=this.element.find("ol,ul)").eq(0)
now, the .eq(0) selector causes, that onlz the first ul or ol is made to control panel, so I simply modified the find selector to this :this.list=this.element.find("ol,ul:lt(2))") and the :lt(2) selector will make first two ULs to two control panels. Now we have two control panels and it is all about css positioning, you can get isnpired here http://jqueryui.com/demos/tabs/#bottom to move one control panle to the bottom.
2)I am using schema, that the first control panel contains static tabs, and to the second one are added dznamic tabs. So I also needed to change the target during adding tabs. For this you have to find h.appendTo(this.list) and change it to h.appendTo(this.list[1]) because ad.1) this.list now contains two elements and I want the tabs add to the second one.
So finaly to make two control panels tab layout isn't that hard
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
On my jQuery Mobile page, i'm using a horizontal control group for some buttons.
But in some languages the text within these buttons is too long.
Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.
this is the base code:
<div data-role="controlgroup" data-type="horizontal">
short button
really really really insanely long button is really really insanely long. No really, who makes buttons this big?
</div>
and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis
.ui-btn-inner{
white-space: normal !important;
}
On the third page of this fiddle the problem is demonstrated
http://jsfiddle.net/koesper/R8Kwe/
Anyone have any ideas how I might tackle this?
Thanks in advance,
Casper
ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button
You could set widths for the links in your control-group:
.ui-page .ui-content .ui-controlgroup a {
width : 49%;
}
This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/
Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).
Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.