fit in view-port update

README.md

@@ -50,6 +50,7 @@ $('.color').colorPicker({
     cssAddon: '', // adds css to existing
     margin: '', // positioning margin (can also be set in cssAddon)
     scrollResize: true // toggle for reposition colorPicker on window.resize/scroll
+    gap: 4 // gap to right and bottom edge of view port if repositioned to fit
     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)
 });

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="jqColorPicker.js"></script>
-<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
+<!-- <script type="text/javascript" src="colors.js"></script> -->
+<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
+<script type="text/javascript" src="jqColorPicker.min.js"></script>
 <script type="text/javascript">
 	(function(window, undefined){
 		'use strict';
@@ -187,6 +187,7 @@ window.myColorPicker = $('input.color').colorPicker({
 			},
 
 			cssAddon: // could also be in a css file instead
+				'.cp-color-picker{width:226px;}' +
 				'.cp-color-picker .cp-panel {line-height: 21px; float:right;' +
 					'padding:0 1px 0 8px; margin-top:-1px; overflow:visible}' +
 				'.cp-xy-slider:active {cursor:none;}' +
@@ -198,7 +199,7 @@ window.myColorPicker = $('input.color').colorPicker({
 				'.cp-panel hr {margin:0 -2px 2px; height:1px; border:0;' +
 					'background:#666; border-top:1px solid #222;}' +
 				'.cp-panel .cp-HEX {width:44px; position:absolute; margin:1px -3px 0 -2px;}' +
-				'.cp-alpha {width:154px;}',
+				'.cp-alpha {width:155px;}',
 
 			renderCallback: function($elm, toggled) {
 				var colors = this.color.colors.RND,

jqColorPicker.js

@@ -67,22 +67,27 @@
 	function toggle(event) {
 		var $this = $(this),
 			position = $this.offset(),
-			$window = $(window);
+			$window = $(window),
+			gap = _options.gap;
 
 		if (event) {
 			_$trigger = findElement($this);
 			_colorPicker.$trigger = $this;
 
 			(_$UI || build()).css({
-				'left': !(_$UI[0]._right = position.left + _$UI[0]._width >
-					$window.scrollLeft() + $window.width() ? 4 : '') ?
-					position.left : '',
-				'right': _$UI[0]._right,
+				'width': _$UI[0]._width,
+				'left': (_$UI[0]._left = position.left) -
+					((_$UI[0]._left = _$UI[0]._left + _$UI[0]._width -
+					($window.scrollLeft() + $window.width())) + gap > 0 ?
+					_$UI[0]._left + gap : 0),
 				'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
 					((_$UI[0]._top = _$UI[0]._top + _$UI[0]._height -
-					($window.scrollTop() + $window.height())) > 0 ?
-					_$UI[0]._top + 8 : 0)
+					($window.scrollTop() + $window.height())) + gap > 0 ?
+					_$UI[0]._top + gap : 0)
 			}).show(_options.animationSpeed, function() {
+				if (event === true) {
+					return;
+				}
 				_$alpha._width = _$alpha.width();
 				_$xy_slider._width = _$xy_slider.width();
 				_$xy_slider._height = _$xy_slider.height();
@@ -103,7 +108,8 @@
 		$('head').append('<style type="text/css">' +
 			(_options.css || _css) + (_options.cssAddon || '') + '</style>');
 
-		return _$UI = $(_html).css({'margin': _options.margin}).
+		return _$UI = $(_html).css({'margin': _options.margin,
+				'box-sizing': 'border-box'}).
 			appendTo('body').
 			show(0, function() {
 				_GPU = _options.GPU && $(this).css('perspective') === '';
@@ -254,7 +260,8 @@
 			renderCallback: noop,
 			buidCallback: noop,
 			body: document.body,
-			scrollResize: true
+			scrollResize: true,
+			gap: 4
 			// css: '',
 			// cssAddon: '',
 			// margin: '',