Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added selectColorize plugin

  • Loading branch information...
commit 914ad55623ef67fb39394ef52928386c5ee70b4d 1 parent d4804c4
@cowboy cowboy authored
View
1  README.markdown
@@ -12,6 +12,7 @@ Visit the [project page](http://benalman.com/projects/jquery-misc-plugins/) for
* [jQuery loadAdScript](http://benalman.com/projects/jquery-misc-plugins/#loadadscript) - Load third party ad network scripts that use `document.write` into specific containers.
* [jQuery :nth-last-child selector](http://benalman.com/projects/jquery-misc-plugins/#nth-last-child) - Works exactly like jQuery's built-in :nth-child selector, except that it counts from the end.
* [jQuery scrollbarWidth](http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth) - Calculate the scrollbar width dynamically!
+* [jQuery selectColorize](http://benalman.com/projects/jquery-misc-plugins/#selectcolorize) - Basic cross-browser colored select boxes.
* [jQuery serializeObject](http://benalman.com/projects/jquery-misc-plugins/#serializeobject) - Serialize a form into an object.
* [jQuery viewportOffset](http://benalman.com/projects/jquery-misc-plugins/#viewportoffset) - Calculate left and top from the element's position relative to the viewport, not the document.
View
199 examples/selectcolorize/index.php
@@ -0,0 +1,199 @@
+<?PHP
+
+include "../index.php";
+
+$shell['title3'] = "selectColorize";
+
+$shell['h2'] = 'Basic cross-browser colored select boxes';
+
+// ========================================================================== //
+// SCRIPT
+// ========================================================================== //
+
+ob_start();
+?>
+$(function(){
+
+ $('a.enable').click(function(){
+ // Calling .change() might be necessary to visually update selects in
+ // all browsers, if multiple selects are being initialized at the same
+ // time.
+ $('select').selectColorize().change(); // Initialize.
+ });
+
+ $('a.destroy').click(function(){
+ $('select').selectColorize( false ); // Destroy.
+ });
+
+});
+<?
+$shell['script'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// HTML HEAD ADDITIONAL
+// ========================================================================== //
+
+ob_start();
+?>
+<script type="text/javascript" src="../../jquery.ba-selectcolorize.js"></script>
+<script type="text/javascript" language="javascript">
+
+<?= $shell['script']; ?>
+
+$(function(){
+
+ // Prevent default click action for example links.
+ $('a.example').click(function(e){
+ e.preventDefault();
+ });
+
+ // Syntax highlighter.
+ SyntaxHighlighter.highlight();
+
+});
+
+</script>
+<style type="text/css" title="text/css">
+
+/*
+bg: #FDEBDC
+bg1: #FFD6AF
+bg2: #FFAB59
+orange: #FF7F00
+brown: #913D00
+lt. brown: #C4884F
+*/
+
+#page {
+ width: 700px;
+}
+
+/* options inherit from the select (but not in webkit) */
+
+select {
+ margin-top: 0.3em;
+}
+
+select.first,
+select.fourth {
+ color: #777;
+}
+
+select.second {
+ background: #777;
+}
+
+select.third {
+ color: orange;
+ background: #ffc;
+}
+
+
+</style>
+<?
+$shell['html_head'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// HTML BODY
+// ========================================================================== //
+
+ob_start();
+?>
+<?= $shell['donate'] ?>
+
+<p>
+ By default, select elements in Internet Explorer and Opera show the selected option's color and background color, while Firefox and WebKit browsers do not. <a href="http://benalman.com/projects/jquery-misc-plugins/#selectcolorize">jQuery selectColorize</a> normalizes this behavior cross-browser for basic select box color styling, without having to resort to more "fancy" select box replacements.
+</p>
+<p>
+ <em>Note that inline option color/background styles are necessary in Firefox due to an annoying getComputedStyle bug. Also, due to rendering issues in Firefox and Opera, it's best to set a background color on the select element if any of its options have background colors, otherwise it may have initial rendering issues.</em>
+</p>
+
+<p>
+ <a href="#" class="enable example">Enable selectColorize</a>, <a href="#" class="destroy example">Destroy selectColorize</a>
+</p>
+
+<select class="first">
+ <option>------</option>
+ <option style="color:#f00;background:#fcc;" selected="selected">Sample red option, fg+bg</option>
+ <option style="color:#0a0;background:#cfc;">Sample green option, fg+bg</option>
+ <option style="color:#00f;background:#ccf;">Sample blue option, fg+bg</option>
+ <option style="color:#f00;">Sample red option, fg</option>
+ <option style="color:#0a0;">Sample green option, fg</option>
+ <option style="color:#00f;">Sample blue option, fg</option>
+ <option style="background:#fcc;">Sample red option, bg</option>
+ <option style="background:#cfc;">Sample green option, bg</option>
+ <option style="background:#ccf;">Sample blue option, bg</option>
+</select>
+
+(select fg color set via CSS, options have fg+bg colors)
+
+<br>
+
+<select class="second">
+ <option>------</option>
+ <option style="color:#f00;background:#fcc;">Sample red option, fg+bg</option>
+ <option style="color:#0a0;background:#cfc;" selected="selected">Sample green option, fg+bg</option>
+ <option style="color:#00f;background:#ccf;">Sample blue option, fg+bg</option>
+ <option style="color:#f00;">Sample red option, fg</option>
+ <option style="color:#0a0;">Sample green option, fg</option>
+ <option style="color:#00f;">Sample blue option, fg</option>
+ <option style="background:#fcc;">Sample red option, bg</option>
+ <option style="background:#cfc;">Sample green option, bg</option>
+ <option style="background:#ccf;">Sample blue option, bg</option>
+</select>
+
+(select bg color set via CSS, options have fg+bg colors)
+
+<br>
+
+<select class="third">
+ <option>------</option>
+ <option style="color:#f00;background:#fcc;">Sample red option, fg+bg</option>
+ <option style="color:#0a0;background:#cfc;">Sample green option, fg+bg</option>
+ <option style="color:#00f;background:#ccf;" selected="selected">Sample blue option, fg+bg</option>
+ <option style="color:#f00;">Sample red option, fg</option>
+ <option style="color:#0a0;">Sample green option, fg</option>
+ <option style="color:#00f;">Sample blue option, fg</option>
+ <option style="background:#fcc;">Sample red option, bg</option>
+ <option style="background:#cfc;">Sample green option, bg</option>
+ <option style="background:#ccf;">Sample blue option, bg</option>
+</select>
+
+(select fg and bg colors set via CSS, options have fg+bg colors)
+
+<br>
+
+<select class="fourth">
+ <option>------</option>
+ <option style="color:#f00;">Sample red option, fg</option>
+ <option style="color:#0a0;" selected="selected">Sample green option, fg</option>
+ <option style="color:#00f;">Sample blue option, fg</option>
+</select>
+
+(select fg color set via CSS, options only have fg colors)
+
+
+
+<h3>The code</h3>
+
+<div class="clear"></div>
+
+<pre class="brush:js">
+<?= htmlspecialchars( $shell['script'] ); ?>
+</pre>
+
+
+
+<?
+$shell['html_body'] = ob_get_contents();
+ob_end_clean();
+
+// ========================================================================== //
+// DRAW SHELL
+// ========================================================================== //
+
+draw_shell();
+
+?>
View
102 jquery.ba-selectcolorize.js
@@ -0,0 +1,102 @@
+/*!
+* jQuery selectColorize - v0.2 - 3/8/2010
+* http://benalman.com/projects/jquery-misc-plugins/
+*
+* Copyright (c) 2010 "Cowboy" Ben Alman
+* Dual licensed under the MIT and GPL licenses.
+* http://benalman.com/about/license/
+*/
+
+(function($,undefined){
+ '$:nomunge'; // Used by YUI compressor.
+
+ // Some reused strings.
+ var selectColorize = 'selectColorize',
+ event_name = 'change.' + selectColorize,
+ style = 'style',
+ color = 'color',
+ backgroundColor = 'backgroundColor';
+
+ $.fn[ selectColorize ] = function( destroy ) {
+ // Unbind event.
+ var that = this.unbind( event_name );
+
+ // Initialize or destroy.
+ that.each(function(){
+ var select = $(this),
+
+ // These colors may need to be set on options.
+ select_color = select.css( color ),
+ select_backgroundColor = select.css( backgroundColor );
+
+ if ( destroy !== undefined ) {
+
+ // Cleanup select and all options.
+ select.find('option').andSelf().each(function(){
+ var elem = $(this),
+ data = elem.data( selectColorize );
+
+ // Revert the element style attribute back to its original state.
+ data && elem[ data[ style ] ? 'attr' : 'removeAttr' ]( style, data[ style ] );
+
+ // Remove any stored data.
+ elem.removeData( selectColorize );
+ });
+
+ } else if ( !select.data( selectColorize ) ) {
+
+ // Store select style attribute for later cleanup.
+ select.data( selectColorize, { style: select.attr( style ) } );
+
+ // For each option that doesn't have an inline color or backgroundColor,
+ // set its color and backgroundColor to the select's.
+ select.find('option').each(function(){
+ var option = $(this),
+ opt_style = this.style;
+
+ // Store option style attribute for later cleanup.
+ option.data( selectColorize, { style: option.attr( style ) } );
+
+ // Update the option's color and backgroundColor with that of the
+ // select's if they are unspecified.
+ opt_style[ color ] || option.css( color, select_color );
+ opt_style[ backgroundColor ] || option.css( backgroundColor, select_backgroundColor );
+ });
+ }
+ });
+
+ if ( destroy === undefined ) {
+
+ // Bind event.
+ that
+ .bind( event_name, function(){
+ var select = $(this),
+
+ // Get the selected option.
+ option = select.find( 'option:selected' ),
+
+ // This object will hold the CSS properties.
+ css = {},
+
+ bg_color;
+
+ // Change the select's color to that of its selected option. If the
+ // option has no inline style color set, use the default color.
+ if ( option.length ) {
+ css[ color ] = option.css( color );
+
+ // WebKit won't colorize a select if the background is solid white,
+ // go figure.
+ bg_color = option.css( backgroundColor );
+ css[ backgroundColor ] = bg_color === 'rgb(255, 255, 255)' ? '#fffffe' : bg_color;
+
+ select.css( css );
+ }
+ })
+ .triggerHandler( event_name );
+ }
+
+ return that;
+ };
+
+})(jQuery);
View
9 jquery.ba-selectcolorize.min.js
@@ -0,0 +1,9 @@
+/*
+* jQuery selectColorize - v0.2 - 3/8/2010
+* http://benalman.com/projects/jquery-misc-plugins/
+*
+* Copyright (c) 2010 "Cowboy" Ben Alman
+* Dual licensed under the MIT and GPL licenses.
+* http://benalman.com/about/license/
+*/
+(function($,f){var e="selectColorize",d="change."+e,c="style",b="color",a="backgroundColor";$.fn[e]=function(g){var h=this.unbind(d);h.each(function(){var i=$(this),k=i.css(b),j=i.css(a);if(g!==f){i.find("option").andSelf().each(function(){var l=$(this),m=l.data(e);m&&l[m[c]?"attr":"removeAttr"](c,m[c]);l.removeData(e)})}else{if(!i.data(e)){i.data(e,{style:i.attr(c)});i.find("option").each(function(){var m=$(this),l=this.style;m.data(e,{style:m.attr(c)});l[b]||m.css(b,k);l[a]||m.css(a,j)})}}});if(g===f){h.bind(d,function(){var i=$(this),k=i.find("option:selected"),j={},l;if(k.length){j[b]=k.css(b);l=k.css(a);j[a]=l==="rgb(255, 255, 255)"?"#fffffe":l;i.css(j)}}).triggerHandler(d)}return h}})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.