Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Positioning working in everything but IE7

  • Loading branch information...
commit 24811a3549aa709a2e59e59d80c6e61985ebfc4e 1 parent a5a8da3
@stevehorn authored
Showing with 26 additions and 2 deletions.
  1. +8 −0 index.html
  2. +18 −2 jquery.miniColors.js
View
8 index.html
@@ -135,7 +135,15 @@
<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
20 jquery.miniColors.js
@@ -142,17 +142,32 @@ if(jQuery) (function($) {
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>');
selector
.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(),
+ top: getSelectorTopPosition(input),
left: getSelectorLeftPosition(input),
display: 'none'
})
@@ -191,6 +206,7 @@ if(jQuery) (function($) {
$(window).bind('resize', function(event){
selector.css('left', getSelectorLeftPosition(input));
+ selector.css('top', getSelectorTopPosition(input));
});
$(document).bind('mousedown.miniColors touchstart.miniColors', function(event) {

0 comments on commit 24811a3

Please sign in to comment.
Something went wrong with that request. Please try again.