Added AMD Wrapper + merged with @eluceo patch that corrects position/width of span if the element is not visible

.gitignore

@@ -0,0 +1 @@
+node_modules

Gruntfile.js

@@ -0,0 +1,14 @@
+module.exports = function(grunt) {
+    grunt.initConfig({
+        uglify: {
+            customSelect: {
+                files: {
+                    'jquery.customSelect.min.js': 'jquery.customSelect.js'
+                }
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+    grunt.registerTask('default', ['uglify:customSelect']);
+};

README.md

@@ -78,7 +78,18 @@ $('#someSelectBox').customSelect({
 
 
 ## Changelog
-Version 0.4.1 (26/05/2013)
+Version 0.4.4 (23/07/2013)
+ * Added amd/commonjs wrapper.
+ * Added grunt file to project for minification.
+
+Version 0.4.3 (23/07/2013)
+ * Calculate length and position correct, if select box is hidden (fix issue #44 (https://github.com/adamcoulombe/jquery.customSelect/issues/44) by @eluceo)
+
+Version 0.4.2 (22/05/2013)
+ * Remember `position` of select element (fix issue #38 (https://github.com/adamcoulombe/jquery.customSelect/pull/38) by @Jako)
+ * `tab` key support
+
+Version 0.4.1 (13/05/2013)
  * Fixed multiple `customSelectOpen` handling in FF
  * `Esc` & `Enter` key support
 
@@ -147,4 +158,4 @@ Dual licensed under the MIT and GPL licenses:
  *    http://www.opensource.org/licenses/mit-license.php
 
 
-This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality,it can be treated just like any ordinary HTML select box.
+This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality,it can be treated just like any ordinary HTML select box.

bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "jquery.customSelect",
+  "version": "0.4.3",
+  "main": "./jquery.customSelect.js",
+  "dependencies": {
+    "jquery": ">=1.7.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/adamcoulombe/jquery.customSelect.git"
+  },
+  "homepage": "https://github.com/adamcoulombe/jquery.customSelect",
+  "authors": [
+    "Adam Coulombe"
+  ],
+  "description": "Lightweight, unobtrusive, custom style select boxes with jQuery",
+  "license": "MIT,GPL2",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}

index.html

@@ -14,24 +14,29 @@
 </script>
 <style type="text/css">
 body {
-	font-family:Arial, Helvetica, sans-serif
+  font-family:Arial, Helvetica, sans-serif
 }
 span.customSelect {
-	font-size:11px;
-	background-color: #f5f0de;
-	color:#7c7c7c;
-	padding:5px 7px;
-	border:1px solid #e7dab0;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	border-radius: 5px 5px;
+  font-size:11px;
+  background-color: #f5f0de;
+  color:#7c7c7c;
+  padding:5px 7px;
+  border:1px solid #e7dab0;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px 5px;
 }
 span.customSelect.changed {
-	background-color: #f0dea4;
+  background-color: #f0dea4;
 }
 .customSelectInner {
-	background:url(customSelect-arrow.gif) no-repeat center right;
+  background:url(customSelect-arrow.gif) no-repeat center right;
 }
+
+.notVisible{
+  display:none;
+}
+
 </style>
 </head>
 
@@ -55,6 +60,17 @@ <h2>Demo:</h2>
   <option>4</option>
   <option>5</option>
 </select>
+<label><a href="javascript:$('#hidden-test').toggle()">Initially Hidden:</a></label>
+<span id="hidden-test" class="notVisible" >
+  <select class="styled">
+    <option>one</option>
+    <option>two</option>
+    <option>something</option>
+    <option>4</option>
+    <option>5</option>
+  </select>
+</span>
+
 <h3>Notes:</h3>
 <p>This technique will not work for browsers IE6 and older, but rather safely and cleanly degrades to default styling for those select boxes.</p>
 <h3>Download from github:</h3>
@@ -65,7 +81,7 @@ <h3>Usage:</h3>
   <tr>
     <td valign="top"><strong>Javascript: </strong>
       <pre>$(document).ready(function(){
-	$('.mySelectBoxClass').customSelect();
+  $('.mySelectBoxClass').customSelect();
 });</pre></td>
     <td valign="top">&nbsp;</td>
     <td valign="top"><strong>CSS:</strong>

jquery.customSelect.js

@@ -1,14 +1,25 @@
 /*!
- * jquery.customSelect() - v0.4.1
+ * jquery.customSelect() - v0.4.3
  * http://adam.co/lab/jquery/customselect/
- * 2013-05-13
+ * 2013-07-23
  *
  * Copyright 2013 Adam Coulombe
  * @license http://www.opensource.org/licenses/mit-license.html MIT License
  * @license http://www.gnu.org/licenses/gpl.html GPL2 License 
  */
 
-(function ($) {
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS
+        factory(require('jquery'));
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
     'use strict';
 
     $.fn.extend({
@@ -49,7 +60,8 @@
             return this.each(function () {
                 var $select = $(this),
                     customSelectInnerSpan = $('<span />').addClass(getClass('Inner')),
-                    customSelectSpan = $('<span />');
+                    customSelectSpan = $('<span />'),
+                    position = $select.position();
 
                 $select.after(customSelectSpan.append(customSelectInnerSpan));
 
@@ -65,8 +77,25 @@
                 $select
                     .addClass('hasCustomSelect')
                     .on('update', function () {
-						changed($select,customSelectSpan);
-
+                        changed($select,customSelectSpan);
+
+                        // if the select box is hidden the calculations for selectBoxWidth and selectBoxHeight
+                        // will be incorrect (eg, if the selectBox is in a tab or overlay).
+                        // ensure the elements are shown, calculate the correct length then re-hide the elements.
+
+                        var hiddenParents = $select.parents().add($select).filter(function () {
+                            if ($(this).css('display') === 'none') {
+                                return true;
+                            }
+                        });
+
+                        hiddenParents.each(function(index, element) {
+                            var $element = $(element);
+                            $element.data('origStyle', $element.attr('style'));
+                            $element.show();
+                        });
+
+                        // calculate lengths
                         var selectBoxWidth = parseInt($select.outerWidth(), 10) -
                                 (parseInt(customSelectSpan.outerWidth(), 10) -
                                     parseInt(customSelectSpan.width(), 10));
@@ -89,13 +118,35 @@
                             display: 'inline-block'
                         });
 
+                        // calculate correct position
+                        position = $select.position();
+
+                        var customSelectSpanOuterWidth = customSelectSpan.outerWidth();
+
+                        // re-hide hidden parents
+                        hiddenParents.each(function (index, element) {
+                            var $element = $(element),
+                                origStyle = $element.data('origStyle');
+
+                            if (origStyle) {
+                                $element.attr('style', origStyle);
+                            } else {
+                                $element.removeAttr('style');
+                            }
+
+                            $element.removeData('origStyle');
+                        });
+
+                        // modify style of select
                         $select.css({
                             '-webkit-appearance': 'menulist-button',
-                            width:                customSelectSpan.outerWidth(),
+                            width:                customSelectSpanOuterWidth,
                             position:             'absolute',
                             opacity:              0,
                             height:               selectBoxHeight,
-                            fontSize:             customSelectSpan.css('font-size')
+                            fontSize:             customSelectSpan.css('font-size'),
+                            left:                 position.left,
+                            top:                  position.top
                         });
                     })
                     .on('change', function () {
@@ -107,7 +158,7 @@
                             $select.blur();
                             $select.focus();
                         }else{
-                            if(e.which==13||e.which==27){
+                            if(e.which==13||e.which==27||e.which==9){
                                 changed($select,customSelectSpan);
                             }
                         }
@@ -149,4 +200,4 @@
             });
         }
     });
-})(jQuery);
+}));

package.json

@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "grunt": "~0.4.2",
+    "grunt-contrib-uglify": "~0.2.7"
+  }
+}