The answer to this question will probably give me a "doh!" moment, but where can I find a working selectmenu plugin that work with a late(ish) jquery ui version?
Iv tried from all of these places, but none seem to work:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
https://github.com/fnagel/jquery-ui
http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html
http://jqueryui.com/download
If you believe any of them should work, please point me in the right direction so that I may be able to investigate why it doesnt work for me.
I had the same problems. But now I solved it:
1) Take the JavaScript-Selectmenu Source-Code from:
http://view.jqueryui.com/selectmenu/demos/selectmenu/default.html
It is a version from jQuery UI 1.9.
So because 1.8.17 does not know _super, change _super to the old one:
//this._super( key, value );
$.Widget.prototype._setOption.call (this, key, value);
In the function "drawmenu" change "select" to "selected"
(this.menu.menu({ selected: )
2) Enhance jquery.ui.widget.js with the following functions from 1.9m5 (_delay from 1.9m6):
_bind, _delay.
add "this.bindings = $();" to _createWidget.
add "this.bindings.unbind( "." + this.widgetName );" to destroy.
3) Take this css and include it:
.ui-selectmenu-menu { padding: 0; margin: 0; position:absolute; top: 0; display: none; }
.ui-selectmenu-menu .ui-menu .ui-menu-item a { padding: 0.3em 1em 0.3em 1em; }
.ui-selectmenu-menu .ui-menu li.ui-state-disabled { padding: 0.3em 1em 0.3em 1em; }
.ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup { font-weight: bold; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0 0; }
.ui-selectmenu-open { display: block; }
.ui-selectmenu-button span.ui-icon { right: 0.5em; left: auto; }
.ui-selectmenu-button span.ui-button-text { text-align: left; padding: 0.4em 2.1em 0.4em 1em }
4) jQuery UI 1.8.17 has a menu-Widget. It's part of the autocomplete. Extract it from there and put it in a new file.
Hope this helps
Wolfgang
update for those interested:
https://github.com/fnagel/jquery-ui
was recently updated and the code works with jQuery 1.10.1 and jQuery UI 1.10.3
Related
I have been trying to get my jQuery UI Select dropdown to be aligned on Chrome for some time. Its off by 1px however the list and the parent span.ui-selectmenu-button are both "151px".
All other browsers display it correct.
I've been going through the computer styles one by one but can't find anything.
Its instantiated with the common:
$("#mainlanguage").selectmenu();
And the select box which jQuery uses has basic styling on it. (SCSS)
jquery ui language !select
.mainSearch{
.ui-selectmenu-button {
background:$upsbrown;
outline-style:none!important; // reset
&.ui-state-hover{
border:0;
border-radius:0;
}
border:0;
border-radius:0;
left: 63.3%;
span{
background-color: $upsbrown;
background-position: 93.5% center;
//border-top: 1px solid $navtext;
color: $navtext;
font-size: 11px;
line-height: 18px;
position: relative;
padding-left: 6px;
max-width: 151px;
height: 21px;
z-index: 400;
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
}
}
This has been asked for an older version, but no satisfying answer.
When viewed on small screen, the jQuery Mobile doc uses a multi-level menu panel that slides in when tapped.
I tried copying the code but this is all I got:
Apparently you also need to specify data-role="collapsible" on lis with sub-menu, and some other attributes, which is not really ideal.
Surely there are people who use jQuery Mobile who also need the menu on their mobile website. But it is nowhere in the documentation.
Has anyone figured out how to do it without reinventing the wheel?
Or does jQuery Mobile simply not support this kind of menu without manually coding everything?
If you check page source, you will notice that uls' within the panel have no data-role="listview" and lis' that contains sub-elements are given data-role="collapsible".
That's not all, on mobileinit event, the aforementioned uls' are converted into listview using the below code.
$(".jqm-navmenu-panel ul").listview();
Moreover, padding and margin are removed/modified on all panel's elements to get them stick to each others.
.jqm-navmenu-panel .ui-listview > li .ui-collapsible-heading {
margin: 0;
}
.jqm-navmenu-panel .ui-collapsible.ui-li-static {
padding: 0;
border: none !important;
}
.jqm-navmenu-panel .ui-collapsible + li > .ui-btn,
.jqm-navmenu-panel .ui-collapsible + .ui-collapsible > .ui-collapsible-heading > .ui-btn,
.jqm-navmenu-panel .ui-panel-inner > .ui-listview > li.ui-first-child .ui-btn {
border-top: none !important;
}
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
padding-left: 1.5em;
color: #999;
}
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn.ui-btn-active {
color: #fff;
}
.jqm-navmenu-panel .ui-btn:after {
opacity: .4;
filter: Alpha(Opacity=40);
}
.jqm-navmenu-panel ul li:first-child a{
border-top: none;
}
Demo
I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.
Here's the problem, i just use these functions.
$(document).ready(function(){
$("#progressbar").css({ "background": '#FF0000' });
$("#progressbar").progressbar({ value: 10 });
});
http://jsfiddle.net/jtf7M/1/
How do i make this fill properly, step by step?
CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.
Edit:
If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:
<style>
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content {
border: 1px solid #AAA;
background: white;
}
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
-khtml-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-header {
border: 1px solid #AAA/*{borderColorHeader}*/;
background: #CCC;
}
</style>
I think there is no jQuery ui lib load on that jsfiddle.
But you are doing right.
http://jqueryui.com/progressbar/#animated
I am rendering a jQuery combobox, but the height of input element does not match the height of toggle button as shown in screen shot below. This is happening in both, IE 9 and FireFox 13.
The style being used for jQuery combobox is as below.
<style>
.ui-combobox {
position: relative;
display: inline-block;
}
.ui-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* adjust styles for IE 6/7 */
*height: 1.7em;
*top: 0.1em;
}
.ui-combobox-input {
margin: 0;
padding: 0.3em;
}
.ui-autocomplete { height: 200px; overflow-y: auto; }
</style>
You should update your combo-box widget from the jqueryui page. and make sure that you use the latest jquery-ui (this issue was fixed recently).
this helped me...
I've implemented the jQuery datepicker. It seems to be working fine but the calendar is too large.
jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png
The site I'm working on has many layers of stylesheets and parent pages and controls. And I don't seem to be able to isolate what is making it large. (Sorry, the site isn't public.)
It appears the calendar is based on a font size. I tried wrapping my textbox in a div with a smaller font but it seems to ignore that. Is there any way to specify a fixed font size?
While changing the font size for .ui-widget works, I got the best results with the following.
#ui-datepicker-div { font-size:11px; }
Not only does this seem to do exactly what I need, it is also unlikely to impact any other jquery-ui widgets.
try setting font-size for class .ui-datepicker
.ui-datepicker {font-size:11px;}
http://jsfiddle.net/pxfunc/ps5cA/
It takes some digging in firebug but I have included one of the versions I use to reduce it. The key is to copy the exact styles from the jQuery-ui CSS file and put them in the head of the page you need them or in a CSS style sheet after the jQuery-ui style sheet.
.ui-datepicker {
padding: 0.1em 0.1em 0;
width: 11em;
}
.ui-widget {
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
}
.ui-datepicker th {
border: 0 none;
font-weight: normal;
padding: 0.2em 0.1em;
text-align: center;
}
.ui-datepicker th span {
font-size: 11px;
}
.ui-datepicker td span, .ui-datepicker td a {
padding: 0.1em;
}
.ui-datepicker td {
padding: 0.9px;
}
.ui-datepicker .ui-state-highlight {
height: 12px;
margin-bottom: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
font-size: 10px;
font-weight: normal;
text-align: center;
}
.ui-datepicker .ui-datepicker-title {
line-height: 13px;
}
.ui-datepicker .ui-datepicker-title span {
font-size: 11px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
margin-left: -8px;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
height: 15px;
top: 1px;
width: 15px;
}
.ui-datepicker-next-hover .ui-icon {
height: 16px;
width: 16px;
}
Adding this to the site.css worked for me
.ui-widget {
font-size: .7em !important;
}
you can change "jquery-ui-1.10.4.custom.css" as follows
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Our calendar was big and ugly looking with hard to click month arrows. It was caused by mismatching versions of the jquery-ui css and jquery-ui js includes.
version numbers must match e.g.
jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js
but also needed the css recommended above
#ui-datepicker-div { font-size:11px; }
I agree with mdmullinax. You have to change the font size for the whole class
.ui-datepicker-div { font-size:11px; }
because datepicker is not controlled by id so below change has no impact on size
ui-datepicker-div { font-size:11px; }
h