gfranko / jquery.selectboxit.js Goto Github PK

sorry if this is a mistake on my part, but when I run your 'jquery Selectboxit - v2.1.0 - 2012-12-03' I get an error on line 7: uncaught Typeerror: undefined is not a function.

Hi,

I love this script. However, I found some problems. I'm not sure whether it is an issue or bug. Please check the jsfiddle . Here, I set width for first select box. send select box has a very long option. Third one doesn't have any issue as it doesn't have the width or long option name.

Issues/bugs are:

1. The selectboxit-option-anchor class width needed to be adjusted with the width of the selectbox width when option names are too small as displayed in the first select box.
2. While selecting very long option from the second select box, the span.selectboxit-arrow-container will gets wrapped. It shouldn't wrap.
3. After selecting an option value, the style needed to be reset to normal. Now, we need to click outside of the select box to get it reset.

Please let me know, if I need you to provide more details. If these issues gets fixed, rest all will be fine as of my knowledge.

Thanks and regards.
Ravi

Pretty sure this is the line of code before-which special cases need to be handled

                // Uses Array.join instead of string concatenation for speed
                currentItem.push(optgroupElement + '<li id="' + index + '" data-val="' + this.value + '" data-disabled="' + dataDisabled + '" class="' + optgroupClass + '"><a><i class="' + iconClass + '"></i>' + $(this).text() + '</a></li>');

At least in Chrome, the first and last option of the select list do not have the necessary border-radius.

Revamp project website by using Twitter Bootstrap and my soon to be released table of contents plugin, Tocify.

Not many Jasmine tests have been added since the pre-1.0 release. Add more to improve test coverage.

my ie7 and ie8 cant handle this line of code (line 184):
append(this.divImage.after(this.divText));

bith browser do not insert divText into the dom.
this little change fix the bug for me. change line 184 to:

append(this.divImage).append(this.divText);

By adding the element type to css selectors (e.g. div.selectboxit), css properties can not be overwritten by selectors which target only by class (e.g. .selectboxit). This is due to selector precedence (a rule which contains an element type is given higher precedence).

jsfiddle (notes in the css): http://jsfiddle.net/gavacho/3DnuA/

I always need to add the following CSS for a proper height of the selectboxes:

.selectboxit-container {
    vertical-align:bottom;
}

When being used in backbone.js, I am only able to get the selectBoxIt object to render correctly once I manually go in and change the selected value.

Can you please show an example of how to use this in backbone.js? Note: I am binding the select html construct to the selectBoxIt control/widget in the backbone "render" method of the page.

I'm not certain but I am thinking the jquery .data method is being blown away when backbone.js runs the render method.

Here is a snippet of what I'm doing.

var yearSelector = $(this.el).find("#year");
yearSelector.val(window.viewingYear);
yearSelector.selectBoxIt({showEffect: "fadeIn", theme: "jqueryui", defaultText : window.viewingYear });

In order to style the container with css you should add a css class to it. You don't style elements from same type with ids, you use classes.

Bootstrap sets collapse containers (class="collapse") to overflow hidden, which causes dropdowns to have issues. Normal form select elements do not seem to be affected since they usually always draw on top.

http://fiddle.jshell.net/tablatronix/tePfd/

Can anyone think of a way to handle this with the script besides manually overriding it ?

Maybe find any parent with override hidden etc.

1. Add icon support to allow images for each dropdown list option.

