From 2a8bd04b93b206d69ff6702790485b6416d19438 Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Thu, 28 Jul 2011 22:33:14 +0200 Subject: [PATCH 1/9] using data-placeholder instead of title attribute --- chosen/chosen.jquery.js | 2 +- chosen/chosen.proto.js | 2 +- coffee/chosen.jquery.coffee | 4 ++-- coffee/chosen.proto.coffee | 2 +- example.html | 20 ++++++++++---------- example.jquery.html | 20 ++++++++++---------- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js index e13eabc..64436bc 100644 --- a/chosen/chosen.jquery.js +++ b/chosen/chosen.jquery.js @@ -46,7 +46,7 @@ this.container_id = this.form_field.id.length ? this.form_field.id.replace('.', '_') : this.generate_field_id(); this.container_id += "_chzn"; this.f_width = this.form_field_jq.width(); - this.default_text = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default; + this.default_text = this.form_field_jq.data('placeholder') ? this.form_field_jq.data('placeholder') : this.default_text_default; container_div = $("
", { id: this.container_id, "class": 'chzn-container', diff --git a/chosen/chosen.proto.js b/chosen/chosen.proto.js index 1588041..627bcf8 100644 --- a/chosen/chosen.proto.js +++ b/chosen/chosen.proto.js @@ -42,7 +42,7 @@ 'class': 'chzn-container', 'style': 'width: ' + this.f_width + 'px' }; - this.default_text = this.form_field.readAttribute('title') ? this.form_field.readAttribute('title') : this.default_text_default; + this.default_text = this.form_field.readAttribute('data-placeholder') ? this.form_field.readAttribute('data-placeholder') : this.default_text_default; base_template = this.is_multiple ? new Element('div', container_props).update(this.multi_temp.evaluate({ "default": this.default_text })) : new Element('div', container_props).update(this.single_temp.evaluate({ diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index 3369e8a..e46a063 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -15,7 +15,7 @@ $.fn.extend({ $(this).each((input_field) -> new Chosen(this, data, options) unless ($ this).hasClass "chzn-done" ) -}) +}) class Chosen @@ -48,7 +48,7 @@ class Chosen @f_width = @form_field_jq.width() - @default_text = if @form_field_jq.attr 'title' then @form_field_jq.attr 'title' else @default_text_default + @default_text = if @form_field_jq.data 'placeholder' then @form_field_jq.data 'placeholder' else @default_text_default container_div = ($ "
", { id: @container_id diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index f73cac0..b997a4f 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -50,7 +50,7 @@ class Chosen 'class': 'chzn-container' 'style': 'width: ' + (@f_width) + 'px' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter - @default_text = if @form_field.readAttribute 'title' then @form_field.readAttribute 'title' else @default_text_default + @default_text = if @form_field.readAttribute 'data-placeholder' then @form_field.readAttribute 'data-placeholder' else @default_text_default base_template = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) ) diff --git a/example.html b/example.html index 970f1ce..225d170 100644 --- a/example.html +++ b/example.html @@ -58,7 +58,7 @@
Turns This - @@ -306,7 +306,7 @@
Into This - @@ -559,7 +559,7 @@
Turns This - @@ -807,7 +807,7 @@
Into This - @@ -1060,7 +1060,7 @@
Single Select with Groups - @@ -1114,7 +1114,7 @@
Multiple Select with Groups - @@ -1173,7 +1173,7 @@

Chosen automatically highlights selected options and removes disabled options.

Single Select - @@ -1187,7 +1187,7 @@
Multiple Select with Groups - @@ -1203,8 +1203,8 @@

Default Text Support

-

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's title value. If no title value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.

- <select title="Choose a country..." style="width:350px;" multiple class="chzn-select"> +

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.

+ <select data-placeholder="Choose a country..." style="width:350px;" multiple class="chzn-select">

Change / Update Events

diff --git a/example.jquery.html b/example.jquery.html index 8117d61..ad8cf3d 100644 --- a/example.jquery.html +++ b/example.jquery.html @@ -58,7 +58,7 @@
Turns This - @@ -306,7 +306,7 @@
Into This - @@ -559,7 +559,7 @@
Turns This - @@ -807,7 +807,7 @@
Into This - @@ -1060,7 +1060,7 @@
Single Select with Groups - @@ -1114,7 +1114,7 @@
Multiple Select with Groups - @@ -1173,7 +1173,7 @@

Chosen automatically highlights selected options and removes disabled options.

Single Select - @@ -1187,7 +1187,7 @@
Multiple Select with Groups - @@ -1203,8 +1203,8 @@

Default Text Support

-

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's title value. If no title value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.

- <select title="Choose a country..." style="width:350px;" multiple class="chzn-select"> +

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.

+ <select data-placehoder="Choose a country..." style="width:350px;" multiple class="chzn-select">

Change / Update Events

From 0bd91155808c2a044a744b470745932c85abf9ce Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Fri, 29 Jul 2011 00:06:21 +0200 Subject: [PATCH 2/9] - smaller sprite and crunched the new png file - better looking search icon - fixed the position of search icon, using 97% the icon is not gonna be fixed position (vary depending on width), now it's 100% but the icon has fixed spacing from the sprite border - fixed the padding of search input so that text does not go over the search icon --- chosen/chosen-sprite.png | Bin 1866 -> 742 bytes chosen/chosen.css | 14 +++++++------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/chosen/chosen-sprite.png b/chosen/chosen-sprite.png index 6ec9bbf1e6d77cd0e5f3d5ab2ae690b59cda01ea..f20db4439ea5c1038126bf326c8fd048b03a8226 100644 GIT binary patch literal 742 zcmeAS@N?(olHy`uVBq!ia0vp^HbAV#!3-qV=X2}@QlA5SLR>pKI{yFvKXc~Hw6wJT z{{AOVo_zoQeZqtZ&!0cvw{PF?-@ki%d;k6WS6EoMdiClhOP1WeeS7cTz4PYH`}FD4 zt5>h?-n~0()~rX59=&++V%xTD`T6-@zI<7}eEIzO^LOst`S@T)vFse zZ0PFhnmc#y*RNl9?AVc)msea|{PX9}Ns}gR+O%o+?%jtD9eVii;l+y=r%jvo;K760 zvu76+6kNZ4ed^SyPoF-WIC0|Z*ROy4_>r5N`~Lm=&!0c{_4O@WxbWAnUpYBBmoHy_ z_Uzfgg9n!`T{?O4j}$9Asc%4D@ty45_&F_R{g9Lk0qD52mW_e8hCD#Hn3?L-tbj`>OxT zJ7v;md~}?7W?s>W`VVqX@=db;D+pYCKd;4N)z`osoP6iyoB9teW8`B#?2;Ii#BfGM zL+6u_bqvF)z6Qwy7F^e#>{}{m61e02bdHnN$L$~3eq~pF@_OO1hcV%@q4${;^UfV+ znXY)w;%ghbu4vj9l}FCEd^hZyc+KPP6}AS4MsdBpQGw+X69gF?tV83O8O(MiJx^-A zboXW1bFqq*pAC;_YOi~??#RV$D!*(*_VfK;FjaJ|%YuJ~uPm<26>Fce&`YSSyXC`g zaTdR+Ec5IClowvmjG1!3;Krqz>yXh1n|0L9Grd3bca?9u*WsE@c9af{GO=gU6uN!P*T1wlmW1%zXGCC0>p)u0Sjk);+4S+7##Y+P`qUM-a=APk6y5@Ccz9ImM)06&Qbrcr=YX z0Tl8=#$(|gi2zcrgN$ktDYU@AK#K;QPQno+tpUNLdJ>}bolxLGTA2n` zV=#&U7DZ`1nu4*2c&6`4P^l+n5$$-J@P<+JQZE4OOWo(OOIhz0dc9 z!rCZ<8lngxEt;Z{;Rl!CYYC+Wxf)1{p_(WZRZesJ%Z4#;mxRL&VKq`X~i$8`J z2*5Bzi%Ag~6vkr_aRo9A%R%mP|9}uS6Ymb4O{4LtY=0h&yNtu8@)>~~E`vG2<)N|^ z6@*|DT={!0drGcl6jW+FG7r+gUqkW`4XOghN(SMna|xJIZ=5TiI+x{Baw&K+6wAT> z=!~QnwjTYQh`(R<{+m zTrAyQ>^8?fGm@>O&D+Lt@SiQ5qqyRFcHj1%`|)KQTbdo&o|C-C^~B8YzPiPZ*p}%O zk>@wy)a5p6^W7Uz#2{Xp+?GCr8$5 zi=QrB(UdQd(tk`SxF#>~YhoUe=)%6(5Es{vvwivx`t=lx zPA%#rf5sg2jlp2f+OpIxX`sh6$Zs07ztgzsNfLtW_L^N^=|Qq4kw}L0i~|Q2Y)VgG znR33SX6ew-kP8<3czC!|$@En5k8PfD>UdUZS6y93q4Vm?&3&4<<8zt!dUJ+W5w>tT zlRFxtDD!@)s(N7~Nk2twzf);FSk!!Jb53VR$GMt~u|JoW?;ac&5O#`0qGkJ^dtc8g zWlLVR5*BBRG6*S>8g>_;%(O9(;i+in_~iR#5l@cmtlR+UwKR9=C#hlJ#)AJw)^~s zlWA&oUa+25((2X%wn%&HbPIxbqp5nuVqxy|&F)PSTgKjtjtSI%nd_AcuPDOPYTvqe z5Gq<1t0K$~o*J9~s^-7FceZXv(c$?wM;lT~?nr_%>{_^&GEAFt%LuPrPl<1zPe&il zdT=*?v3Bn%nOSUK!p!!X3%4dWxn2GB{)&nVJJ-Rf)t5hZ(z9exvkN7!mS^4WHFVh; zx_P Date: Fri, 29 Jul 2011 11:23:57 -0400 Subject: [PATCH 3/9] Took the wrong changes when fixing merge conflicts. Try again! --- chosen/chosen.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/chosen/chosen.css b/chosen/chosen.css index 4512647..2bf78fa 100644 --- a/chosen/chosen.css +++ b/chosen/chosen.css @@ -126,12 +126,12 @@ div.chzn-container div.chzn-search { white-space: nowrap; } div.chzn-container div.chzn-search input { - background: url('chosen-sprite.png') no-repeat 97% -35px, #ffffff; - background: url('chosen-sprite.png') no-repeat 97% -35px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); - background: url('chosen-sprite.png') no-repeat 97% -35px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); - background: url('chosen-sprite.png') no-repeat 97% -35px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); - background: url('chosen-sprite.png') no-repeat 97% -35px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); - background: url('chosen-sprite.png') no-repeat 97% -35px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); + background: url('chosen-sprite.png') no-repeat 100% -20px, #ffffff; + background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); + background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); background: linear-gradient(top, #ffffff 85%,#eeeeee 99%); -moz-border-radius: 0px; -webkit-border-radius: 0px; From cd3a70e551eefb9da70758dc488c687bccc4362d Mon Sep 17 00:00:00 2001 From: Patrick Filler Date: Fri, 29 Jul 2011 11:30:47 -0400 Subject: [PATCH 4/9] Updating docs to show blank option requirement in single selects. --- example.html | 2 ++ example.jquery.html | 2 ++ 2 files changed, 4 insertions(+) diff --git a/example.html b/example.html index 225d170..8ed8fac 100644 --- a/example.html +++ b/example.html @@ -59,6 +59,7 @@
Turns This + @@ -1205,6 +1206,7 @@

Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.

<select data-placehoder="Choose a country..." style="width:350px;" multiple class="chzn-select"> +

Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.

Change / Update Events

From f5ac459d7c3f6d326f6eafeb86bcc254d16790ab Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 12:46:01 +0200 Subject: [PATCH 5/9] * dded right to left support * cleaned up css file and removed a bunch of unused and redundant rule sets (even less warning with csslint) * also closes #118 using display inline-block Please enter the commit message for your changes. Lines starting --- chosen/chosen.css | 353 ++++++++++++++++++------------------ chosen/chosen.jquery.js | 3 +- coffee/chosen.jquery.coffee | 3 +- 3 files changed, 181 insertions(+), 178 deletions(-) diff --git a/chosen/chosen.css b/chosen/chosen.css index 2bf78fa..9ad2cfe 100644 --- a/chosen/chosen.css +++ b/chosen/chosen.css @@ -1,241 +1,214 @@ -div.chzn-container { +/* @group Base */ +.chzn-container { font-size: 13px; position: relative; + display: inline-block; + zoom: 1; + *display: inline; } - -div.chzn-container input { +.chzn-container .chzn-drop { background: #fff; - background: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); - background: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); - background: -o-linear-gradient(bottom, white 85%, #eeeeee 99%); - background: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); - background: linear-gradient(top, #ffffff 85%,#eeeeee 99%); border: 1px solid #aaa; - font-family: sans-serif; - font-size: 1em; - margin: 0px; - padding: 4px 20px 4px 5px; - outline: none; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -o-border-radius: 3px; - -ms-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; -} -div.chzn-container textarea:focus { - border-color: #058cf5; - -moz-box-shadow: 0px 0px 3px #aaa; - -webkit-box-shadow: 0px 0px 3px #aaa; - box-shadow: 0px 0px 3px #aaa; -} - - -div.chzn-container div.chzn-drop { - background: #FFF; - border: 1px solid #aaa; - border-width: 0 1px 1px; - left: 0; + border-top: 0; position: absolute; top: 29px; - -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); - box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); + left: 0; + -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15); + -moz-box-shadow : 0 4px 5px rgba(0,0,0,.15); + -o-box-shadow : 0 4px 5px rgba(0,0,0,.15); + box-shadow : 0 4px 5px rgba(0,0,0,.15); z-index: 999; } -div.chzn-container-single div.chzn-drop { - -moz-border-radius: 0 0 4px 4px; - -webkit-border-radius: 0 0 4px 4px; - -o-border-radius: 0 0 4px 4px; - -ms-border-radius: 0 0 4px 4px; - -khtml-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} +/* @end */ - -/* SINGLE */ -div.chzn-container a.chzn-single { - background: #ffffff; +/* @group Single Chosen */ +.chzn-container-single .chzn-single { + background-color: #fff; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%); background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%); background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%); background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%); + -webkit-border-radius: 4px; + -moz-border-radius : 4px; + border-radius : 4px; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; border: 1px solid #aaa; display: block; overflow: hidden; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -o-border-radius: 4px; - -ms-border-radius: 4px; - -khtml-border-radius: 4px; - border-radius: 4px; - height: 25px; - color: #444; - line-height: 26px; - padding: 0px 0px 0px 8px; - position: relative; - text-decoration: none; white-space: nowrap; + position: relative; + height: 26px; + line-height: 26px; + padding: 0 0 0 8px; + color: #444; + text-decoration: none; } -div.chzn-container a.chzn-single span { - display: block; +.chzn-container-single .chzn-single span { margin-right: 26px; + display: block; overflow: hidden; + white-space: nowrap; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; + -moz-binding: url('/xml/ellipsis.xml#ellipsis'); text-overflow: ellipsis; } -div.chzn-container a.chzn-single div { - -moz-border-radius-topright: 4px; - -webkit-border-top-right-radius: 4px; - -o-border-top-right-radius: 4px; - -ms-border-top-right-radius: 4px; - -khtml-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - -webkit-border-bottom-right-radius: 4px; - -o-border-bottom-right-radius: 4px; - -ms-border-bottom-right-radius: 4px; - -khtml-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; +.chzn-container-single .chzn-single div { + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius : 0 4px 4px 0; + border-radius : 0 4px 4px 0; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; background: #ccc; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); + background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%); border-left: 1px solid #aaa; - display: block; - height: 100%; position: absolute; right: 0; top: 0; + display: block; + height: 100%; width: 18px; } -div.chzn-container a.chzn-single div b { +.chzn-container-single .chzn-single div b { background: url('chosen-sprite.png') no-repeat 0 1px; display: block; width: 100%; height: 100%; } -div.chzn-container div.chzn-search { +.chzn-container-single .chzn-search { padding: 3px 4px; - margin: 0px; + margin: 0; white-space: nowrap; } -div.chzn-container div.chzn-search input { - background: url('chosen-sprite.png') no-repeat 100% -20px, #ffffff; +.chzn-container-single .chzn-search input { + background: #fff url('chosen-sprite.png') no-repeat 100% -20px; background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); - background: linear-gradient(top, #ffffff 85%,#eeeeee 99%); - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - -o-border-radius: 0px; - -ms-border-radius: 0px; - -khtml-border-radius: 0px; - border-radius: 0px; + background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%); margin: 1px 0; + padding: 4px 20px 4px 5px; outline: 0; + border: 1px solid #aaa; + font-family: sans-serif; + font-size: 1em; } +.chzn-container-single .chzn-drop { + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius : 0 0 4px 4px; + border-radius : 0 0 4px 4px; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; +} +/* @end */ - -/* Multi */ -div.chzn-container ul.chzn-choices { - background: #fff; +/* @group Multi Chosen */ +.chzn-container-multi .chzn-choices { + background-color: #fff; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%); background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%); - margin: 0; - cursor: text; border: 1px solid #aaa; + margin: 0; + padding: 0; + cursor: text; overflow: hidden; height: auto !important; height: 1%; - padding: 0; position: relative; } -div.chzn-container ul.chzn-choices:focus { - border-color: #058cf5; - -moz-box-shadow: 0px 0px 5px #999; - -webkit-box-shadow: 0px 0px 5px #999; - box-shadow: 0px 0px 5px #999; -} -div.chzn-container ul.chzn-choices li { +.chzn-container-multi .chzn-choices li { float: left; - list-style-type: none; - margin: 0px; + list-style: none; } -div.chzn-container ul.chzn-choices li.search-field { - margin: 0px; +.chzn-container-multi .chzn-choices .search-field { white-space: nowrap; - padding: 0px; + margin: 0; + padding: 0; } -div.chzn-container ul.chzn-choices li.search-field input { +.chzn-container-multi .chzn-choices .search-field input { color: #666; background: transparent !important; - border: 0px !important; + border: 0 !important; padding: 5px; margin: 1px 0; outline: 0; -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; + -moz-box-shadow : none; + -o-box-shadow : none; + box-shadow : none; } -div.chzn-container ul.chzn-choices li.search-field input.default { +.chzn-container-multi .chzn-choices .search-field .default { color: #999; } -div.chzn-container ul.chzn-choices li.search-choice { - -moz-border-radius: 3px; +.chzn-container-multi .chzn-choices .search-choice { -webkit-border-radius: 3px; - border-radius: 3px; - background: #e4e4e4; + -moz-border-radius : 3px; + border-radius : 3px; + -moz-background-clip : padding; + -webkit-background-clip: padding-box; + background-clip : padding-box; + background-color: #e4e4e4; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%); background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%); background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%); - background: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); + background-image: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 ); - background: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); + background-image: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%); color: #333; border: 1px solid #b4b4b4; line-height: 13px; padding: 3px 19px 3px 6px; + margin: 3px 0 3px 5px; position: relative; - margin: 3px 0px 3px 5px; } -div.chzn-container ul.chzn-choices li.search-choice span { +.chzn-container-multi .chzn-choices .search-choice span { cursor: default; } -div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus { +.chzn-container-multi .chzn-choices .search-choice-focus { background: #d4d4d4; } -div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close { +.chzn-container-multi .chzn-choices .search-choice .search-choice-close { + display: block; position: absolute; right: 5px; top: 6px; - display: block; width: 8px; height: 9px; font-size: 1px; background: url(chosen-sprite.png) right top no-repeat; } -div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close:hover { +.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover { background-position: right -9px; } -div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus a.search-choice-close { +.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close { background-position: right -9px; } +/* @end */ - -/* Results */ -div.chzn-container ul.chzn-results { +/* @group Results */ +.chzn-container .chzn-results { margin: 0 4px 4px 0; max-height: 190px; padding: 0 0 0 4px; @@ -243,92 +216,120 @@ div.chzn-container ul.chzn-results { overflow-x: hidden; overflow-y: auto; } -div.chzn-container-multi ul.chzn-results { +.chzn-container-multi .chzn-results { margin: -1px 0 0; padding: 0; } -div.chzn-container-multi ul.chzn-results li { - border-left: 0px !important; - border-right: 0px !important; -} -div.chzn-container ul.chzn-results li { +.chzn-container .chzn-results li { line-height: 80%; padding: 7px 7px 8px; margin: 0; - list-style-type: none; + list-style: none; } -div.chzn-container ul.chzn-results li.active-result { +.chzn-container .chzn-results .active-result { cursor: pointer; } -div.chzn-container ul.chzn-results li em { - font-style: normal; - background: #FEFFDC; -} -div.chzn-container ul.chzn-results li.highlighted { +.chzn-container .chzn-results .highlighted { background: #3875d7; color: #fff; } -div.chzn-container ul.chzn-results li.highlighted em { +.chzn-container .chzn-results li em { + background: #feffde; + font-style: normal; +} +.chzn-container .chzn-results .highlighted em { background: transparent; } -div.chzn-container ul.chzn-results li.no-results { - background: #F4F4F4; +.chzn-container .chzn-results .no-results { + background: #f4f4f4; } -div.chzn-container ul.chzn-results li.group-result { +.chzn-container .chzn-results .group-result { cursor: default; color: #999; font-weight: bold; } -div.chzn-container ul.chzn-results li.group-option { +.chzn-container .chzn-results .group-option { padding-left: 20px; } - -div.chzn-container-multi div.chzn-drop li.result-selected { +.chzn-container-multi .chzn-drop .result-selected { display: none; } +/* @end */ - - -/* Active */ -div.chzn-container-active a.chzn-single { - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); +/* @group Active */ +.chzn-container-active .chzn-single { + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); + -o-box-shadow : 0 0 5px rgba(0,0,0,.3); + box-shadow : 0 0 5px rgba(0,0,0,.3); border: 1px solid #5897fb; } -div.chzn-container-active a.chzn-single-with-drop { +.chzn-container-active .chzn-single-with-drop { border: 1px solid #aaa; - border-width: 1px 1px 1px; - -moz-box-shadow: 0px 1px 0px #FFF inset; - -webkit-box-shadow: 0px 1px 0px #FFF inset; - box-shadow: 0px 1px 0px #FFF inset; - background: #EEE; + -webkit-box-shadow: 0 1px 0 #fff inset; + -moz-box-shadow : 0 1px 0 #fff inset; + -o-box-shadow : 0 1px 0 #fff inset; + box-shadow : 0 1px 0 #fff inset; + background-color: #eee; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); - -webkit-border-bottom-left-radius: 0px; - -webkit-border-bottom-right-radius: 0px; - -moz-border-radius-bottomleft: 0px; - -moz-border-radius-bottomright: 0px; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + -webkit-border-bottom-left-radius : 0; + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomleft : 0; + -moz-border-radius-bottomright: 0; + border-bottom-left-radius : 0; + border-bottom-right-radius: 0; } -div.chzn-container-active a.chzn-single-with-drop div { +.chzn-container-active .chzn-single-with-drop div { background: transparent; border-left: none; } -div.chzn-container-active a.chzn-single-with-drop div b { +.chzn-container-active .chzn-single-with-drop div b { background-position: -18px 1px; } -div.chzn-container-active ul.chzn-choices { - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); +.chzn-container-active .chzn-choices { + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); + -o-box-shadow : 0 0 5px rgba(0,0,0,.3); + box-shadow : 0 0 5px rgba(0,0,0,.3); border: 1px solid #5897fb; } -div.chzn-container-active ul.chzn-choices input { +.chzn-container-active .chzn-choices .search-field input { color: #111 !important; } +/* @end */ + +/* @group Right to Left */ +.chzn-rtl { direction:rtl;text-align: right; } +.chzn-rtl .chzn-single { padding-left: 0; padding-right: 8px; } +.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; } +.chzn-rtl .chzn-single div { + left: 0; right: auto; + border-left: none; border-right: 1px solid #aaaaaa; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius : 4px 0 0 4px; + border-radius : 4px 0 0 4px; +} +.chzn-rtl .chzn-choices li { float: right; } +.chzn-rtl .chzn-choices .search-choice { padding: 3px 6px 3px 19px; margin: 3px 5px 3px 0; } +.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 5px; right: auto; background-position: right top;} +.chzn-rtl.chzn-container-single .chzn-results { margin-left: 4px; margin-right: 0; padding-left: 0; padding-right: 4px; } +.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 20px; } +.chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; } +.chzn-rtl .chzn-search input { + background: url('chosen-sprite.png') no-repeat -38px -20px, #ffffff; + background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%); + background: url('chosen-sprite.png') no-repeat -38px -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%); + padding: 4px 5px 4px 20px; +} +/* @end */ \ No newline at end of file diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js index 64436bc..e610561 100644 --- a/chosen/chosen.jquery.js +++ b/chosen/chosen.jquery.js @@ -25,6 +25,7 @@ this.form_field = elmn; this.form_field_jq = $(this.form_field); this.is_multiple = this.form_field.multiple; + this.is_rtl = this.form_field_jq.hasClass("chzn-rtl"); this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option"; this.set_up_html(); this.register_observers(); @@ -49,7 +50,7 @@ this.default_text = this.form_field_jq.data('placeholder') ? this.form_field_jq.data('placeholder') : this.default_text_default; container_div = $("
", { id: this.container_id, - "class": 'chzn-container', + "class": "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0), style: 'width: ' + this.f_width + 'px;' }); if (this.is_multiple) { diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index e46a063..1bbcecc 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -25,6 +25,7 @@ class Chosen @form_field = elmn @form_field_jq = $ @form_field @is_multiple = @form_field.multiple + @is_rtl = @form_field_jq.hasClass "chzn-rtl" @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option" @@ -52,7 +53,7 @@ class Chosen container_div = ($ "
", { id: @container_id - class: 'chzn-container' + class: "chzn-container #{' chzn-rtl' if @is_rtl}" style: 'width: ' + (@f_width) + 'px;' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter }) From bd5daff469436c7df98e3c48fe978474e01e5be2 Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 13:12:29 +0200 Subject: [PATCH 6/9] rtl support for prototype based chosen --- chosen/chosen.proto.js | 3 ++- coffee/chosen.proto.coffee | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/chosen/chosen.proto.js b/chosen/chosen.proto.js index 627bcf8..b602dc3 100644 --- a/chosen/chosen.proto.js +++ b/chosen/chosen.proto.js @@ -14,6 +14,7 @@ this.set_default_values(); this.form_field = elmn; this.is_multiple = this.form_field.multiple; + this.is_rtl = this.form_field.hasClassName("chzn-rtl"); this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option"; this.set_up_html(); this.register_observers(); @@ -39,7 +40,7 @@ this.f_width = this.form_field.getStyle("width") ? parseInt(this.form_field.getStyle("width"), 10) : this.form_field.getWidth(); container_props = { 'id': this.container_id, - 'class': 'chzn-container', + 'class': "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0), 'style': 'width: ' + this.f_width + 'px' }; this.default_text = this.form_field.readAttribute('data-placeholder') ? this.form_field.readAttribute('data-placeholder') : this.default_text_default; diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index b997a4f..e639190 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -16,6 +16,7 @@ class Chosen @form_field = elmn @is_multiple = @form_field.multiple + @is_rtl = @form_field.hasClassName "chzn-rtl" @default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option" @@ -47,7 +48,7 @@ class Chosen container_props = 'id': @container_id - 'class': 'chzn-container' + 'class': "chzn-container #{' chzn-rtl' if @is_rtl}" 'style': 'width: ' + (@f_width) + 'px' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter @default_text = if @form_field.readAttribute 'data-placeholder' then @form_field.readAttribute 'data-placeholder' else @default_text_default From ed1f3548547caf50c88f8662d0005f6bd4eec787 Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 13:30:46 +0200 Subject: [PATCH 7/9] added right to left documentations --- example.html | 32 +++++++++++++++++++++++++++++++- example.jquery.html | 30 ++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+), 1 deletion(-) diff --git a/example.html b/example.html index 8ed8fac..f36e4fc 100644 --- a/example.html +++ b/example.html @@ -1208,7 +1208,37 @@ <select data-placeholder="Choose a country..." style="width:350px;" multiple class="chzn-select">

Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.

- + +

Right to Left Support

+
+

Chosen supports right to left select boxes too. just add "chzn-rtl" in addition to "chzn-select" to your select tags and you are good to go.

+

<select class="chzn-select chzn-rtl">

+
+ Single right to left select + +
+
+ Multiple right to left select + +
+
+

Change / Update Events

    diff --git a/example.jquery.html b/example.jquery.html index 9846414..c1e8a24 100644 --- a/example.jquery.html +++ b/example.jquery.html @@ -1209,6 +1209,36 @@

    Note: on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.

+

Right to Left Support

+
+

Chosen supports right to left select boxes too. just add "chzn-rtl" in addition to "chzn-select" to your select tags and you are good to go.

+

<select class="chzn-select chzn-rtl">

+
+ Single right to left select + +
+
+ Multiple right to left select + +
+
+

Change / Update Events

    From 6ddac1217e4af602cb5eea7839fe6108c4251d43 Mon Sep 17 00:00:00 2001 From: Allen Bargi Date: Sun, 31 Jul 2011 13:42:30 +0200 Subject: [PATCH 8/9] hiding the select to avoid sudden changes on the page and making sure we do not cause any vertical jump --- chosen/chosen.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/chosen/chosen.css b/chosen/chosen.css index 9ad2cfe..247d07b 100644 --- a/chosen/chosen.css +++ b/chosen/chosen.css @@ -1,4 +1,9 @@ /* @group Base */ +select.chzn-select { + visibility: hidden; + height: 28px !important; + min-height: 28px !important; +} .chzn-container { font-size: 13px; position: relative; From e10951b7a421a792cc9b9f7587d7b062d1028b23 Mon Sep 17 00:00:00 2001 From: Patrick Filler Date: Sun, 31 Jul 2011 12:08:34 -0400 Subject: [PATCH 9/9] Fix issue caused by select IDs containing colons. --- chosen/chosen.jquery.js | 2 +- chosen/chosen.proto.js | 2 +- coffee/chosen.jquery.coffee | 2 +- coffee/chosen.proto.coffee | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/chosen/chosen.jquery.js b/chosen/chosen.jquery.js index e610561..d373f6c 100644 --- a/chosen/chosen.jquery.js +++ b/chosen/chosen.jquery.js @@ -44,7 +44,7 @@ }; Chosen.prototype.set_up_html = function() { var container_div, dd_top, dd_width, sf_width; - this.container_id = this.form_field.id.length ? this.form_field.id.replace('.', '_') : this.generate_field_id(); + this.container_id = this.form_field.id.length ? this.form_field.id.replace(/(:|\.)/g, '_') : this.generate_field_id(); this.container_id += "_chzn"; this.f_width = this.form_field_jq.width(); this.default_text = this.form_field_jq.data('placeholder') ? this.form_field_jq.data('placeholder') : this.default_text_default; diff --git a/chosen/chosen.proto.js b/chosen/chosen.proto.js index b602dc3..45d23ea 100644 --- a/chosen/chosen.proto.js +++ b/chosen/chosen.proto.js @@ -36,7 +36,7 @@ }; Chosen.prototype.set_up_html = function() { var base_template, container_props, dd_top, dd_width, sf_width; - this.container_id = this.form_field.identify().replace('.', '_') + "_chzn"; + this.container_id = this.form_field.identify().replace(/(:|\.)/g, '_') + "_chzn"; this.f_width = this.form_field.getStyle("width") ? parseInt(this.form_field.getStyle("width"), 10) : this.form_field.getWidth(); container_props = { 'id': this.container_id, diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index 1bbcecc..e6d968b 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -44,7 +44,7 @@ class Chosen @choices = 0 set_up_html: -> - @container_id = if @form_field.id.length then @form_field.id.replace('.', '_') else this.generate_field_id() + @container_id = if @form_field.id.length then @form_field.id.replace(/(:|\.)/g, '_') else this.generate_field_id() @container_id += "_chzn" @f_width = @form_field_jq.width() diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index e639190..b0d9e1a 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -42,7 +42,7 @@ class Chosen set_up_html: -> - @container_id = @form_field.identify().replace('.', '_') + "_chzn" + @container_id = @form_field.identify().replace(/(:|\.)/g, '_') + "_chzn" @f_width = if @form_field.getStyle("width") then parseInt @form_field.getStyle("width"), 10 else @form_field.getWidth()