Skip to content

Instantly share code, notes, and snippets.

@rthbound

rthbound/sample-color-switching.html

Created August 17, 2015 17:52
Show Gist options
  • Save rthbound/950c967bf94e7b3f8d80 to your computer and use it in GitHub Desktop.
Save rthbound/950c967bf94e7b3f8d80 to your computer and use it in GitHub Desktop.
Download ZIP
ideas
Raw
sample-color-switching.html
<!DOCTYPE html>
<html>
<div class='colors' data-label='PRIMARY' data-color='blue'></div>
<div class='colors' data-label='FOOBAR' data-color='green'></div>
<select>
<option value='PRIMARY'>PRIMARY</option>
<option value='FOOBAR'>FOOBAR</option>
</select>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var initial_dropdown_value = $("select").val();
var color = $('.colors[data-label=' + initial_dropdown_value + ']').attr('data-color')
alert('dropdown color is ' + color);
$.each( $(".colors") , function(n,i){
var color = $(this).attr('data-color')
$(this).css("background-color", color);
});
// May actually be icon.css('color', the_color);
$('select').change(function(){
var dropdown = $(this)
var dropdown_value = dropdown.val();
var color = $('.colors[data-label=' + dropdown_value + ']').attr('data-color')
$(this).css("color", color);
alert('dropdown color is ' + color);
// May actually be icon.css('color', the_color);
});
});
</script>
<style>
.colors {
height: 20px;
width: 20px;
}
</style>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment