Moose Loose WordPress & Web Desigh Tools

########################################################################################

<select name="MooseColor02">
<option value="#000"></option>
<option value="#003"></option>
<option value="#006"></option>
<option value="#009"></option>
<option value="#00C"></option>
<option value="#00F"></option>
<option value="#030"></option>
<option value="#033"></option>
<option value="#036"></option>
<option value="#039"></option>
<option value="#03C"></option>
<option value="#03F"></option>
<option value="#060"></option>
<option value="#063"></option>
<option value="#066"></option>
<option value="#069"></option>
<option value="#06C"></option>
<option value="#06F"></option>
<option value="#090"></option>
<option value="#093"></option>
<option value="#096"></option>
<option value="#099"></option>
<option value="#09C"></option>
<option value="#09F"></option>
<option value="#0C0"></option>
<option value="#0C3"></option>
<option value="#0C6"></option>
<option value="#0C9"></option>
<option value="#0CC"></option>
<option value="#0CF"></option>
<option value="#0F0"></option>
<option value="#0F3"></option>
<option value="#0F6"></option>
<option value="#0F9"></option>
<option value="#0FC"></option>
<option value="#0FF"></option>
<option value="#303"></option>
<option value="#306"></option>
<option value="#309"></option>
<option value="#30C"></option>
<option value="#30F"></option>
<option value="#330"></option>
<option value="#333"></option>
<option value="#336"></option>
<option value="#339"></option>
<option value="#33C"></option>
<option value="#33F"></option>
<option value="#360"></option>
<option value="#363"></option>
<option value="#366"></option>
<option value="#369"></option>
<option value="#36C"></option>
<option value="#36F"></option>
<option value="#390"></option>
<option value="#393"></option>
<option value="#396"></option>
<option value="#399"></option>
<option value="#39C"></option>
<option value="#39F"></option>
<option value="#3C0"></option>
<option value="#3C3"></option>
<option value="#3C6"></option>
<option value="#3C9"></option>
<option value="#3CC"></option>
<option value="#3CF"></option>
<option value="#3F0"></option>
<option value="#3F3"></option>
<option value="#3F6"></option>
<option value="#3F9"></option>
<option value="#3FC"></option>
<option value="#3FF"></option>
<option value="#600"></option>
<option value="#603"></option>
<option value="#606"></option>
<option value="#609"></option>
<option value="#60C"></option>
<option value="#60F"></option>
<option value="#630"></option>
<option value="#633"></option>
<option value="#636"></option>
<option value="#639"></option>
<option value="#63C"></option>
<option value="#63F"></option>
<option value="#660"></option>
<option value="#663"></option>
<option value="#666"></option>
<option value="#669"></option>
<option value="#66C"></option>
<option value="#66F"></option>
<option value="#690"></option>
<option value="#693"></option>
<option value="#696"></option>
<option value="#699"></option>
<option value="#69C"></option>
<option value="#69F"></option>
<option value="#6C0"></option>
<option value="#6C3"></option>
<option value="#6C6"></option>
<option value="#6C9"></option>
<option value="#6CC"></option>
<option value="#6CF"></option>
<option value="#6F0"></option>
<option value="#6F3"></option>
<option value="#6F6"></option>
<option value="#6F9"></option>
<option value="#6FC"></option>
<option value="#6FF"></option>
<option value="#900"></option>
<option value="#903"></option>
<option value="#906"></option>
<option value="#909"></option>
<option value="#90C"></option>
<option value="#90F"></option>
<option value="#930"></option>
<option value="#933"></option>
<option value="#936"></option>
<option value="#939"></option>
<option value="#93C"></option>
<option value="#93F"></option>
<option value="#960"></option>
<option value="#963"></option>
<option value="#966"></option>
<option value="#969"></option>
<option value="#96C"></option>
<option value="#96F"></option>
<option value="#990"></option>
<option value="#993"></option>
<option value="#996"></option>
<option value="#999"></option>
<option value="#99C"></option>
<option value="#99F"></option>
<option value="#9C0"></option>
<option value="#9C3"></option>
<option value="#9C6"></option>
<option value="#9C9"></option>
<option value="#9CC"></option>
<option value="#9CF"></option>
<option value="#9F0"></option>
<option value="#9F3"></option>
<option value="#9F6"></option>
<option value="#9F9"></option>
<option value="#9FC"></option>
<option value="#9FF"></option>
<option value="#C00"></option>
<option value="#C03"></option>
<option value="#C06"></option>
<option value="#C09"></option>
<option value="#C0C"></option>
<option value="#C0F"></option>
<option value="#C30"></option>
<option value="#C33"></option>
<option value="#C36"></option>
<option value="#C39"></option>
<option value="#C3C"></option>
<option value="#C3F"></option>
<option value="#C60"></option>
<option value="#C63"></option>
<option value="#C66"></option>
<option value="#C69"></option>
<option value="#C6C"></option>
<option value="#C6F"></option>
<option value="#C90"></option>
<option value="#C93"></option>
<option value="#C96"></option>
<option value="#C99"></option>
<option value="#C9C"></option>
<option value="#C9F"></option>
<option value="#CC0"></option>
<option value="#CC3"></option>
<option value="#CC6"></option>
<option value="#CC9"></option>
<option value="#CCC"></option>
<option value="#CCF"></option>
<option value="#CF0"></option>
<option value="#CF3"></option>
<option value="#CF6"></option>
<option value="#CF9"></option>
<option value="#CFC"></option>
<option value="#CFF"></option>
<option value="#F00"></option>
<option value="#F03"></option>
<option value="#F06"></option>
<option value="#F09"></option>
<option value="#F0C"></option>
<option value="#F0F"></option>
<option value="#F30"></option>
<option value="#F33"></option>
<option value="#F36"></option>
<option value="#F39"></option>
<option value="#F3C"></option>
<option value="#F3F"></option>
<option value="#F60"></option>
<option value="#F63"></option>
<option value="#F66"></option>
<option value="#F69"></option>
<option value="#F6C"></option>
<option value="#F6F"></option>
<option value="#F90"></option>
<option value="#F93"></option>
<option value="#F96"></option>
<option value="#F99"></option>
<option value="#F9C"></option>
<option value="#F9F"></option>
<option value="#FC0"></option>
<option value="#FC3"></option>
<option value="#FC6"></option>
<option value="#FC9"></option>
<option value="#FCC"></option>
<option value="#FCF"></option>
<option value="#FF0"></option>
<option value="#FF3"></option>
<option value="#FF6"></option>
<option value="#FF9"></option>
<option value="#FFC"></option>
<option value="#FFF"></option>
</select>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="pickpick.js"></script>
<script>
$(document).ready(function() {
$('#init').on('click', function() {
$('select[name="MooseColor01"]').simplecolorpicker({picker: true,theme:'mooselooses'});
$('select[name="MooseColor02"]').simplecolorpicker({picker: true,theme:'mooselooses'});
});
$('#destroy').on('click', function() {
$('select').simplecolorpicker('destroy');
});
$('#init').trigger('click');
});
</script>

