Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <br/>
  <h1>Chosen - diablo3 style</h1><br/>
  <div class="row">
    <div class="col-md-6">
      <h3>Single select // character selection :</h3>
      <select class="d3-select" id="character-selection" data-placeholder="Choose a character...">
          <option value="barbarian"  data-img-src="https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/barbarianmale.png">Barbarian</option>
          <option value="crusader" data-img-src="https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/crusadermale.png">Crusader</option>
        <option value="demon-hunter" data-img-src="https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/demon-huntermale.png">Demon Hunter</option>                  <option data-img-src="https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/monkmale.png" value="Monk" >Monk</option>
       <option value="necromancer" data-img-src="https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/necromancermale.png">Necromancer</option>
       <option value="witch-doctor" data-img-src="https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/witch-doctormale.png">Witch Doctor</option>
        <option value="wizard" data-img-src="https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/wizardmale.png">Wizard</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <br/><br/>
      <h3>Multiple select // Conquest selection :</h3>
      <select class="d3-select" data-placeholder="Choose a conquest..." multiple>
         <option value="Race to the top">Race to the top</option>
         <option value="Living Dangerously">Living Dangerously</option>
         <option value="It's A Marathon...">It's A Marathon...</option>       
         <option value="Better Lucky Than Good">Better Lucky Than Good</option>
        <option value="Divinity">Divinity</option>
       <option value="Lionhearted">Lionhearted</option>
        <option value="Sprinter">Sprinter</option>
        <option value="Speed Racer">Speed Racer</option>
        <option value="Death Gets Got">Death Gets Got</option>
       <option value="Sprinter">Top Spot</option>
       <option value="Now You've Done It">Now You've Done It</option>
       <option value="Now You've Really Done It">Now You've Really Done It</option>
        <option value="The Thrill">The Thrill</option>
        <option value="Super Human">Super Human</option>
        <option value="On a good day">On a good day</option>
        <option value="I can't stop">I can't stop</option>
         <option value="Avarice">Avarice</option>
       <option value="Avaritia">Avaritia</option>                             
      </select>
    </div>
  </div>
</div>
            
          
!
            
              /**
 * Image Select Styles
 *
 * @author     Web Semantics, Inc. Dev Team <info@websemantics.ca>
 * @copyright  2011-2015 Web Semantics, Inc.
 * @link       http://websemantics.ca
 * @license    https://opensource.org/licenses/MIT
 */

/* Tag image */
.chose-image {
	width:55px;
	max-height:55px;
	padding: 2px 5px 3px 0px;
	vertical-align:middle;
}

.chose-image.rtl {
	padding: 2px 0px 3px 5px;
}

/* Image for Single mode */
.chose-image-small {
	width: 26px;
	max-height: 26px;
	vertical-align: middle;
	margin: -3px 3px 0 0;
}

.chose-image-small.rtl {
	margin: -3px 0 0 3px;
}

/* Images appended to the li(s) */
.chose-image-list {
	width: 26px;
	max-height: 26px;
	vertical-align: middle;
	margin: -3px 3px 0 0;
}

.chose-image-list.rtl {
	margin: -3px 0 0 3px;
}

/* Grey-out image for Multi mode */
.chosen-container-multi .result-selected img {
	opacity: 0.3;
}


/*Select container*/
.chosen-container{
  font-size:18px;
  height:44px;
}

.chosen-container.chosen-container-multi{
  height:auto;
}

.chosen-container-single .chosen-single, .chosen-container-active.chosen-with-drop .chosen-single, .chosen-container-multi .chosen-choices{
      border: none;
  color:white !important;
  height:44px;
  line-height:30px;
  background :transparent;
  box-shadow:none;
  padding:0;
  padding-left:8px;
    text-shadow: 1px 1px #444444;
    border-radius: 0;
    border-style: solid;
    border-width: 7px 7px 7px 7px;
    -moz-border-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrolldown.png) 7 7 7 7 fill stretch repeat;
    -webkit-border-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrolldown.png) 7 7 7 7 fill stretch repeat;
    -o-border-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrolldown.png) 7 7 7 7 fill stretch repeat;
    border-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrolldown.png) 7 7 7 7 fill stretch repeat;
}

