robdel12 / dropkick

A JavaScript plugin for creating beautiful, accessible, and painless custom dropdowns.

DropKick.js

Quick start

Basic Usage

• Download the latest stable version from the releases / tags section
• Insert the JS onto the page
• Put the stylesheet where you would like
• Add an ID or class to the select(s) you would like to DropKick

If you're using jQuery:

• $("#ID").dropkick( options );

Pure JS:

• Call new Dropkick( HTMLSelectELement, Options ); or new Dropkick( "ID", Options ); in your script

npm Install

You can install DropKick.js using npm:

npm install dropkickjs --save-dev

Documentation

See Dropkickjs.com for full docs.

Browserstack Testing

Cross browser testing is provided by BrowserStack! They have generously provided automated testing for us.

Building the docs

Run yarn docs and it will build the docs from source.

WordPress Plugin

DropKick WordPress Plugin By Mahfuzul Hasan

https://wordpress.org/plugins/wp-dropkick/

Suggestions or Bugs?

Search for bugs ruthlessly and call any vermin to our attention!

Authors

Wil Wilsman @wilwilsman

Robert DeLuca @robdel12

dropkick's Issues

Blur event on IE 7 to 9

The 'blur' event is never fired on Internet Explorer (even 9) because it's not supported. I found that also adding 'focusout' as an event solves the problem.

Updating the dropkick.

If i want to change the values of one of the Dropkick dynamically using ajax, How can i append the values to the Dropkick.
thanks in Advance

According to the code in issue #51, When DropKick display upwards, the border-radius is not correct

When DropKick display upwards, the border-radius is not correct.

change to "Top left and right corner no radius Bottom left and right corner have radius"

maybe some changes on CSS and .js

thanks

Optgroup

Thanks for the plugin!

Just one tiny question, what about optgroup tags?
Do you have any plans to upgrade the plugin to support them?

Regards,

JM

Problem with array of selects

Hi,

I am not sure if anyone else has faced this problem before but I am stuck in this issue with dropkick implementation.

The problem I am facing is I am using array of selects with name like
test_select[]

but when I apply dropkick on these select boxes the change option does not work and the error "data is undefined" is generated at line 263 containing code

$select = data.$select;

can anyone help me on how can I solve this issue

< or > in option value breaks dropdown

I'm using this with drupal it adds a value of to the select box but dropkick sees this as an element. I have fixed the issues with the following. its not sexy but it works. around line 327

oTemplate = oTemplate.replace('{{ text }}', $option.text().replace("<", "").replace(">", ""));

and line 108

data.label     = $original.text().replace("<", "").replace(">", "");

Is there any way to dropkick dynamic options ?

Great plugin ! Is there any way to handle adding dynamic elements via Ajax currently dropkick ignores
them and there's no public methods exposed ?

This repo has been included in The Github Pirates

Okay so not really an issue, just a public service announcement from The Curator, David Higgins (@Higgo)

-- This repo has been included in The Github Pirates' Chest.

What is this about?
The Github Pirates is a constantly updated resource for those interested in HTML5, CSS3, and JavaScript.

You should find out more about this project below:

http://codepirat.es/

OR, Download The Chest:

http://isharefil.es/E9Co

Some content overwrites the dropdowns

We've seen issues in IE7 and 8 where content overwrites the dropdowns, especially when content containing the dropdowns is dynamically generated.

We've tried adjusting z-index when the content is created, but that's resulting in some wild results in IE7 and 8.

How to make the width:auto or width:100%?

I'm making a responsive website where I need to change the size dropdown 4 times for 4 different screen sizes. I tried to increase and decrease the font size in dropdown but it's not working.

This plugin is nice but it disable the default behavior of select on ios

This plugin is nice but it disable the default behavior of select on ios. I have tried this too http://jguimont.com/post/786587291/ipad-style-popover-in-jquery but all are disabling the default behaviour on iPad and iphone

strange extra :- character

dropkick works perfectly.

One issue is when I am getting extra ':' and '- :' characters produced in my views when I use Rails datetime_select. No idea why and its not in my html.

Any advice would be appreciated.

Tabindex is required by DropKick

