I am using Jquery ui 1.11.4 and its selectmenu to display a select list with about 200 items.
<select id="myselect">
<option>1</option>
...
<option>200</option>
</select>
I would like it show only 40 items plus a scrollbar. I tried the following, but it is not working:
<style>
.overflow { height: 200px; }
</style>
$( "#myselect" ).selectmenu({}).addClass( "overflow" );
Currently, the menu, when it opens, is a long list showing all items.
How can I make it show 40 items only?
Thanks!
Related
I'm having trouble with the JQuery UI accordion widget. I can get the accordion working and the icons showing for a collapsed and expanded accordion, but I get all of the icons and not just the +/- icon.
When collapsed
When expanded
Here is my driver for the JQuery widget
$(function () {
$('.accordion').accordion({
"header" : "h3",
"icons": {
"header": "ui-icon-plus",
"activeHeader": "ui-icon-minus"
},
"heightStyle": "content",
"collapsible": true,
"active": false,
});
});
here is the HTML it is being called on
<div class="accordion">
<h3></h3><!--Left blank to show all the icons showing-->
<div>
<p>This is sample Content</p>
</div>
</div>
The JQuery-UI zip file I downloaded came with 6 files that contained all of the various icons available and it appears like the whole row is showing and gets shifted to the left to hide some icons when the accordion is either expanded or collapsed. Do I have to use the theme roller to roll my own theme and only get the icons I want or if there some height/width/offset settings I need to specify in the driver. I've tried to follow the documentation but it's not been exceedingly helpful.
It turns out there was a css collision between the JQuery UI css
.ui-icon {
width: 16px;
height: 16px;
}
and some css I was using for other parts of the site
.content span {
color : #B47000;
font-size : 1.25em;
width : 100%;
}
Since the <div class="accordion"> was nested within <div class="content"> the css for .content span was overriding the .ui-icon css because JQuery UI inserts <span class="ui-icon ui-icon-plus"> inside the header element to hold the icon.
I changed my css to be more exclusive and that resolved this problem.
/*Adding > fixed the error*/
.content > span {
color : #B47000;
font-size : 1.25em;
width : 100%;
}
I have a jQuery UI accordion with Markup structure
<div id="accordion2">
<h3>title</h3>
<div>stuff texty</div>
<h3>title2</h3>
<div>stuff texty</div>
</div>
However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).
I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used
#media (max-width: 640px) {
.first {
display: none;
}
}
To make them disappear... but it didn't work. Does anyone know how I can go about doing this?
try this as a CSS3 option:
#accordion2 h3:first-of-type
{
display:none;
}
if you cannot support CSS3 then give that first heading a class name and target that.
I have an accordion that displays items I have entered values from some input items - e.g., if I select a date, the accordion displays the selected date etc.
sample screen - top portion is the accordion with selected values and the bottom portion is where I enter the values
Date: Sep 20 2013 | Customer: MLJJ
Date : ______
Customer : _________
I have a div that pops up when a user clicks on the input field for date. I wanted to do the same for the read-only text in the accordion. But the top portion of my date slider is hidden by the accordion. I have tried setting the z-index to some very high values, but to no avail. Is there a way to accomplish what I am trying to do. Thanks in advance.
Code Snippets
function positionMe(myTextBox) {
var mybox = myTextBox;
$("#popup").show();
$( "#popup" ).position({
of: $( mybox ),
my: "left top",
at: "left bottom"
});
}
popup is a div
<div id="popup">
<div class="input">
<div>
<input type="text" id="timeslice" size="5" />
</div>
</div>
</div>
I solved it myself -
I appended the popup div to the accordion element and then positioned it. That seems to show the popup.
$("div#top-criteria").append($("div#popup"));
positionRight('div#top-criteria');
Thanks
I apologize if the question was a bit vague.
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 UI to make selections. I'm having an ul-list that I made selectable. The li-items contains icons and texts. It seems that the selectable comment not only makes the li-items selectable, but also the elements in the li-items. This gives some unexpected results.
I tried to make an example in jsFiddle: http://jsfiddle.net/eJSGU/
If you click several times on the edges of the icon, you will see that there is sometimes something selected that is bigger than the li-block.
<li class="ui-widget-content">
<div class="img"><img src="http://bib.arts.kuleuven.be/bibliotheek/images/icon_facebook.jpg"></div>
<div class="lbl">Item 1<div>
</li>
Anyone an idea how I can avoid this?
I suggest to use the filter option of the selectable. In your case you want only the li elements to be selectable so you set filter: $('selector').children()'.
<script>
$(function() {
$( "#selectable li" ).selectable({
filter: $('#selectable').children('li')
});
});
</script>
Here is an updated fiddle.