.chosen-container-multi .chosen-choices{
  height:auto;
}


/*Select button*/
.chosen-container-single .chosen-single div, .chosen-container-active.chosen-with-drop .chosen-single div{
  top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    margin-right: -1px;
    width: 32px;
    height: 32px;
    background: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/ScrolldownButton.png);
    background-position: left top;
}

.chosen-container-single:hover .chosen-single div{
  background-position: left center;
}

.chosen-container-single:active .chosen-single div{
  background-position: left bottom;
}

.chosen-container-active.chosen-with-drop .chosen-single div{
  background-position:center top;
}

.chosen-container-active.chosen-with-drop .chosen-single:hover div{
  background-position:center center;
}

.chosen-container-active.chosen-with-drop .chosen-single:active div{
  background-position:center bottom;
}

.chosen-container-single .chosen-single div b{
  background:none;
}

/*Select dropdown*/

.chosen-container .chosen-drop{
  border: none;
  margin-top:0.1em;
  box-shadow : none;
    border-radius: 0;
    border-style: solid;
    border-width: 7px 7px 7px 7px;
    -moz-border-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrolldown.png) 7 7 7 7 fill stretch repeat;
    -webkit-border-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrolldown.png) 7 7 7 7 fill stretch repeat;
    -o-border-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrolldown.png) 7 7 7 7 fill stretch repeat;
    border-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrolldown.png) 7 7 7 7 fill stretch repeat;
    background: none;
}

.chosen-container .chosen-results{
    color:#b3a684;
}

.chosen-container .chosen-results li.active-result{
  padding:6px;
}

.chosen-container .chosen-results li.highlighted {
  background-color: #da7e01;
   background-image:none;
  color: #fff;
}

.chosen-container .chosen-results li.result-selected{
      background-color: #810102;
  color:white;
}

.chosen-container .chosen-results li.result-selected:hover{
    background-color: #da7e01;
  color: #fff;
}

/*scroll*/

.mCSB_inside>.mCSB_container{
        margin-right:38px;
    }

   .mCSB_inside>.mCSB_container{
    margin-right:34px;
   }

   .mCSB_scrollTools{
        width:33px;
        min-height:10px;
        opacity:1;
    }

     .mCSB_scrollTools .mCSB_buttonUp{
        background-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/ScrollArrowBottom.png);
        width:33px;
        height:33px;
        left:0;
        right:0;
        margin:auto;
        background-position:right top !important;
        opacity:1;
    }


     .mCSB_scrollTools .mCSB_buttonDown{
        background-image: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/ScrollArrowBottom.png);
        width:33px;
        height:33px;
        left:0;
        right:0;
        margin:auto;
        background-position:left top !important;
        opacity:1;
    }

   .mCSB_scrollTools .mCSB_buttonUp:hover{
        background-position:right -33px !important;
    }

    .mCSB_scrollTools .mCSB_buttonDown:hover{
        background-position:left -33px !important;
    }

    .mCSB_scrollTools .mCSB_buttonUp:active{
        background-position:right -66px !important;
    }

   .mCSB_scrollTools .mCSB_buttonDown:active{
        background-position:left -66px !important;
    }

     .mCSB_scrollTools a+.mCSB_draggerContainer{
        margin-top:35px;
        margin-bottom:33px;
    }

     .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail{
        width:100%;
        background:url("https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/scrollbar-vertical.png");
    }

.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 100%;
    background: url(https://raw.githubusercontent.com/cromartie1984/diablo3-project/master/ScrollButton.png);
    background-position: left top !important;
}
     .mCSB_scrollTools .mCSB_dragger{
        width:25px;
        height: 35px;
        left:0;
        right:0;
        margin:auto;
    }

  .img-flag {
    height: 26px;
    width: 26px;
    margin-top: -4px;
}

.chosen-drop .chosen-results {
  max-height: 125px !important;
}

            
          
!
            
              /**
 * Image Select (Version 1.8)
 *
 * Image Select is an extention to the Chosen, a Select Box Enhancer for
 * jQuery and Prototype, full source at https://github.com/harvesthq/chosen
 *
 * This plugin extension was designed as a humanized UI element for social networking
 * sites that need to faciliate relations between people. Research shows that people
 * are extremely sensitvie to photos of others, so we needed to revamp the traditional
 * UI elements to make them more intuitive and human.
 *
 * Hope you find it helpful, and get back if you have any feedback/improvements.
 *
 * @author    Adnan M.Sagar, PhD <adnan@websemantics.ca>
 * @copyright 2002-2015 Web Semantics, Inc. (http://websemantics.ca) & AlterSpark Corp. (http://www.alterspark.com)
 * @license   http://www.opensource.org/licenses/mit-license.php MIT
 * @link      http://websemantics.ca
 * @package   websemantics/image-select
 */

(function($) {

// Image template, this can be overridden from the constructor (options.template),
// must contains {src} placeholder. Ther eare two class names
// 'chose-image' or 'chose-image-small', modifiy in CSS
var fn_template = '<img class="{class_name}" src="{url}" />'

function prependTemplate(element, option, template, rtl, multiple, cls){
    // summery:
    // This will fill-in the provided template with image source and css class
    // then add it to the element.
    //
    // element: Dom
    //          This is the span node
    // object: Object,
    //          The select option to get image url
    // template: String
    //          Html content
    // rtl: Boolean,
    //          Right to Left
    // multiple: Boolean
    //          Used to select the approperiate css class, default to 'true'
    // cls*: String (optional)
    //          Css styles class

    var src = $(option).data('img-src')

    if(src != undefined && src > ''){

        element = $(element)

        text     = $(option).text()
        multiple = (multiple != undefined) ? multiple : true
        cls      = cls || (multiple ? 'chose-image' : 'chose-image-small')
        cls      = rtl ? cls + ' rtl' : cls
        template = template.replace('{url}',src)
                           .replace('{class_name}',cls)
                           .replace('{text}',text)

        // Empty the element
        element.empty()

        // Insert after if ltr or multiple select, otherwise, insert before
        if(rtl && multiple){
            element.append(template)
        }
        else {
            element.prepend(template)
        }
    }
}

function getSelectedOptions(chosen){
    // summery:
    //      Return a list of selected items/options with the selected 'option' elements
    //      and chosen 'span' elements.
    //
    // chosen: Chosen
    //          The Chosen object

    var items    = []
    var options  = $(chosen.form_field).find('option:selected') || []
    var spans    = (chosen.is_multiple) ? $(chosen.container).find('.chosen-choices span'):
                                          $(chosen.container).find('.chosen-single span')

    for(var i = 0; i < options.length; i++)
        for(var j = 0; j < spans.length; j++)
            if($(spans[j]).text() == $(options[i]).text())
                items.push({span:spans[j],option:options[i]})

    return items
}

// Store the original 'chosen' method
var fn_chosen = $.fn.chosen

$.fn.extend({
 // summery:
 //  Extend the original 'chosen' method to support images
 chosen: function(params) {

    params = params || {}

    // Original behavior - use function.apply to preserve context
    var ret = fn_chosen.apply(this, arguments)

    // Process all select elements to attach event handlers
    // (change, hiding_dropdown and showing_dropdown)

    this.each(function() {

        var $this = $(this), chosen = $this.data('chosen')

        $this.on("chosen:hiding_dropdown", function(e, chosen){
            // summery
            //  Triggers when hidding dropdown, explain why:TODO.
            //
            // evt: Event
            //      The event object
            // _chosen: Object {chosen:Chosen}
            //      Contains the current instance of Chosen class

            var options       = getSelectedOptions(chosen.chosen)
            var rtl           = chosen.chosen.is_rtl
            var multiple      = chosen.chosen.is_multiple
            var html_template = params.html_template ||
                                (rtl && multiple ? '{text}' + fn_template : fn_template + '{text}')

            for(var i = 0; i < options.length; i++){
                prependTemplate(options[i].span, options[i].option, html_template, rtl, multiple)
            }
        })

        $this.on("chosen:showing_dropdown", function showing_dropdown(evt, chosen){
            // summery
            //    This function is triggered when the chosen instance dropdown list
            //    becomes visible. http://forwebonly.com/jquery-chosen-custom-events-and-how-to-use-them/
            //
            // evt: Event
            //      The event object
            // chosen: Object {chosen:Chosen}
            //      Contains the current instance of Chosen class

            var chosen        = chosen.chosen
            var options       = chosen.form_field.options || []
            var rtl           = chosen.is_rtl
            var html_template = params.html_template ||
                                (rtl ? '{text}'+fn_template : fn_template+'{text}')

            var lis = $(chosen.container).find('.chosen-drop ul li:not(:has(img))')

            for(var i = 0; i < lis.length; i++){
                var li      = lis[i]
                var option  = $(options[i])
                var idx     = $(li).attr('data-option-array-index')

                /* correct option index */

                if (idx){
                  option = options[chosen.results_data[idx].options_index]
                  prependTemplate(li, option, html_template, rtl, true, 'chose-image-list')
                }

            }
        })

        $this.on("chosen:ready", function change(e, chosen){
            // summery:
            //  Trigger hide dropdown when ready.
            //  TODO: remove as it is never triggered!
            $this.trigger('chosen:hiding_dropdown',chosen)
        })

        $this.on("chosen:updated", function change(e){
            // summery
            //  Update after `chosen:updated` event is triggered
          $this.trigger('chosen:hiding_dropdown',{chosen:chosen})
        })

        $this.on('chosen:filter', function(evt, chosen){
            // summery
            //  Support search, pending: https://github.com/harvesthq/chosen/pull/2373
          $this.trigger('chosen:showing_dropdown',{chosen:chosen.chosen})
        })

        // Finally, trigger hiding_dropdown on all select elements
        if(typeof chosen != 'undefined') {
          $this.trigger('chosen:hiding_dropdown',{chosen:chosen})
        }
    })
    return $(this);
 }
})


})(jQuery)