On Safari Mac (latest version, 5.1.5), the drop down doesn't close when user clicks somewhere else (blur event).
This happens when you don't put a tabindex in the select attributes. In your explanations, you say :
"DropKick works by transforming your existing, boring into beautiful, customizable HTML dropdowns. THE NAME ATTRIBUTE IS THE ONLY ONE THAT IS REQUIRED." (that is not true, it also requires tabindex on safari) Then you say "You should also set a tabindex attribute to enable navigation via tabbing.", which implies that you can use that plugin with no tab index, wich is incorrect. Can you add those modifications in your explanations ? Thank you. Alexei CHEMENDA

Problem with scroll div in IE

I used this issue to fix the bug :

http://stackoverflow.com/questions/9011820/jquery-click-on-scrollbar-not-registering-as-in-the-element-in-ie

Chrome & Safari dropdown does not close when clicked outside

When you click outside the menu anywhere on the page, it stays open. FF and IE works fine and the menu collapses back.

Can not select item by keypress?

Any chance you'd have a quick fix on this?

1.1.0 Planned features

1.1.0 is currently being developed on the dev branch. I am hoping to have it out sometime this week : https://github.com/JamieLottering/DropKick/tree/dev

Planned improvements / features:

• Typeahead lookup: Will search for items in a list as you type and select ones that match the entered keys
• Improved API: Allow overwriting of the open/close animations. Get notified when a DropKick is created, etc
• Optgroup support
• Escape key support
• Add click focus support
• Other performance / bug fixes

Error when selecting a option item (data is not defined)

Hi there, love your plugin. After integrating it into my app, i get a js error when selecting an option:

"data is undefined" $select = data.$select; jquery.dropkick.js (Zeile 263)

Do i make something wrong? Would love to get this work.

Cheers
hubeRsen

Scrollbars not working on dropdown in IE8

When using a long list of options, and the scrollbars appear, these do not work in IE8 (and I assume 7).

If you try and click and drag, it assumes you are clicking outside of the dropdown and closes the dropdown.

You can scroll using the mouse wheel, but I find most users automatically try to use the scrollbar.

Arrow icon is too far to the left

In the default theme the custom icon is too far to the left. It should be closer to the right edge

jQuery.ScrollTo & Dropkick issues

ScrollTo v1.4.2, jQuery v1.7.2, Dropkick v1.

the scripts are all on one page but Dropkick is not working properly.

http://www.ciah.com/SaleAqua/images/Dropkick/Capture.JPG is the result.

Any idea how to fix this?

Selective Dropkick'ing

Is there a way to selectively apply Dropkick to elements?

Right now, it seems like 's that aren't explicitly dropkicked are hidden.

How can I correct the .dk_container info so that it won't interfere with my page layout?

When I added Dropkick to an existing page of my site it overrules the rest of my page and table layout (margins, padding, float, etc.).

I tried playing around with the various elements and I was able to determine that the padding and float issue seems to be stemming from .dk_container in the Critical/Non-Theme elements, but I haven't been able to determine the other elements which are affecting my layout.

How can I correct this so that the class="default" only affects the items within the select tag and not the items before or after it?

I create a new method,but I don't kown how to use the github

  methods.rebuild = function () {
    for (var i = 0, l = lists.length; i < l; i++) {
      var
        listData  = lists[i].data('dropkick'),
        $dk       = listData.$dk,
        $current  = $($dk.find('li').get($("#"+$dk.get(0).id.substr(13)).get(0).selectedIndex))
      ;
      $dk.find('.dk_label').text(listData.label);
      $dk.find('.dk_options_inner').animate({ scrollTop: 0 }, 0);

      _setCurrent($current, $dk);
      _updateFields($current.find("a"), $dk);
    }
  };

if you change the selectedIndex of , you should need a new droplist so you can use the $("select").dropkick("rebuild") Think you.my email:[email protected]

No Typing

Native Select Elements generally allow you to start typing, with automatic selection based on it. Such as a State Dropdown, you start "C" jumps to the first state starting with a C, then "a" and it drops down to "Ca" etc, with a short timeout before typing restarts the selection.

Plans to implement this?

No way to manually specify variable widths without using &nbsp;

If you comment out or delete the following code:

$dk.find('.dk_toggle').css({
'width' : width + 'px'
});

There are two ways to control width:

1. Allow the default, which controls width based on option lengths.
2. Control width in the CSS:

.dk_toggle {
width: 7em; }

The problem is, I cannot figure out a way to target individual dropdowns when I have multiple on a page in the CSS, so they are all the same width, or I have to use   to make options artificially longer.

