stay in view-port support for scroll and resize

…and $trigger in colorPicker model

README.md

@@ -49,6 +49,7 @@ $('.color').colorPicker({
     css: '', // replaces existing css
     cssAddon: '', // adds css to existing
     margin: '', // positioning margin (can also be set in cssAddon)
+    scrollResize: true // toggle for reposition colorPicker on window.resize/scroll
     preventFocus: false // prevents default on focus of input fields,
     body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change)
 });
@@ -73,6 +74,7 @@ colors.js is a quite handy tool for color calculations/conversion (gray value, c
 If you need more complex calculations or more color spaces, use the version from https://github.com/PitPik/colorPicker. It supports also cmy, cmyk, XYZ and Lab.
 ```javascript
 myColorPicker: {
+    $trigger: ... // jQuery object of active trigger or null if none active
     color: { // instance of Color inside colorPicker
         colors: { all kinds of color values... see later},
         options: { all the options you set or that are set as default... },

index.html

@@ -94,9 +94,9 @@ window.myColorPicker = $('input.color').colorPicker({
 
 <!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
-<!-- <script type="text/javascript" src="colors.js"></script> -->
+<script type="text/javascript" src="colors.js"></script>
-<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
+<script type="text/javascript" src="jqColorPicker.js"></script>
-<script type="text/javascript" src="jqColorPicker.min.js"></script>
+<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
 <script type="text/javascript">
 	(function(window, undefined){
 		'use strict';
@@ -506,7 +506,7 @@ window.myColorPicker = $('input.color').colorPicker({
 						e.stopPropagation && e.stopPropagation();
 						that.toggle();
 					}
-				})
+				});
 			},
 
 			cssAddon: // could also be in a css file instead

jqColorPicker.js

@@ -66,12 +66,12 @@
 
 	function toggle(event) {
 		var $this = $(this),
-			position,
+			position = $this.offset(),
 			$window = $(window);
 
 		if (event) {
-			position = $this.offset();
 			_$trigger = findElement($this);
+			_colorPicker.$trigger = $this;
 
 			(_$UI || build()).css({
 				'left': !(_$UI[0]._right = position.left + _$UI[0]._width >
@@ -93,6 +93,7 @@
 		} else {
 			$(_$UI).hide(_options.animationSpeed, function() {
 				_$trigger.blur();
+				_colorPicker.$trigger = null;
 				preRender(false);
 			});
 		}
@@ -252,13 +253,20 @@
 			opacity: true,
 			renderCallback: noop,
 			buidCallback: noop,
-			body: document.body
+			body: document.body,
+			scrollResize: true
 			// css: '',
 			// cssAddon: '',
 			// margin: '',
 			// preventFocus: false
 		}, options);
 
+		!_colorPicker && options.scrollResize && $(window).
+		on('resize scroll', function() {
+			if (_colorPicker.$trigger) {
+				_colorPicker.toggle.call(_colorPicker.$trigger[0], true);
+			}
+		});
 		_instance = _instance ? _instance.add(this) : this;
 		_instance.colorPicker = _colorPicker ||
 			(_colorPicker = new ColorPicker(options));