Not sure if this has been covered somewhere, but I couldn't find it in the documentation, and was wondering if it'd be possible to not include the search input box with the jQuery chosen plugin (used to style select inputs). Specifically I'd like to use the standard select one without it.
http://harvesthq.github.com/chosen/
Just a quick follow-up: I noticed that in function
AbstractChosen.prototype.set_default_values
a variable is read from
this.options.disable_search
So you can disable the search-field with
jQuery('select').chosen( {disable_search: true} );
without using a fixed-number threshold.
$(".chzn-select").chosen({disable_search_threshold: 3});
If the number of element of the select is smaller than disable_search_threshold (here 2 and less), the search box will not display.
Well I tried with the documentation as well and no luck, so I finally fixed to this
$('.chzn-search').hide();
I do the above after I call chosen.
Hope this helps
I add a class to my stylesheet.
.chzn-select { display: none }
Alternatively, for individual elements, I specify the element and append _chzn to target it.
#element_chzn .chzn-select { display: none; }
Note that: chosen will convert hyphens in your element ids and classes to underscores, so to target element-id you need.
#element_id_chzn .chzn-select { display: none; }
Newer versions of jquery chosen gives you option to disable search input with in dropdown.
$(".chzn-select").chosen({
disable_search: true
});
Older versions do not support this option. Some how if you are strictly not allowed to use newer version than you can use
$(".chzn-select").chosen({
disable_search_threshold: 5
});
it will hide the search box if results are less than 5, best to use with gender type dropdowns. There is another way to fix this and that is;
$(".chzn-select").chosen();
$(".chzn-select").hide();
Call hide immediately after initialization, don't know why this tricks works but it is doing what you want!
I suggest you to use the latest version so you have access to latest options.
Hope it works for you!
Use this code to disable it:
jQuery('select').chosen( {disable_search: true} );
and don't forget to hide it, otherwise it will still be working on mobile !
.chzn-search{display: none}
The disable_search_threshold option hides the search box for single select dropdowns. The number passed in specifies how many items you want to allow before showing the search box. If you don't want the searchbox, just set it to a higher number than the amount of items it will ever contain.
$('#myDropDown').chosen({ disable_search_threshold: 10 });
$('select').chosen( {disable_search: true} );
Since none of the chosen-settings for hiding the search-field for multiple selects seemed to be working, I hacked the chosen.jquery.js in line 577 to:
<li class="search-field"><span class="placeholder">' + this.default_text + '</span></li>
(Span instead of the input field). Needed to comment out this line, too
this.search_field[0].disabled = false;
Working fine for me - even though its not the best practice to hack the code.
With the latest Version of chosen only that works for me:
$('ul.chosen-choices li.search-field').hide();
I used jQuery('select').chosen( {disable_search: true} ); but on chrome profiler, the method search_field_scale was called anyway and eat a lot of the performance.
So I remove the method and all the calls to him and replaced with this.search_field.css({'width': '100%'}) on show_search_field_default and replace style=25px with style:100%
and than
this.search_field.css({ 'width': '23px' }); result_select because of the "data-placeholder"
working fine for me.
disable_search:true,
Here is the document for chosen jquery plugin
Related
I am building a website of which the desktop version displays 10 images all at once (5x2), which obviously doesn't look too good on a small smartphone display. In order to conquer this problem, I made 10 radio buttons (which only display on the mobile version of the website) and only show the image that accompanies the checked radio button. This was very easy to implement with HTML and CSS3 like this:
HTML:
<input type="radio" name='pdr' id="pdr1"><label for="pdr1"> Click here</label>
<div class="populardevice" id="populardevice1">stuff in this div</div>
CSS:
.populardevice {
display: none;
}
input#pdr1:checked ~ #populardevice1 {
display: inline;
}
The problem is that older browsers don't support the :checked selector. My idea was to use the CSS3 way of displaying the div if it's supported, and use JavaScript as a fallback if not. I already found this, which is basically what I want. The only problem is how do I detect if support for the :checked selector is present? I was thinking of Modernizr but it seems like all that would do is create an additional class in my CSS that says no-checked (right?), which would be of no use to me since I want to run a piecie of JS in that case. Or would Modernizr be fit for this case, utilizing it something like this (pseudo-code - I have no idea how to write this yet but if it's the solution, I will find out how):
if (Modernizr.:checked supported) {
use that and terminate this function;
} else {
Execute the JavaScript function from the link above;
}
Or do you guys advise me to implement something completely different?
Thanks in advance.
From the Modernizr website:
Using Modernizr with JavaScript
The Modernizr object
Modernizr keeps track of the results of all of it's feature detections
via the Modernizr object. That means that for each test, a
corresponding property will be added. You just have to test for
truthiness in your code to figure out what you want to do
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
So your pseudo code was pretty close!
SOLVED:
Final fiddle:
http://jsfiddle.net/AcfUz/220/
*used the selector indicated in the chosen answer and moved the console.log value ahead of the text input the selected options were to be listed in and boom--working as it should!
Please reference this fiddle:
http://jsfiddle.net/AcfUz/218/
jQuery(document).on('click', '#go', function() {
console.log("woo");
var selMulti = jQuery.map(jQuery("#inf_custom_Choosealocation_select :selected"), function(e) {
return jQuery(e).val();
console.log("hoo");
});
//var selMulti = jQuery("#inf_custom_Choosealocation_select :selected").val();
console.log(selMulti + "hmm...");
console.log("hootie");
//jQuery("#inf_custom_Choosealocation").val(selMulti.join(", "));
jQuery("#inf_custom_Choosealocation").val(selMulti);
console.log("who");
});
This works perfectly on fiddle but no matter how many iterations I try it won't work on the live site. The variable containing the desired values is always empty. I can't for the life of me figure out why?????
Can anyone shed some light in my hour of desperation? It's been 7 hours and I need to solve this before the morning.
I suppose to expand on this--the code in the fiddle is the code I include in the site. The form and then the script before the closing body tag. The form is dynamically loaded (takes about a second). What I need to accomplish is grabbing whatever values a user selects from any of the multi select fields (I'm starting with the one) and copy those as a comma separated list into another single line text input. The fiddle works splendidly, but I'm coming up empty on the live site. I just returns blank/empty--it doesn't give me any console errors what so ever (save for a missing img) and I can see my console.log checkpoints.
Here is the live link:
http://goo.gl/ll1Hz4
On the live website if I try $("#inf_custom_Choosealocation_select option") in the console, the options are listed twice. Using $('select') 2 #inf_custom_Choosealocation_select are returned. (although I didn't see 2 instances in the page source) ($("#inf_custom_Choosealocation_select"); returns one, but that uses getElementbyID and skips the search). Perhaps the second select is created by some sort of overlay?
All in all, I didn't search any further where the 2nd select come from. A quick fix would be to use a selector searching the attribute. The following selector worked while testing on the live site:
$("select[id=inf_custom_Choosealocation_select] :selected")
But that might be only a temporary work around. You'll probably want to find the ghost select culprit too ;)
You are not using jQuery map in fiddle, where as you have jquery map in your live code...
Try to update your live site with the code you have in fiddle.
Live Code: (has jQuery map)
So, yeah, I am not sure why :selected isn't working in your case, but you can try to go through the options and check manually... jQuery("#inf_custom_Choosealocation_select option").each(function(i, o){ console.log(o.selected) })
Try wrapping your code inside
jQuery(document).ready(function(){});
Instead of using
var selMulti = jQuery.map(jQuery("#inf_custom_Choosealocation_select :selected"), function(e) {
return jQuery(e).val();
console.log("hoo");
});
use
var selMulti=jQuery("#inf_custom_Choosealocation_select").val();
I am having a jQuery Script to find out the resolution of browser and then change its css.
if ((screen.width>=1024) && (screen.height>=768))
{
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else
{
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
can you please help me knowing its actual functioning?
what does :not(:first) mean ? Please explain.
Thanks.
actually it means you select every link element with the attribute rel matching the word stylesheet but exclude the first of the found results :)
so if you have three elements in a container and try to select them using :not(:first) you will receive the second and the third one but exclude the first (!) one
not sure if it that is what you want... but if you have more then one link attribute in header and all except the first are set to that href you might (!) end up having the CSS requested / checked against server / cache several times
Media queries (thirtydot's comment) is also a good idea (comment +1)
Try using the an interactive console, such as the one in Chrome's inspector or Firebug in Firefox. Just type in $("link[rel=stylesheet]:not(:first)") and see if any elements are matched.
Edit: Thirtydot's comment about using media queries is a good one as well, and if you are going to have multiple stylesheet's this article may have some useful info.
I have an HTML Select box with about 1800+ options. In my javascript I have the following line to empty the select box so I can repopulate it.
box.options.length = 0;
In Firefox this runs fairly quickly, but IE takes a couple of seconds. Is there a faster way to do this in IE?
At some point I have worked around IE's dismal performance in this area by enclosing list object in a div and then when I needed to reset it I would just set innerHTML of that div to a brand new empty list html tag. I'm sketchy on the details but I think that's what I did and it worked.
Please don't tell anybody I suggested this to you.
One way that should be faster is to create a new select box with the same properties (but no options, of course), and replace the existing box with it.
You could use box.innerHTML="". In my test, it is 68% faster:
http://jsperf.com/emptying-a-select-box/4.
Update: in 2015 box.innerHTML = "" is by multiple orders of magnitude the slowest option. :-) Use box.options.length = 0 instead.
I am using jquery-keyfilter plugin to mask textbox inputs.
However the textboxes are added to the page dynamically and I cannot figure out how to apply the key filter to them.
I have tried
$('#myelement').live('keyfilter', myFunction );
Also
$('#myelement').live('keyfilter', /regex/);
Kai: comment helps, but it seems my problem is still not solved
I want a keyfilter like this
(/^\$?(\d{1,3},?(\d{3},?)*\d{3}(.\d{0,3})?|\d{1,3}(.\d{2})?)$/);
that will only accept currency/money values but it seems like jquery-keyfilter does not work with this regex. Is this something I am doing wrong or should I look at using another plugin or just code it myself?
"keyfilter" is not an event and you can NOT use live().
According to API of the plugin, it should be
$('#myelement').keyfilter(function(c) { return c != 'a'; });
$('#myelement').keyfilter(/[\dA-F]/);
Below solution works for non-first character
$("#myelement").live("keypress", function(){
$(this).keyfilter((/^\$?(\d{1,3},?(\d{3},?)*\d{3}(.\d{0,3})?|\d{1,3}(.\d{2})?)$/);
});
Below solution works for input field already clicked
$("#myelement").live("click", function(){
$(this).keyfilter((/^\$?(\d{1,3},?(\d{3},?)*\d{3}(.\d{0,3})?|\d{1,3}(.\d{2})?)$/);
});