Spectrum Colorpicker Opening in Wrong place
HTML
<link rel="stylesheet" href="http://bgrins.github.com/spectrum/spectrum.css">
<button>Open</button>
CSS
button {
position:absolute;
bottom: 10px;
left: 40%;
}
JavaScript
// Spectrum: The No Hassle Colorpicker
// https://github.com/bgrins/spectrum
// Author: Brian Grinstead
// License: MIT
// Requires: jQuery, spectrum.css
(function (window, $, undefined) {
var defaultOpts = {
color: '#000',
flat: false,
showInput: false,
showButtons: true,
showInitial: false,
beforeShow: noop,
move: noop,
change: noop,
show: noop,
hide: noop,
localStorageKey: false,
showPalette: false,
showPaletteOnly: false,
showSelectionPalette: false,
addSelectionToPalette: true,
cancelText: "cancel",
chooseText: "choose",
className: "",
preferredFormat: false,
maxSelectionSize: 7,
theme: 'sp-light',
palette: ['fff', '000'],
selectionPalette: []
},
spectrums = [],
IE = $.browser.msie,
replaceInput = [
"<div class='sp-replacer'>",
"<div class='sp-preview'></div>",
"<div class='sp-dd'>▼</div>",
"</div>"
].join(''),
markup = (function () {
// IE does not support gradients with multiple stops, so we need to simulate
// that for the rainbow slider with 8 divs that each have a single gradient
var gradientFix = "";
if (IE) {
for (var i = 1; i <= 6; i++) {
gradientFix += "<div class='sp-" + i + "'></div>";
}
}
return [
"<div class='sp-container'>",
"<div class='sp-palette-container'>",
"<div class='sp-palette sp-thumb sp-cf'></div>",
"</div>",
"<div class='sp-picker-container'>",
"<div class='sp-top sp-cf'>",
"<div class='sp-fill'></div>",
"<div class='sp-top-inner'>",
"<div class='sp-color'>",
"<div...