Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: stevehorn/jquery-miniColors
base: 9dc916255a
...
head fork: stevehorn/jquery-miniColors
compare: e72811dba2
  • 3 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Showing with 49 additions and 2 deletions.
  1. +13 −0 index.html
  2. +36 −2 jquery.miniColors.js
View
13 index.html
@@ -129,8 +129,21 @@
Attached to a hidden input<br />
<input type="hidden" name="color4" class="color-picker" size="6" />
</p>
+
+ <p style="position: absolute; right: 0; top: 0; padding-right: 10px;">
+ Absolute positioned in upper right-hand corner
+ <input type="hidden" name="color4" class="color-picker" size="6" />
+ </p>
+ <p style="position: absolute; left: 0; bottom: 0; padding-left: 10px;">
+ <input type="hidden" name="color4" class="color-picker" size="6" />
+ Absolute positioned in bottom left-hand corner
+ </p>
+ <p style="position: absolute; right: 0; bottom: 0; padding-left: 10px;">
+ Absolute positioned in bottom right-hand corner
+ <input type="hidden" name="color4" class="color-picker" size="6" />
+ </p>
<p style="margin-top: 50px;">
Select an action to apply to all of the controls on this page:
View
38 jquery.miniColors.js
@@ -131,6 +131,35 @@ if(jQuery) (function($) {
// Hide all other instances
hide();
+
+ var getSelectorLeftPosition = function(input){
+ if(input.is(':visible')){
+ return input.offset().left;
+ } else {
+ var anchorLeftPosition = input.data('trigger').offset().left;
+ var selectorWidth = 162;
+ if((anchorLeftPosition + selectorWidth) < $(window).width()){
+ return anchorLeftPosition;
+ } else {
+ return anchorLeftPosition - selectorWidth;
+ }
+ }
+ };
+
+ var getSelectorTopPosition = function(input){
+ var anchorDistanceFromTop = input.data('trigger').offset().top;
+ var selectorHeight = 162; //Is there a way to get this height programatically?
+ var anchorHeight = input.data('trigger').height();
+ var windowHeight = $(window).height();
+ if((anchorDistanceFromTop + selectorHeight + anchorHeight) > windowHeight) {
+ return anchorDistanceFromTop - selectorHeight;
+ }
+ if((anchorDistanceFromTop + selectorHeight) >= selectorHeight){
+ return anchorDistanceFromTop + anchorHeight;
+ } else {
+ return anchorHeight - selectorHeight;
+ }
+ }
// Generate the selector
var selector = $('<div class="miniColors-selector"></div>');
@@ -138,8 +167,8 @@ if(jQuery) (function($) {
.append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"></div></div>')
.append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>')
.css({
- top: input.is(':visible') ? input.offset().top + input.outerHeight() : input.data('trigger').offset().top + input.data('trigger').outerHeight(),
- left: input.is(':visible') ? input.offset().left : input.data('trigger').offset().left,
+ top: getSelectorTopPosition(input),
+ left: getSelectorLeftPosition(input),
display: 'none'
})
.addClass( input.attr('class') );
@@ -175,6 +204,11 @@ if(jQuery) (function($) {
// Prevent text selection in IE
selector.bind('selectstart', function() { return false; });
+ $(window).bind('resize', function(event){
+ selector.css('left', getSelectorLeftPosition(input));
+ selector.css('top', getSelectorTopPosition(input));
+ });
+
$(document).bind('mousedown.miniColors touchstart.miniColors', function(event) {
input.data('mousebutton', 1);

No commit comments for this range

Something went wrong with that request. Please try again.