prashantchaudhary/ddslick

A free light weight jQuery plugin that allows you to create a custom drop down with images and description.

ddslick's Issues

Doesn't work for multiple selects

If this plugin is used on a class, it doesn't behave properly :s (all the options from the different selects are added to each select :s)

Add custom html into the dropdown

Hi! this is probably an enhancement. For example instead of images I would like to use a custom font or css class. So isntead of the images I need to add:
<span class="flag-icon flag-us"></span>

Same happens with people that want to use font awesome for example.

Keep the good work!

Responsive auto width

According to documentation, I need to define an explicit width.

Any chance I can leave it as auto so automatically it adjusts to parents width ?

Thanks.

option to expand ddslick upwards

methods.select function broken - selecting Index 0

The public function methods.select is broken when the index is zero. This can be fixed by replacing the if check with the following:

if ((options.index !== false || options.index !== null) && options.index >= 0)

option to Enable or Disable dropdown

A plugin option to enable or disable drpodown

We can't select the ddslick's selected item by the item's value

When we need to select an item of ddslick we need to select the item via it's index. There is no option to select the item via it's value.

MIT AND GPL License

hey ddslick is owesome plugin , one issue is that ,there is no MIT or GPL license for this ddslick , so that was prevent me to used that for production site , so could please add GPL and MIT licence in read me file that would be great..

Uncaught Error: Syntax error, unrecognized expression: <div

introduced with commit 5c1eca6 where

var original = obj, placeholder = $('<div id="' + obj.attr('id') + '"></div>');

got replaced by

var original = obj, placeholder = $('<div').attr('id', obj.attr('id') + '-dd-placeholder');

No selectText with HTML Select options

Currently there is no way to show a select text when generating ddslick with HTML select.

Click/Tap on dropdown Auto-closing List (Android Webview)

Hello,

The plugin is awesome. But i am having problem in Samsung S4 running my app and in its WebView pluign auto-closes when i tap to open.

Kindly give me some idea to avoid that.

Thanks.

Add onClose and onOpen callbacks.

Incomplete '<div'

I recognize that this is a duplicate ticket, but this still exists
Line 101, an incomplete <div should probably be <div/>

inside "return this.each(function{})" the "var options" will break onSelected callback

I noticed this in chrome, but inside the inner loop where you loop through all the selected elements in the list to apply ddslick to each one, the first line is

var options = $.extend({}, default, options);

when you do this, my onSelected handler disappears, when I change it to say

options = $.extend({}, default, options);

it's magically fixed, I think the javascript scopes are playing some nasty trick on me, deleting the var declaration was enough to make things start working again.

IE10 Issue

Nice little script man.

On my end, select doesn't seem to work in IE10. Seems fine in IE9 but IE10 definitely getting bugged for some reason.

This is through testing on Browserstack with Windows 8 and IE10.

Are you able to replicate a select menu not working in IE10 by chance or is this on my end?

Thanks,
Nick

Console error on the unminified version

var original = obj, placeholder = $('<div').attr('id', obj.attr('id') + '-dd-placeholder');