####################################### pickpick.css ################################################

/*
* Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
*/

.simplecolorpicker.picker {
position: absolute;
top: 100%;
left: 0;
z-index: 1051; /* Above Bootstrap modal (@zindex-modal = 1050) */
display: none;
float: left;
min-width: 160px;
max-width: 483px; /* @popover-max-width = 276px + 7 */

padding: 5px 0 0 5px;
margin: 2px 0 0;
list-style: none;
background-color: #fff; /* @dropdown-bg */
border: 1px solid #ccc; /* @dropdown-fallback-border */
border: 1px solid rgba(0, 0, 0, .15); /* @dropdown-border */

-webkit-border-radius: 4px; /* @border-radius-base */
-moz-border-radius: 4px;
border-radius: 4px;

-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}

.simplecolorpicker.inline {
display: inline-block;
padding: 6px 0;
}

.simplecolorpicker span {
margin: 0 5px 5px 0;
}

.simplecolorpicker.icon,
.simplecolorpicker span.color {
display: inline-block;
cursor: pointer;
border: 1px solid transparent;
}

.simplecolorpicker.icon:after,
.simplecolorpicker span.color:after {
content: '\00a0\00a0\00a0\00a0'; /* Spaces */
}

.simplecolorpicker span.color[data-disabled]:hover {
cursor: not-allowed;
border: 1px solid transparent;
}

.simplecolorpicker span.color:hover,
.simplecolorpicker span.color[data-selected],
.simplecolorpicker span.color[data-selected]:hover {
border: 1px solid #222; /* @gray-dark */
}
.simplecolorpicker span.color[data-selected]:after {
color: #fff;
}

/* Vertical separator, replaces optgroup. */
.simplecolorpicker span.vr {
border-left: 1px solid #222; /* @gray-dark */
}
.simplecolorpicker.regularfont span.color[data-selected]:after {
content: '\2714'; /* Ok/check mark */

margin-right: 2.2px;
margin-left: 2.2px;
}
.simplecolorpicker.glyphicons span.color[data-selected]:after {
/* Taken from glyphicon class. */
position: relative;
top: 1px;
font-family: 'Glyphicons Halflings';
line-height: .9;
-webkit-font-smoothing: antialiased;
content: '\e013'; /* Ok/check mark */
margin-right: 1px;
margin-left: 1px;
}

.simplecolorpicker.glyphicons span.color[data-selected]:after {
/* Taken from glyphicon class. */
position: relative;
top: 1px;
font-family: 'times';
line-height: .9;
-webkit-font-smoothing: antialiased;

content: '\e013'; /* Ok/check mark */

margin-right: 1px;
margin-left: 1px;
}