When I initialize the plugin, the selected option is "short", when I select a different option (e.g. "something really really long", the selectboxit doesn't resize to fit its contents.

Hi Greg, I am following up on your suggestion from stackOverflow regarding the SelectBoxIt TabIndex Issue I am having. Basically the issue is when tabbing from one form element to the next the Select Box gets ignored in the sequence, but it does work when not using TabIndex in the Inputs.

You said, "my select box tabindex is getting ignored is because SelectBoxIt hides the original select box and replaces it with new HTML that is easier to style (a div element). Hence, the tabindex attribute is not being set on the visible drop down (the div element), only the hidden select box".

Also, I have this line of code I modified from another forum & thought it might be on the right track?

jQuery('div.selectboxit ul').attr("tabindex",-1);

thank you for looking into this And excellent work on the selectBoxIt!

PS: I modified the bootstrap.css file, which may be of interest to others who simply want to add a selectBoxIt drop-down, I wormed out all unnecessary CSS for this instance: http://www.lightupco.com/s/bootstrap_mod.css

Steps to reproduce

• open/save standard demo page
• change jQuery reference to 1.8.2
• Click on comboBox
• UP/DOWN no longer moves selection (works fine with jQuery 1.8.0)
• Clicking on letter no longer quick-selects item (works fine with jQuery 1.8.0)

If a user's vertical viewport is not tall enough to handle the height of the drop down list, then dynamically set the max-height height of the drop down list to the amount of space available on the page. The max-height property should also be reset if the vertical viewport is big enough.

Remove docco from the build process and instead use Brocco to do automatic annotated source code creation in the browser.

Examples to add:

1. Arrow Box Support
2. Hide the First Option
3. Set Default Text
4. Bootstrap/jQueryUI Up/Down Arrow Support
5. Custom Down Arrow Support
6. Bootstrap/jQueryUI Icon Support
7. Long list

The default animation is too slow, when filling out a form you kind of want to be speedy.

Hi,

SelectBoxIt is a great plugin, no issues so far with the usage, but would like to see a property/option to set the drop-down-height so we can see more items when choosing from the list.

Thanks

I have a website where I replace certain values in the text of the selectbox options with other values (such as [b] into <b> and so on) when I run selectboxit so that I can use html/css styling within the selectbox. I use the change event on the original selectbox and run the replace method within that function. The code looks something like this:

$('#predefinedMessageText')
.bind("create change", function() {
$('.selectboxit-text').html($('.selectboxit-text').text().replace(/#(.)*?#/gi, "$&"));
});

The problem is that the change event is triggered before your plugin changes the value of the .selectboxit-text span. Even if I replace the value within the span with something else, your plugin will overwrite it.

Could you change your plugin so that the value of .selectboxit-text is modified and only afterwards the change event is triggered on the original selectbox?

Thanks!

Integrate Travis CI for continuous integration.

HI Greg

Loving the plugin so far! As promised, here is the "issue":

Perhaps overkill but thought it might be nice to attach an Update event in the change method for example ajax on a dropdown box (e.g. products) which is updated whenever the other dropdown box is changed (e.g. categories).

A very crude example with a similar scenario - http://www.fenka.co.uk/sandbox/selectboxit/ - add extra options to dropdown box, the selectBoxIt version doesn't get updated.

Give me a shout if there is anything I can assist.

cheers

Consider the following scenario.

1. Load http://gregfranko.com/jquery.selectBoxIt.js/ using Firefox with Firebug installed

2. Open the Firebug console

3. Run the following JavaScript snippet in the console

   $('select').first().val('a Stateful UI Widget').change()

4. The selected value of the first native select element on the page will change. Now let's try the same for the corresponding selectBoxItfied select:

   $(":selectBox-selectBoxIt").first().val('a Stateful UI Widget').change()

5. The result is that the selection is not reflected in the selectBoxIt element. It should behave like the native select element and change to the new value.

Some of the DOM elements which selectBoxIt creates are div elements. Those elements are then styled with display: inline-block. This means that a css hack is required for some versions of IE since divs are display:block by default and those versions of IE only allow display: inline-block on elements which are naturally display: inline.

If selectBoxIt were to use spans instead of divs, that css hack could be removed.

I am using this plugin to be able to navigate through a list of states using the respective letter on the keyboard, but for some letters, like "T" - it goes from Tennessee to Massachusetts instead of Texas. The letter "P" goes from Palau to Mississippi. The letters "N", "I", "S", also don't work. But other letters work fine, such as "A", "C", "O", "M", "W", "V".

Currently the options kind of allow html, but doesn't work properly.

Ie, to get the html working, we did:

<option value="1">Some Text &lt;strike&gt;bad&lt;/strike&gt; good</option>

The code display correctly in the options, but when select the strike is removed, leaving only the content (text "bad").

Store all this context inside of self variables to optimize for minification.

Allow optgroups to be used to group related dropdown options. Allow users to customize the optgroup CSS.

A select is supposed to trigger the native select interface on iPhone.

Probably doesn't work on Android too then.

The benefit of this change is that it allows for the .selectbox-arrow element to be styled as an inline-block element more easily. The benefit only really makes sense in the "i want to use bootstrap.css but not selectboxit.css" use-case which is not officially supported.

If made, this change would allow me to come up with (and contribute) an elegant .css file which would style selectboxits like bootstrap buttons.

One option is to add a boolean option to the plugin. Perhaps this is a value that can be inferred by the combination of other settings?

Hi,

First of ALL .. this SelectBoxIT is the BEST !!! i love it .. BUT ...

This is strange. Tried everything ... :/

1. Put a Tinymce editor on page .. write som content in the editor. fx. ("test this is content")
2. selectBoxIT on page with fx. 3 options. ("option1", "option2", "option3")

Problem .. when i choose option 2 or 3 and then choose option 1, the option text changes to the content of the tinyMce editor ("test this is content").

So now i have a selectBoxIt with following options ("test this is content", "option2", "option3")

PLEASE HELP !! :) :) :)

I have dynamically created page with unknown number of elements. I style them with $("select.selectBoxIt").selectBoxIt().data("selectBoxIt"); Later, when I get new content for dropdown lists I need to rebuild all combo-boxes, and following syntax doesn't work $("select.selectBoxIt").selectBoxIt().data("selectBoxIt").refresh(); Neither works iterating via "jQuery each" Please advise.

For the SelectBoxIt v1.0 release, I want to only include the bare minimum in the SelectBoxIt core (jquery.selectboxit.core.js) file, and include all other enhancements/features in their own files (allowing users to download them with a custom build tool).