$('<div') part creates an error.
You may want to change it with smth like $('

')

Project Still Alive?

looks like the last time this was last altered was 2 years ago, is there plans to keep this alive? I really like the concept of this plugin, but if it isn't going to continue being worked on, I'd probably try to find a plugin that is.

Hope that not the case, this plugin looks awesome.

Not working with windows 8 apps when using jquery prior to version 2.0

This problem only occurs when using jquery versions prior to 2.0.

The following code will cause an error in windows 8 apps.

if ($('#css-ddslick').length <= 0 && options.embedCSS) {
    $(ddslickCSS).appendTo('head');
}

This is because the windows 8 app runtime tries to prevent injection of malicious code by dynamic html injection. However, there is a function which can fix this issue: MSApp.execUnsafeLocalFunction

Thus I suggest the following workaround.

if ($('#css-ddslick').length <= 0  && options.embedCSS) {
    // Special case for Windows 8 Apps
    if (typeof MSApp === 'undefined') {
        // Not windows 8
        $(ddslickCSS).appendTo('head');
    }
    else {
        // Windows 8
        MSApp.execUnsafeLocalFunction(function () {
            $(ddslickCSS).appendTo('head');
        });
    }
}

It does not work with a multiple select ?

I tried with a select multiple and it is working as a single select.

ddData for multiple menu is messed up

Hi,
If I have one dropdown menu, I can used this "ddData.selectedData.text" to get the text very well. But when I use some drop down menus at the same time (use the same "var ddData" ), then I tried to get the selectedData in each of them, it can no longer recognized the data.
for (var i=0;i<3;i++){
$('#dropdownBasico'+i).ddslick({
data: ddData,
width: 150,
imagePosition: "left",
selectText: "How r u ?",
onSelected: function(data){

                 if(data.selectedIndex >= 0) {
                                  ddData = $('#dropdownBasico'+i).data('ddslick');
                                   alert('Selected text: '+ddData.selectedData.text); //this will give no result !

Any one knows what is wrong here ?

Updating the list

I have a program that updates the values of the select when a user takes on action on the page, unfortunately ddslick doesn't also update. How could I do this without reloading the page?

support for searching options in dropdown

It would be great to have type support so when user type it will show only matched options.

Data issue when creating multiple ddslick dropdown with classes

When multiple ddslick dropdown are created on a page using 'class', each 'ddslick' dropdown is populated with content from from the previous ddslick in addition to its own. Reported on plugin's page at http://designwithpc.com/Plugins/ddSlick

Demo down

The demo site is not working.

option to deselect

Requested on plugin's page.

select field's name is missing

ddslick removes the name of the select field after it's applied. Now what's the point of an unnamed select field! Please fix this issue. If you don't fix it at least destroy ddslick as my previous issues are not answered. Don't let the people use your garbage.

Typo in your recent merge ..

Line 101
var original = obj, placeholder = $('<div').attr('id', obj.attr('id') + '-dd-placeholder');

The $('<div is the issue, it is missing the closing bracket .. Should be:

var original = obj, placeholder = $('<div>').attr('id', obj.attr('id') + '-dd-placeholder');

Sorry about the lack of a patch, I will take the time to do it right next time :)

data-url feature

It would be great to use a data-url option for fetching datas from a database.

problem with "box-sizing" css parameters

hi,

in my site I use the following css to solve many problems with browsers using the wrong model to calculate widths. To me, internet explorer got the box model right and the w3c wrong.

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box; 
    box-sizing: border-box;
}

This makes ddslick display incorrectly. see below the before (image1.png is with box sizing and image2.png is without)

Thanks! please ignore the other styling problems like "no text appearing" I think it's just that my code is not complete yet, the main problem is look at the first image, it's oversized and when you disable box sizing, the combo returns to the correct size

'onSelected' callback function on initial page load

Conflict with Jquery.Chained.

I try DDSlick with jquery.chained.js (http://www.appelsiini.net/projects/chained/demo.html), but it's get conflict. I dont know what the conflict but it simply can't use anymore.
Could you please try and fix this issue.
Thanks

Open dropdown on hover or some other type of event

i trying to twerk the plugin to fit the purpose, this should be one option of event available as long as some others depending on the user need

Add git tag

Hello @prashantchaudhary
I am the member of cdnjs project.
We want to host this library.
Git tag can help us to know your release version, and we can auto-update the version when you have new release.
Could you please help us add git tag.
Thanks for your help!

cdnjs/cdnjs#9594

It lacks a bower.json file

A bower.json file is needed to work with Bower plus Gulp. Could you add this file? The content could be like this:

{
  "name": "ddslick",
  "homepage": "https://github.com/prashantchaudhary/ddslick",
  "main": [
    "jquery.ddslick.js",
    "jquery.ddslick.min.js"
  ],
  "dependencies": {
    "jquery": ">= 1.9.1"
  }  
}

Explicit License?

Hello,

I've looked on your website and in the readme, it says its free, but does it have a certain license? Like MIT or GPL? Am i allowed to use this in Commercial applications?

I like your plugin very much - much internetz to you sir!

Greetz

The selected=selected attribute on the option is not considered when webserver sends html response

Hello,

I am using your ddslick plugin with description + image and 2 items in a jquery dialog/partial view. I select item number 2, leave other dialog options empty so the validation fails on the webserver and the partial view is re-rendered:

Thats the form I have sent and which is returned from the webserver, you will find it attached as image because somehow I can not put html code here:

the item 2 with value 1 has the selected attribute. When I debug your plugin during the sent response I found out, that
you do not honor the selected attribute on my option-tag instead you always show the index 0 as the default item:

Thats your code:

if (options.selectText.length > 0 && options.defaultSelectedIndex == null) {
obj.find('.dd-selected').html(options.selectText);
}
else {
var index = (options.defaultSelectedIndex != null && options.defaultSelectedIndex >= 0 && options.defaultSelectedIndex < options.data.length)
? options.defaultSelectedIndex
: 0;
selectIndex(obj, index);
}

When I remove your ddslick plugin everything works fine, my previously selected item is still selected after the webserver sent a response.

If you need more information please let me know.

In my opinion you should check the options and its items for a selected attribute maybe and if found get that index ?

I would be pleased to hear from you.

Cheers,

Pel

Keyboard support

Adding keyboard support for traversing and selecting ddslick options is a long requested feature.

Ignore width parameter

ddslick not recognize width attribute in initialization =(

Initial Options not works

I tried demo 1 and see that Initial Options not works. Event onSelected not works. Default width 260px is there and not 300.
Function: return this.each(function () ...
dont remember option variable on line: var options = $.extend({}, defaults, options);.

ddslick selected values not available with Form Submit

Plugin replaces the select form element with hidden input fields that don't have name attributes, so there is no form value on submission. As reported by Tim Carr @n7studios (http://twitter.com/n7studios)

Website demo link error

The link used in the demo website is broken.

https://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js

Manu.

Not working on ajax callback

ddslick is not applying to select box which is loading using ajax. Please help me with this.

var countryCodes = HttpRequest("ajaxfiles/Ajax-CountryCodes.php");

$j("#nriMobileDiv").after(''+countryCodes+'');

$j(".country_code_nri").ddslick();

This is my code, but the select box appearing as basic html select box.

Select by value

I want to programmatically select an option based on url parameters. Is it possible to select an option by its value and not by its index?

A possible selector to find de index can be the following:

$('#myDropdown li:has(.dd-option-text:contains("MyValue"))').index()

Would be cool to have it built-in so as to be able to do:

$('#myDropdown').ddslick('select', {value: "MyValue" });

Use options without descriptions but with images

When the options have images but no descriptions, after an item is selected, the dropdown gets bigger, much bigger than the options rows. The code does not handle the image and text only case. The problem happens when in the adjustSelectedHeight function.

Bug, selected: $this.is(':selected')

From ddSlick source code...

//Get data from HTML select options
obj.find('option').each(function () {
  var $this = $(this), thisData = $this.data();
  ddSelect.push({
      text: $.trim($this.text()),
      value: $this.val(),
      selected: $this.is(':selected'),
      description: thisData.description,
      imageSrc: thisData.imagesrc //keep it lowercase for HTML5 data-attributes
  });
});

I believe this could be causing a problem. selected: $this.is(':selected') will return true for the first item in the list when there is no selected="selected" attribute (i.e. even when there is nothing truly selected yet). This is jQuery being smart.

However, in the context of your jQuery plugin, this causes a problem, because there is no way to use the selectText config option if selected: $this.is(':selected') always returns at least one true value.

---

Suggested Fix

//Get data from HTML select options
obj.find('option').each(function (index) {
  var $this = $(this), thisData = $this.data();
  ddSelect.push({
      text: $.trim($this.text()),
      value: $this.val(),
      selected: obj[0].selectedIndex === index,
      description: thisData.description,
      imageSrc: thisData.imagesrc //keep it lowercase for HTML5 data-attributes
  });
});

Parts changed: function (index) and selected: obj[0].selectedIndex === index,

cannot ask to inherit the class from the select into the ddslick user interface

sometimes I want to tag the select with styles which do things like change the width, etc, but I can't do that because ddslick removes the select and replaces it with html and css that my code has no knowledge of.

so it would be nice if it kept the classes from the select, so I could write code which can detect whether it's still a select or ddslick and act accordingly in different circumstances.

the solution I found to this was as follows, can somebody verify it works and if it's a good idea, we could put it into the default distro.

on line 22, we have a defaults = {} structure, add to this "copyClass" attribute with a default, I used "true" although if you disagree false is fine, I just set true afterwards in my code, then later in the code, after line 102 which does the obj.replaceWith(placeholder) we can add an extra line

if(options.copyClass) obj.addClass(original.attr("class"));

then we're done. I was going to do a pull request, but it's such a simple solution I thought it didnt warrent making a clone just for these two lines.

I hope other people find it helpful.

Lack of license declaration

as title.

Can't select the first option using index 0 (integer)

When selecting an element by its index, the method does this check:
"if (options.index)". If selecting the 0 index element, the condition is false, and can't select the first option of the dropdown. Reported on plugin's page at http://designwithpc.com/Plugins/ddSlick

selecting 0 index item does nothing

when we try to select the item with index 0 like this:
$('#demoSetSelected').ddslick('select', {index: 0});
it does nothing.

ddslick isn't working anymore after you merged recent commits

ddslick gives error on init it no longer works. But when we collect the js from your site it works. It seems after you merged latest commits it broke down