############################################### pickpick.js ###################################

/*
* Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
*/

(function($) {
'use strict';

/**
* Constructor.
*/
var SimpleColorPicker = function(select, options) {
this.init('simplecolorpicker', select, options);
};

/**
* SimpleColorPicker class.
*/
SimpleColorPicker.prototype = {
constructor: SimpleColorPicker,

init: function(type, select, options) {
var self = this;

self.type = type;

self.$select = $(select);
self.$select.hide();

self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);

self.$colorList = null;

if (self.options.picker === true) {
var selectText = self.$select.find('> option:selected').text();
self.$icon = $('<span class="simplecolorpicker icon"'
+ ' title="' + selectText + '"'
+ ' style="background-color: ' + self.$select.val() + ';"'
+ ' role="button" tabindex="0">'
+ '</span>').insertAfter(self.$select);
self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));

self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
self.$colorList = self.$picker;

// Hide picker when clicking outside
$(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
} else {
self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
self.$colorList = self.$inline;
}

// Build the list of colors
// <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
self.$select.find('> option').each(function() {
var $option = $(this);
var color = $option.val();

var isSelected = $option.is(':selected');
var isDisabled = $option.is(':disabled');

var selected = '';
if (isSelected === true) {
selected = ' data-selected';
}

var disabled = '';
if (isDisabled === true) {
disabled = ' data-disabled';
}

var title = '';
if (isDisabled === false) {
title = ' title="' + $option.text() + '"';
}

var role = '';
if (isDisabled === false) {
role = ' role="button" tabindex="0"';
}

var $colorSpan = $('<span class="color"'
+ title
+ ' style="background-color: ' + color + ';"'
+ ' data-color="' + color + '"'
+ selected
+ disabled
+ role + '>'
+ '</span>');

self.$colorList.append($colorSpan);
$colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));

var $next = $option.next();
if ($next.is('optgroup') === true) {
// Vertical break, like hr
self.$colorList.append('<span class="vr"></span>');
}
});
},

/**
* Changes the selected color.
*
* @param color the hexadecimal color to select, ex: '#fbd75b'
*/
selectColor: function(color) {
var self = this;

var $colorSpan = self.$colorList.find('> span.color').filter(function() {
return $(this).data('color').toLowerCase() === color.toLowerCase();
});

if ($colorSpan.length > 0) {
self.selectColorSpan($colorSpan);
} else {
console.error("The given color '" + color + "' could not be found");
}
},

showPicker: function() {
var pos = this.$icon.offset();
this.$picker.css({
// Remove some pixels to align the picker icon with the icons inside the dropdown
left: pos.left - 6,
top: pos.top + this.$icon.outerHeight()
});

this.$picker.show(this.options.pickerDelay);
},

hidePicker: function() {
this.$picker.hide(this.options.pickerDelay);
},

/**
* Selects the given span inside $colorList.
*
* The given span becomes the selected one.
* It also changes the HTML select value, this will emit the 'change' event.
*/
selectColorSpan: function($colorSpan) {
var color = $colorSpan.data('color');
var title = $colorSpan.prop('title');

// Mark this span as the selected one
$colorSpan.siblings().removeAttr('data-selected');
$colorSpan.attr('data-selected', '');

if (this.options.picker === true) {
this.$icon.css('background-color', color);
this.$icon.prop('title', title);
this.hidePicker();
}

// Change HTML select value
this.$select.val(color);
},

/**
* The user clicked on a color inside $colorList.
*/
colorSpanClicked: function(e) {
// When a color is clicked, make it the new selected one (unless disabled)
if ($(e.target).is('[data-disabled]') === false) {
this.selectColorSpan($(e.target));
this.$select.trigger('change');
}
},

/**
* Prevents the mousedown event from "eating" the click event.
*/
mousedown: function(e) {
e.stopPropagation();
e.preventDefault();
},

destroy: function() {
if (this.options.picker === true) {
this.$icon.off('.' + this.type);
this.$icon.remove();
$(document).off('.' + this.type);
}

this.$colorList.off('.' + this.type);
this.$colorList.remove();

this.$select.removeData(this.type);
this.$select.show();
}
};

/**
* Plugin definition.
* How to use: $('#id').simplecolorpicker()
*/
$.fn.simplecolorpicker = function(option) {
var args = $.makeArray(arguments);
args.shift();

// For HTML element passed to the plugin
return this.each(function() {
var $this = $(this),
data = $this.data('simplecolorpicker'),
options = typeof option === 'object' && option;
if (data === undefined) {
$this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
}
if (typeof option === 'string') {
data[option].apply(data, args);
}
});
};

/**
* Default options.
*/
$.fn.simplecolorpicker.defaults = {
// No theme by default
theme: '',

// Show the picker or make it inline
picker: false,

// Animation delay in milliseconds
pickerDelay: 0
};

})(jQuery);