Dynamic width using jQuery - Custom Select Box

I've made a custom select box using CSS and jQuery and until tonight I thought I was done.. but no..

The code can be viewed and played with here http://jsfiddle.net/nvv35/5/

The problem is that when using Firefox, IE or Safari the select box doesn't get the correct width. If you look at the demo using Chrome you'll see nothing wrong. The jQuery code sets the desired width for the "label" and the box looks pretty much perfect, but not in the browsers mentioned before..

The select label is way too short. Instead of getting the same width as the longest child in the drop-down it's cut off right after the text.. I just simply can't find where the problem lies..

So, I need your help guys 'n gals.

UPDATE

Final code: http://jsfiddle.net/nvv35/9/

Answers


parseInt($(this).next(".selectBox").css("border-width"), 10) is resulting a NaN.

JsFiddle: http://jsfiddle.net/nvv35/8/

Change your code to as follows:

**Update:**To get the border-width correctly specific side of the border needs to be pecified. (Check: How to get border width in jQuery/javascript)

$(document).ready(function() {
  $("select").css("display", "none");
  $(".selectContainer").css("display", "inline-block");
  $(".selectHead").each(function() {
    var newWidth = $(this).next(".selectBox").outerWidth();
      var borderWidth = parseInt($(this).next(".selectBox").css("border-left-width").replace(/[^0-9]/g,""), 10) ;
      if(isNaN(borderWidth)) borderWidth  = 0;
    newWidth = newWidth - (borderWidth * 2);
    $(this).css("width", newWidth + "px");
  });
  $(".selectHead").on("click", function() {
    $(this).next(".selectBox").show();
    $(this).closest(".selectContainer").on("mouseleave", function() {
      $(this).find(".selectBox").hide();
    });
  });
  $("li", ".optionsBox").on("click", function() {
    var newValue = $(this).attr("id").replace(/(.*)-/,"");
    $(this).closest(".selectContainer").next("select").val(newValue);
    $(this).closest(".selectBox").prev(".selectHead").html($(this).html());
    $(this).closest(".selectBox").find(".optionSelected").removeClass("optionSelected");
    $(this).addClass("optionSelected");
    $(this).closest(".selectBox").hide();
  });
});

function customSelect(){
 $('.custom-select a.open').on('click', function () {
    if ( $(this).next().hasClass('active') ) {
        $(this).next().removeClass('active').slideUp(250);
    }
    else{
        $(this).next().addClass('active').slideDown(250);
    }
});

$('.custom-select ul.options li').on('click', function () {
    var value = $(this).data('value');        
    $(this).parent().removeClass('active').slideUp(250);
    $(this).parent().parent().prev().attr('value', value);
    $(this).parent().prev().text(value);
});
}
customSelect();

- See more at: http://www.pointmycode.com/customize-select-box-with-css-and-jquery/


Need Your Help

Implementing Singleton with an Enum (in Java)

java design-patterns enums singleton

I have read that it is possible to implement Singleton in Java using an Enum such as:

How can I create a chat communication channel between 2 users in asp.net

javascript asp.net web-services

I want to add a chat application in my website. I have developed almost part of chat application.But I am getting problem to create chat communication channel.I an using Web-Service to insert and