(1)I have created some Themes using jQuery Mobile themeroller, but can't figure out how to get selectBoxit to use one. Any help would be appreciated.

The handling for default text handling does not seem to be consistent.

Steps to recreate:

1. Start with example
2. Text shown == Sample text here
3. Select first element in dropdown == SelectBoxIt is:
4. Text shown == Sample text here
5. Select second element in dropdown.
6. Select first element in dropdown.
7. Text shown == SelectBoxIt is:

Is this expected functionality?

I have been using the selectBox by claviska, which has been by far the easiest to style but does not support the keyboard navigation as your does - which works beautifully now, thank you. But I am still having problems with using an auto width with the selectBox, specifically when it comes to the text overflow and the arrow icon (i wish to use an image) and it's not very feasible for me to assign a separate class to each selectBox because we have so many in our forms. It also seems that the arrow is linked directly to the width of the selectBox. The arrow would be better as a single class, instead of three. And work independently of the selectBox width as far as classes go. As a designer, this is less troublesome when it comes to styling the element.

For example:

.selectBox-dropdown .selectBox-arrow {
position: absolute;
top: 0;
right: 0;
width: 19px;
height: 95%;
background: url(img/dk_arrows.png) 40% center no-repeat;
}

I appreciate your attentiveness to issues and your willingness to fix issues - which is not something claviska has been doing. But his plugin does have a certain simplicity to it, that I do not find with yours, although yours is more robust and less buggy in it's function, especially when adding options.

I'd like to automatically carry over class names (either all of them or at least the bootstrap-related classes) from the <select> element to the appropriate element created by selectBoxIt.

Awesome drop down box you have here. However, i am having a problem with it displaying check boxes when i tap on a selectbox within my mobile app (Android 4.x).

It allows me to choose something but with checkboxes (therefore i can have more than one value for that select box which is not good. Only 1 should be there).

Notice that both STATE and AZ are selected which will result in a value of STATEAZ instead of AZ.

What would i need to do in order to correct this?

My javascript to start out the selectboxit is this:

$("select#dd_state,select#dd_DrivingStatus").selectBoxIt({
    showEffect: "fadeIn", showEffectSpeed: 300,
    hideEffect: "fadeOut", hideEffectSpeed: 300
});

and my HTML code for the selectbox is this:
< asp:ListBox ID="dd_state" name="dd_state" runat="server" ClientIDMode="Static" SelectionMode="Multiple">
< asp:ListItem Text="STATE" value="na" selected="true"></ asp:ListItem>
< asp:ListItem Text="AL" value="AL"></ asp:ListItem>
< asp:ListItem Text="AK" value="AK"></ asp:ListItem>
< asp:ListItem Text="AZ" value="AZ"></ asp:ListItem>
< asp:ListItem Text="AR" value="AR"></ asp:ListItem>
< asp:ListItem Text="CA" value="CA"></ asp:ListItem>
< /asp:ListBox>

My phone is the Verizon Galaxy Nexus. I am using the default web browser it comes with but it also acts the same in Chrome

Thanks for your time, Greg!

selectBoxIt doesn't display disabled option as disabled and allow it to be selected. Test case: http://jsfiddle.net/hogart/EabRv/

If the select tag does not have an id attribute you use the same id for all the generated select boxes.
You should use unique ids.

Jquery validation not wokring with selectBoxIt

I'm trying to use btn-large and btn-mini but their css is being overwritten by selectboxit: http://jsfiddle.net/bG58b/

It would be cool have a way to programatically select one of the options or for the control to automatically detect the selected option from the underlying select element and auto-select it upon creation.

I discovered this missing when using selectBoxIt to replace select elements that were generated from asp.net. The syntax of a selected option is text.

Thanks!

When refresh is called the first time, _destroy is called which nukes $.data for that element. Then _create is called. But the _create doesn't set $.data for the element, _createWidget does. The end result is that the widget's data is permanently lost.

The escape key is supposed to close the options.

Hello

I discovered this very nice and professional fully featured plugin SelctBoxIt, when i were searching for a skinnable dropdownlist to add icons to options.

Despite following the setup explained on site, i failed to make my icons appear.

My icons are in a folder named "Images" on my desktop as well as the html page i'm working on.

I barely guessed where to put icon paths : create a class for each icon in selectboxit.css at the end (after icon positioning rules), like this:
/* Dropdown List Individual Option Icon Paths */
.IconWAR {background-image: url("./Images/IconWAR.png");}
.IconSW {background-image: url("./Images/IconSW.png");}
.IconRNG {background-image: url("./Images/IconRNG.png");}

But despite that, this still doesnot work...

What is correct syntax? And could the "icon support" example on site be more explained about classes and paths please?

Make sure to account for if a user has set a border on the SelectBoxIt arrow container. If a user has set a border, then the max-width of the text should decrease by the width of the border x 2

For the SelectBoxIt v1.0 release, I want to provide users with an option to only download what features they want/need (limiting potential file size). I am interested in creating a custom download plugin that utilizes the HTML5 File System API.