New positionCallback

Added new callback to customary position the colorPicker on toggle.

Author: PitPik

README.md

@@ -49,6 +49,7 @@ $('.color').colorPicker({
     renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move
     // toggled true/false can for example be used to check if the $elm has a certain className and then hide alpha,...
     buildCallback: function($elm) {}, // this === instance; $elm: the UI
+    positionCallback: function($elm) {return {top: y, left: x}}, // this === instance; $elm: the trigger element;
     css: '', // replaces existing css
     cssAddon: '', // adds css to existing
     margin: '', // positioning margin (can also be set in cssAddon)
@@ -63,6 +64,26 @@ $('.color').colorPicker({
 ```
 #### Some tips
 
+The positionCallback can be used to optionally position the colorPicker different from its default; in case you want it to also show above or to the left of the input field etc.
+The callback will also be called on scroll.
+You need to return an object that holds ```left``` and ```top``` to position the colorPicker. See ./demo/index.js for an example:
+
+```javascript
+positionCallback: function($elm) {
+    var _$UI = this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
+        position = $elm.offset(), // $elm is the current trigger that opened the UI
+        gap = this.color.options.gap, // this.color.options stores all options
+        top = 0,
+        left = 0;
+
+    // do here your calculations with top and left and...
+    return { // the object will be used as in $('.something').css({...});
+        left: left,
+        top: top
+    }
+}
+```
+
 The renderCallback can be used as openCallback and closeCallback:
 
 ```javascript

demo/index.js

@@ -63,6 +63,23 @@ $(function(){
 			// append css after just generated / use cssAddon instead if you want
 			$('#colorPickerMod').appendTo('head');
 		},
+		positionCallback: function($elm) { // optional function to position colorPicker on toggle
+			var _$UI = this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
+				position = $elm.offset(), // $elm is the current trigger / element that opened the colorPicker
+				$window = $(window),
+            	gap = this.color.options.gap; // this.color.options stores all options
+
+			return { // this demo is a copy of the internal usage (to show how it works);
+				'left': (_$UI._left = position.left) -
+                    ((_$UI._left += _$UI._width -
+                    ($window.scrollLeft() + $window.width())) + gap > 0 ?
+                    _$UI._left + gap : 0),
+                'top': (_$UI._top = position.top + $elm.outerHeight()) -
+                    ((_$UI._top += _$UI._height -
+                    ($window.scrollTop() + $window.height())) + gap > 0 ?
+                    _$UI._top + gap : 0)
+            }
+		},
 		renderCallback: function($elm, toggled) {
 			var colors = this.color.colors; // the whole color object
 			var rgb = colors.RND.rgb; // the RGB color in 0-255

jqColorPicker.js

@@ -64,7 +64,7 @@
 
     function extractValue(elm) {
         return elm.value || elm.getAttribute('value') ||
-            $(elm).css('background-color') || '#fff';
+            $(elm).css('background-color') || '#FFF';
     }
 
     function resolveEventType(event) {
@@ -90,8 +90,9 @@
 
             _colorPicker.$trigger = $this;
 
-            (_$UI || build()).css({
-                'left': (_$UI._left = position.left) -
+            (_$UI || build()).css(
+                _options.positionCallback.call(_colorPicker, $this) ||
+                {'left': (_$UI._left = position.left) -
                     ((_$UI._left += _$UI._width -
                     ($window.scrollLeft() + $window.width())) + gap > 0 ?
                     _$UI._left + gap : 0),
@@ -275,6 +276,7 @@
             opacity: true,
             renderCallback: noop,
             buildCallback: noop,
+            positionCallback: noop,
             body: document.body,
             scrollResize: true,
             gap: 4,