If someone has a fix it'd be great to hear it.

Select element width set to 0

I have set up select box that is inside of an absolutely positioned div. When I call ".dropkick()" on the element the dropkick toggle box (dk_toggle) has the width set to 0px. I have noticed in the source that the width is set based on the specified width in the settings OR the select box's outerWidth value:

// This gets updated to be equal to the longest element width = settings.width || $select.outerWidth(),

When i provide a width as a number everything works great and looks nice. When i do not provide a width, somehow the outerWidth is 0. And when i provide a width that is invalid css (like a string with letters in it) everything works great and looks nice.

this is my html:

div class="pbm-tooltip" id="PrintingOptionsContainer"> select name="PrintingOptionsList" id="PrintingOptionsList" class="dk"> option value="1">Double-sided Black & White option value="2">Single-sided Color /select> div class="pbm-tooltip-arrow-tl"> /div>

the css for the pbm-tooltip class:

.pbm-tooltip { position:absolute; font-size:18px; } .pbm-tooltip-arrow-tl { clear:both; display:block; height:20px; position:relative; width:20px; } and the javascript initializing dropkick.

$("#PrintingOptionsList").dropkick();


I am using the provided dropkick.css theme.

issue on resize browser with fluid layout

I incorporated dropkick into a responsive / fluid layout
when the browser window is narrow enough, the container is set to display block to reveal the dropdown select. But the width of the dropdown select is not wide enough. It's as wide as the first item (home), but should be as wide as the largest element, so the dropdown is truncated and a horizontal scrollbar appears

Reset values

I have 2 different select(a and b).
When i change a, i want to reload b, but i can not clear the select values.
Thanks!!

Dark/Black theme issue in IE9?

Not sure if this happens with everyone but I seem to be having a problem with the Dark/Black theme in IE9. I can see the dropdown there but the options don't appear at all. Just a border.

How to add disabled options?

I would like to add disabled options to my dropdown list... e.i. options that will be in a list but it would be impossible to select them. Is that possible using DropKick?

Selects that can accept input

This looks awesome, but lacks a very important feature. It would so cool if it supported selects that can accept user input. You seen those on desktop apps, right? The dropdown itself is a input, users can click and type their value. Could I accomplish this with DropKick?

OptGroup and Multiple

Could you implement optgroups and multiple values selection please?

onClick events not targeting generated elements

Hey There! First off, this plugin is awesome.

However, I'm noticing that for some reason I can't target the

's created by by dropkick, associated classes or any of the elements that it's overwriting using the onClick(); event in Jquery.

Here's what it looks like:

     

          
PICK A PRINT
          
Giclee Print
          
Screen Print
     
    

and here's my script:

<script type="text/javascript">
     $(document).ready(function() {
 $('.screen-price').hide();

  $('.screen').click(function(){
      $('.digital-price').hide();
      $('.screen-price').show();
      return false;
   });

   $('.digital').click(function(){
      $('.screen-price').hide();
      $('.digital-price').show();
      return false;
   });

   $('.add-to-cart').click(function(){
      return false;
   });              

    });


</script>

Not sure why it isn't hearing it; I'm not getting any errors. Any advice would be appreciated.

Thanks!
JC

Callbacks

Don't you think that it would be better to set up callbacks on select this way?

$('#select').dropkick().change(callback);

This way implementing dropkick into existing projects (that have callbacks on selects change event) would be much easier, and I think it's more convenient.

Personally, this and #10 are the only things that stop me from using this plugin right now, but, anyway, thank you for a great job.

Enable the disabled attribute

I want to use Dropkick on a form with "disabled" attributes in it. Unless i missed something I think it's not supported yet... ?

Layout Interference

I have noticed that your plugin layout can be easily broken when implemented, and I guess this happens because you are using lists to place down your plugin markup,
I think if you adjust your plugin to use divs instead of ul & li's, it won't break any more, as list elements, have always a special styles for typography,

and btw your plugin is really awesome ^_^

Bug when tabindex="0"

