fcbkListSelection v 1.1 – like facebook friends selector

fcbkListSelection – fancy item selector (like facebook friends selector) with wide range of options.

If you have any comments or requests, please post them and I will try to include all the requested features in the upcoming release.


1) HTML stracture:

<ul id="ulid">
<li>regular content <input type="hidden" value="value" /></li>
<li>preselected content <input type="hidden" value="value" checked="checked" /></li>
<li>regular content <input type="hidden" value="value" /></li>

* This source code was highlighted with Source Code Highlighter.

2) Javascript:

<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
//id(ul id),width,height(element height),row(elements in row)
$.fcbkListSelection(id[ul id],width,height[element height],row[elements in row]);

* This source code was highlighted with Source Code Highlighter.

- 1.1: added preselected items
- 1.0: project started

Download: Download fcbkListSelection

Demo: Demo fcbkListSelection

Github: http://github.com/emposha/fcbkListSelection

42 Responses

  1. Wow, it looks great!
    I’ll try it from work next week… will try to integrate into codeIgniter framework

  2. Can you limit a user to three our four selections?

  3. @J: you mean maximum selected numbers?

  4. Yes, like a user can select up to three or four friends. This way somebody wouldn’t select everybody or everything listed.

  5. Hi,

    great puglin!
    It’s working for me but how do I show a user checked when I first print the selection box.

    ie. When I first print the box, how do I show that some users have already been checked?


  6. looks great. But how do I list users as “selected” when loading all users? Basically, preselect some of the users.


  7. @ken: Not implemented yet, added to todo list.

  8. Sorry for the double post.
    I made some minor additions to get this to work for me:

    in the addToSelected method .. I added this to the corresponding if statment.

    obj.find(“input:hidden”).val(0); // remove select
    obj.find(“input:hidden”).val(1); // add select

    In the bindEventsOnItems method .. I added

    obj = $(obj);
    selected = obj.find(“input:hidden”).val();
    // check to see if the item was clicked.
    if (selected == 1){

    It basically check the hidden input for a value of 1 .. if so then add it to selected.

    Now .. when you generate your form .. you need only set the value of the hidden input for 1 for it to be selected.


  9. very nice!

    Would be nice to see Ken’s suggestion implemented


  10. I commented position:relative; to got it work on IE7.
    there is a bug when the element list is longer than the UL element, we could see the rest of elements outside the UL element (those have to be hidden).
    #fcbklist .fcbklist_item

  11. Great work, really!

    Is it possible to assign a 100% width to the main window?

  12. And… maybe is there a way to select all items with a single click? Maybe in the future release?

  13. Arhg! Warning. in the .min.js version there’s a console.log(i,randid); not commented

    No issue with firebug on, but when it is off the remove features doens’t works (not the visual, the POST array I mean)

    Sorry bout my bad english.

    Hope will help! 2 hours spent away… ;-)

  14. Sadly, it does’nt work in the noConflict-Mode :(

  15. I guess, this plugin works for only once at a time in a page, because of all the generated IDs and stuff. Can you make it more configurable, so that we can use it as a true plugin i.e. repeatedly.

  16. yes! i’ve just implemented the code. to have the correct work we have to eliminate the “console.log(i,randid);” in the fcbklistselection js files. then all games are done. please admin update the js in the downl pack. bye

  17. daweb is right. If you are using Firefox and have firebug turned off, the call to console.log causes the js to fail and items cannot be removed. The problem doesn’t show in Safari (didn’t look at others). The problem exists in BOTH the min and full version of the code. Just remove or comment out the lines.

  18. Yes, in the non-minified version, you hvae to remove the line:


    in removeValue().

    Otherwise, de-selecting an item removes it visually in the UI but does not actually remove it from the results (note: this problem is apparent in the demo — if you deselect some of the original selections, they are still returned in the output).

    Great work though — this saved me a lot of time!

  19. Found a problem where this doesn’t work in IE8 (maybe earlier versions of IE too). Try the demo, and you’ll see that the initially checked values (Silvina and Antonio) do not appear checked in IE, as they do in Firefox and other browsers.

    After a few hours of investigation (hope this saves time for a few others), I found the problem. According to HTML standards, the “checked” attribute for input controls in HTML should only apply for radio buttons and checkboxes. Browsers should ignore that attribute for other input controls. However, Firefox and Chrome still pay attention to that attribute, so this widget works. IE does NOT, so it never finds any people as being initially checked.

    My workaround was to change the HTML so it doesn’t use the checked attribute. Instead, it sets value=’checked’ if it should be checked and value=” otherwise. Then, in the .js function bindEventsOnItems(), you need to change the “if” test from:

    if (obj.children(“input[checked]“).length != 0)


    if (obj.children(“input[value='checked']“).length != 0)

  20. Whoops, made a mistake in my last comment. You cannot set the “value” attribute to “checked” or “”, because the widget needs good, unique values in the “value” attribute to identify back to you what the user actually checked.

    So, I used the “alt” attribute instead. I set alt=’checked’ if it should be checked and leave it empty otherwise. Then, the if function should be:

    if (obj.children(“input[alt='checked']“).length != 0)

    Sorry for not fully testing my last comment before submitting it. I think this should work now.


Comment on this post

Tag Cloud

TwitterAll tweets

Please wait while our tweets load indicator