Skip to content

Commit

Permalink
handle disabled selects and added methods to disable/enable. browser …
Browse files Browse the repository at this point in the history
…fixes
  • Loading branch information
andrewfiorillo committed Jun 10, 2012
1 parent e69d0d4 commit 82bf1f6
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 76 deletions.
27 changes: 14 additions & 13 deletions css/fancyselect.css
Expand Up @@ -13,31 +13,22 @@
position: relative;
overflow: hidden;
}
.fancyselect.focus {
border: 1px solid #96b7ff;
-moz-box-shadow: 0 0 4px rgba(150,183,255,0.7), 0 1px 1px rgba(0,0,0,0.05);
-webkit-box-shadow: 0 0 4px rgba(150,183,255,0.7), 0 1px 1px rgba(0,0,0,0.05);
box-shadow: 0 0 4px rgba(150,183,255,0.7), 0 1px 1px rgba(0,0,0,0.05);
}
.fancyselect select, .selecttext {
-webkit-appearance: none;
border: 0;
background: none;
padding: 5px;
font-family: Helvetica Neue, Arial, sans-serif;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #555;
height: 26px;
position: relative;
}
.fancyselect.webkit select {
padding-right: 20px;
cursor: pointer;
}
.selecttext {
position: absolute;
display: block;
padding: 0 9px;
line-height: 25px;
line-height: 26px;
}
.fancyselect .arrows {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAKCAYAAAB4zEQNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4QURGODFFOTU3MjgxMUUxQjBCMkZCOTU5OTkzODVBQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4QURGODFFQTU3MjgxMUUxQjBCMkZCOTU5OTkzODVBQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRBNzBDMUM0NTY5RjExRTFCMEIyRkI5NTk5OTM4NUFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhBREY4MUU4NTcyODExRTFCMEIyRkI5NTk5OTM4NUFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+b05x8QAAAEpJREFUeNp8kIEKAEEERIfuq/w/vzWb67ac1r6SMUIBSexwd9Za8RERrDnRbtRachUGJHdPKC48/d5v0szk1Ehft+iNV9yesAQYAOC/RCWRWPXTAAAAAElFTkSuQmCC) 0 0 no-repeat;
Expand All @@ -48,4 +39,14 @@
top: 8px;
right: 8px;
}
.fancyselect.focus {
border: 1px solid #96b7ff;
-moz-box-shadow: 0 0 4px rgba(150,183,255,0.7), 0 1px 1px rgba(0,0,0,0.05);
-webkit-box-shadow: 0 0 4px rgba(150,183,255,0.7), 0 1px 1px rgba(0,0,0,0.05);
box-shadow: 0 0 4px rgba(150,183,255,0.7), 0 1px 1px rgba(0,0,0,0.05);
}
.fancyselect.disabled .selecttext,
.fancyselect.disabled select {
color: #999;
cursor: default;
}
102 changes: 64 additions & 38 deletions index.html
Expand Up @@ -10,59 +10,85 @@
<link rel="stylesheet" href="css/fancyselect.css" type="text/css" />

<style type="text/css">
body {
background: white;
text-align: center;
font-family: "proxima nova", "helvetica neue", helvetica, arial, sans-serif;
font-size: 13px;
color: #333;
padding: 20px;
}
#wrapper {
background: #f6f6f6;
padding: 40px;
margin: 40px;
margin: 0 auto;
width: 400px;
}
h1 {
text-align: center;
font-size: 22px;
font-weight: 600;
}
</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fancyselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#wrapper select").fancyselect();

selects = $("select");

$(selects).fancyselect();
});
</script>

</head>

<body>

<div id="wrapper">

<h1>Styling Select Boxes</h1>
<br />
<br />


<div id="wrapper">

<select>
<option>One</option>
<option>Two</option>
<option>The</option>
</select>

&nbsp;

<select>
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>

&nbsp;

<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<br /><br />

<select>
<option>Something</option>
<option>Something a little bit longer</option>
<option>something medium</option>
</select>

</div>
<select>
<option>One</option>
<option>Two</option>
<option>The</option>
</select>

&nbsp;

<select>
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>

&nbsp;

<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<br /><br />

<select>
<option>Something</option>
<option>Something a little bit longer</option>
<option>something medium</option>
</select>

<br /><br />

<select disabled="disabled">
<option>Something</option>
<option>Something a little bit longer</option>
<option>something medium</option>
</select>

</div>


Expand Down
54 changes: 29 additions & 25 deletions js/fancyselect.js
@@ -1,28 +1,32 @@
$.fn.fancyselect = function() {
(function($){

$.fn.fancyselect = function() {

var browser = "";
if ($.browser.webkit) browser = "webkit";

this.each(function(i,select) {

$(select).wrap('<span class="fancyselect ' + browser + '" />');
$(select).before('<span class="arrows" />');

$(select).focus(function() {
$(this).parent('span').addClass('focus');
});
$(select).blur(function() {
$(this).parent('span').removeClass('focus');
this.each(function(i,select) {
$(select)
.wrap('<span class="fancyselect" />')
.before('<span class="arrows" />')
.before('<span class="selecttext" />')
.fadeTo(0,0)
.focus(function() { $(this).parent('span').addClass('focus'); })
.blur(function() { $(this).parent('span').removeClass('focus'); })
.on("change keyup", function() { $(this).prev(".selecttext").text($(select).val()); })
.siblings(".selecttext").text($(select).val());

select.disable = function() {
$(this).attr("disabled", "disabled");
$(this).parent().addClass('disabled');
};

select.enable = function() {
$(this).removeAttr('disabled');
$(this).parent().removeClass('disabled');
};

if ($(select).attr("disabled")) select.disable();

});

if(browser != "webkit") {
$(select).fadeTo(0,0).before('<span class="selecttext" />');
$(select).bind("change keyup", function() {
$(this).siblings(".selecttext").text($(select).val());
});
$(this).siblings(".selecttext").text($(select).val());
}

});

};
};

})( jQuery );

0 comments on commit 82bf1f6

Please sign in to comment.