There is a bug when I set tabindex="0" on select menu. The div created set tabindex="".
(Widgets with tabindex=0 will be added to the tab sequence based on document order, see http://www.w3.org/TR/wai-aria-practices/#kbd_general_between )

So, I modify the line

// Check if we have a tabindex set or not
tabindex = $select.attr('tabindex') ? $select.attr('tabindex') : '',

by

// Check if we have a tabindex set or not
tabindex = isNaN($select.attr('tabindex')) ? '' : $select.attr('tabindex'),

Ajax and loading new selects - issue with live event click vs. bind

Change

$('.dk_toggle').live('click', function (e) {

to:

$('.dk_toggle').bind('click', function (e) {

Because if you are using ajax you can get this bound multiple times and it causes the dropdown not to open up.

Status of DropKick

Sorry I haven't worked much on this lately as I've been a bit busy with other things and wanted to work on some other projects. I had a lot planned for the next update but I'm not sure when that will come out. In the meantime, if DropKick doesn't fulfill your needs, I highly recommend Chosen: http://harvesthq.github.com/chosen/

Cheers

setting narrow widths?

First, thanks for an awesome plugin. The attention to accessibility is particularly cool.

I have been banging my head against the wall all day long trying to style a really simple form with dropkick. I've tried... and tried...

It should be fairly clear from this link what I'm trying to do:

http://tinyurl.com/3eohfeo

(The select menu should sit inside the "quantity" div, which is really just window dressing.) I want a narrow container, 30px or so, the green background color and option borders should fill the inner menu, and there should be no horizontal scrollbars on the inner menu.

I've chopped through the base css for dropkick removing the box shadow declarations and other things I don't need, simplifying here and there. I've tried all the obvious declarations. Hopefully a seasoned dropkicker can tell me if this is just a css error on my part, or if the plug-in just borks for some reason on narrow container widths.

Any help dearly appreciated!

XSS Vulnerability

just wanted you to know that in a couple of places where you select the text an option instead of the html of an option you encode entities into html, and then when you re-insert your blob of HTML any script tags inside will execute.

If a user is doing any html encoding to print things into the select box, dropkick will reverse the process.

change() event call

Hi,
I found that your plugin doesn't fires a jquery change() event on the <select> being styled by it, can you please fix it?
it's about adding $select.change(); to _updateFields(option, $dk, reset) function. Thanks

the dropkick.css doesn't work without example.css

These styles are nevessary in dropkick.css

.dk_container * {
margin: 0;
padding: 0;
}

.dk_container ul {
list-style: none;
}

Scrolling via scrollbar does not work in IE

Tested in IE7-9, trying to scroll through a large list using the scrollbar immediately closes the dropdown.

Labels Missing from Example

I just ran the example through the WAVE toolbar and noticed that labels were missing:
http://wave.webaim.org/report?url=http%3A%2F%2Fjamielottering.github.com%2FDropKick%2F&js=2

I'd like to know what accessibility issues there are with this software, but I don't know if this is just a poor example or a limitation of the javascript.

Using DropKick with c#(AutoPostBack)

Hello! I'm developping an web project using ASP.NET/c# and using DropKick on my DropDownLists. I need to activate my DropDownLists's AutoPostBacks 'cause when I change my selectedItem in the DropDownList some actions has to happen, like querys in the Database and others stuffs. Anyone has the answer?

truncate selected text if needed

Options with long text wrap very well in the options list but overflow when selected.

Truncating the selected text based on the width of the button and position of the down-arrow would be pretty rad. Optionally appending an elipsis to the truncated text might be a nice touch as well.

Loving DropKick. Great work!

Add a setValue method like so

There didn't seem to be an obvious way to set the value. Here's how I hacked it to work.

  // Change the the selected value like this:
  //  $("#mySelectList").dropkick("setValue", newValue);
  methods.setValue = function(newValue) {
      var
      $select   = $(this),
      list      = $select.data('dropkick'),
      $dk       = list.$dk,
      items     = $dk.find('a');

      $(items).each(function(index, item) {
          var value =  $(item).attr("data-dk-dropdown-value");
          if (value == newValue) {
              $current = $(item).parent();;
              _setCurrent($current, $dk);
              _updateFields($current, $dk, true);
          }
      });
  }

Submitting form without button.

I created a form using the examples. The dropdown works great as advertised.

I wanted to submit the form as soon as someone changed their selection from the dropdown and it did not work.

My code:

In the head (aside from jquery, dropkick css, and dropkick js).

$(function () {
$('.change').dropkick({
change: function () {
('.example_form').submit();
}
});
});

HTML code exactly as .change example, except I added "test.php" to the action.