$(".d3-select").chosen({
  disable_search : true,
  /*disable_search_threshold: 8,*/
  no_results_text: "Oops, nothing found!",
  max_selected_options: 5,
  allow_single_deselect: false,
  width: "100%",
  inherit_select_classes : false,
  placeholder_text_multiple : 'laa',
  placeholder_text_single : '',
  case_sensitive_search : false,
});

$("#character-selection").on('change', function(evt, params) {
    console.log($(this).val());
  });


/*$("#character-selection").trigger("chosen:updated");*/

/*$("#character-selection").chosen("destroy");*/

$('.d3-select').on('chosen:showing_dropdown', function(evt, params) {
   /* $('.chosen-results:visible').mCustomScrollbar({
      theme: 'minimal-dark'
    });*/
  
      $(".chosen-results").mCustomScrollbar({
         scrollButtons:{
                    enable:true,
                    scrollAmount : "auto",
                    scrollType: "stepless" 
                },
                keyboard:{ 
                    enable: true,
                    scrollAmount : "auto",
                    scrollType: "stepless" 
                },
                autoDraggerLength: false,
                autoHideScrollbar : false,
                autoExpandScrollbar : false,
                snapAmount : 5,
                alwaysShowScrollbar : 0, //to show top and bottom scroll buttons
                mouseWheel:{ 
                    disableOver: ["select","option","keygen","datalist"],
                    deltaFactor : "200"
                },
                theme : "light-2"
      });
    });

    $('.d3-select').on('chosen:hiding_dropdown', function(evt, params) {
      if($(".chosen-results").length) {
        $(".chosen-results").mCustomScrollbar("destroy");
      }
      
  
    });
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console