From 396ed559a490507d07a605bd989e83d24e2d7f40 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 14:27:29 +0000 Subject: Add a new visual test for position --- tests/visual/position/position_within.html | 177 +++++++++++++++++++++++++++++ 1 file changed, 177 insertions(+) create mode 100644 tests/visual/position/position_within.html (limited to 'tests/visual/position') diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html new file mode 100644 index 000000000..f30ee625f --- /dev/null +++ b/tests/visual/position/position_within.html @@ -0,0 +1,177 @@ + + + + + Position Visual Test: Default + + + + + + + + + + + + + + + + +
+ Use the form controls to configure the positioning, or drag the positioned element to modify its offset. +
Drag around the parent element to see collision detection in action. +
+ +
+
+ +
+

This is the position parent element.

+
+ +
+

to position

+
+ +
+

to position 2

+
+ +
+ position... +
+ my: + + +
+
+ at: + + +
+
+ offset: + +
+
+ collision: + + +
+
+ +
+
+ + + \ No newline at end of file -- cgit v1.2.3 From 0bda22f443ace20035ec4f049c60b951d5c82b03 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 14:29:27 +0000 Subject: Update title to reflect test --- tests/visual/position/position_within.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tests/visual/position') diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index f30ee625f..da97eb7e1 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -2,7 +2,7 @@ - Position Visual Test: Default + Position Visual Test: Containing Element -- cgit v1.2.3 From dc66f02601eb3a46a93e5d08145e9b4580def237 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 12 May 2011 20:50:16 +0000 Subject: Add tests for position's `within` --- tests/unit/position/position.html | 44 ++- tests/unit/position/position_core_within.js | 560 ++++++++++++++++++++++++++++ tests/visual/position/position_within.html | 1 + 3 files changed, 586 insertions(+), 19 deletions(-) create mode 100644 tests/unit/position/position_core_within.js (limited to 'tests/visual/position') diff --git a/tests/unit/position/position.html b/tests/unit/position/position.html index 4f2e87e08..6e4373172 100644 --- a/tests/unit/position/position.html +++ b/tests/unit/position/position.html @@ -16,6 +16,7 @@ + @@ -34,29 +35,34 @@ elements smaller than 10px have a line-height set on them to avoid a bug in IE6 -->
-
-
-
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ +
+
+
+
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js new file mode 100644 index 000000000..0ece93b69 --- /dev/null +++ b/tests/unit/position/position_core_within.js @@ -0,0 +1,560 @@ +(function( $ ) { + +$("#within-container").show(); + +function scrollTopSupport() { + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; +} +var addTop = -20, + addLeft = -20; + +$.fn.addOffsets = function() { + var elOffset = this.offset(), + offset = $("#within-container").offset(); + + elOffset.top -= offset.top; + elOffset.left -= offset.left; + + return {top: elOffset.top - offset.top, left: elOffset.left - offset.left }; +}; + +test( "within: my, at, of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "left top, left top" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "left top, left bottom" ); + + $( "#elx" ).position({ + my: "left", + at: "bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 55, left: addLeft + 50 }, "left, bottom" ); + + $( "#elx" ).position({ + my: "left foo", + at: "bar baz", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 45, left: addLeft +50 }, "left foo, bar baz" ); +}); + +test( "within: multiple elements", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var elements = $( "#el1, #el2" ); + var result = elements.position({ + my: "left top", + at: "left bottom", + of: "#parent", + collision: "none", + within: $("#within-container") + }); + + same( result, elements ); + var expected = { top: addTop + 10, left: addLeft + 4 }; + elements.each(function() { + same( $( this ).addOffsets(), expected ); + }); +}); + +test( "within: positions", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var definitions = []; + var offsets = { + left: 0, + center: 3, + right: 6, + top: 0, + bottom: 6 + }; + var start = { left: 4, top: 4 }; + $.each( [ 0, 1 ], function( my ) { + $.each( [ "top", "center", "bottom" ], function( vindex, vertical ) { + $.each( [ "left", "center", "right" ], function( hindex, horizontal ) { + definitions.push({ + my: my ? horizontal + " " + vertical : "left top", + at: !my ? horizontal + " " + vertical : "left top", + result: { + top: addTop + (my ? start.top - offsets[ vertical ] : start.top + offsets[ vertical ]), + left: addLeft + (my ? start.left - offsets[ horizontal ] : start.left + offsets[ horizontal ]) + } + }); + }); + }); + }); + var el = $( "#el1" ); + $.each( definitions, function( index, definition ) { + el.position({ + my: definition.my, + at: definition.at, + of: "#parent", + collision: "none", + within: $("#within-container") + }); + same( el.addOffsets(), definition.result, + "Position via " + QUnit.jsDump.parse({ my:definition.my, at:definition.at }) ); + }); +}); + +test( "within: of", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "selector" ); + + $( "#elx" ).position({ + my: "left top", + at: "left bottom", + of: $( "#parentx"), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 60, left: addLeft + 40 }, "jQuery object" ); + + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: $( "#parentx" )[ 0 ], + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 40, left: addLeft + 40 }, "DOM element" ); + + // these tests are not valid for "within" since of is not contained by within. + /* + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: document, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( document ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( document ).height() - 10, + left: addLeft + $( document ).width() - 10 + }, "document as jQuery object" ); + + $( window ).scrollTop( 0 ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window" ); + + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: $( window ), + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() - 10, + left: addLeft + $( window ).width() - 10 + }, "window as jQuery object" ); + + if ( scrollTopSupport() ) { + $( window ).scrollTop( 500 ).scrollLeft( 200 ); + $( "#elx" ).position({ + my: "right bottom", + at: "right bottom", + of: window, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { + top: addTop + $( window ).height() + 500 - 10, + left: addLeft + $( window ).width() + 200 - 10 + }, "window, scrolled" ); + $( window ).scrollTop( 0 ).scrollLeft( 0 ); + }*/ + + var event = $.extend( $.Event( "someEvent" ), { pageX: 200, pageY: 300 } ); + $( "#elx" ).position({ + my: "left top", + at: "left top", + of: event, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).offset(), { + top: 300, + left: 200 + }, "event - left top, left top" ); + + event = $.extend( $.Event( "someEvent" ), { pageX: 400, pageY: 600 } ); + $( "#elx" ).position({ + my: "left top", + at: "right bottom", + of: event, + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).offset(), { + top: 600, + left: 400 + }, "event - left top, right bottom" ); +}); + +test( "within:offsets", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).position({ + my: "left top", + at: "left+10 bottom+10", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 70, left: addLeft + 50 }, "offsets in at" ); + + $( "#elx" ).position({ + my: "left+10 top-10", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 50, left: addLeft + 50 }, "offsets in my" ); + + $( "#elx" ).position({ + my: "left top", + at: "left+50% bottom-10%", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 58, left: addLeft + 50 }, "percentage offsets in at" ); + + $( "#elx" ).position({ + my: "left-30% top+50%", + at: "left bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }); + same( $( "#elx" ).addOffsets(), { top: addTop + 65, left: addLeft + 37 }, "percentage offsets in my" ); +}); + +test( "within: using", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + expect( 6 ); + + var count = 0, + elems = $( "#el1, #el2" ), + expectedPosition = { top: addTop + 40, left: addLeft + 40 }, + originalPosition = elems.position({ + my: "right bottom", + at: "rigt bottom", + of: "#parentx", + collision: "none", + within: $("#within-container") + }).addOffsets(); + + elems.position({ + my: "left top", + at: "left top", + of: "#parentx", + using: function( position ) { + position.top -= $("#within-container").offset().top; + position.left -= $("#within-container").offset().left; + same( this, elems[ count ], "correct context for call #" + count ); + same( position, expectedPosition, "correct position for call #" + count ); + count++; + }, + within: $("#within-container") + }); + + elems.each(function() { + same( $( this ).addOffsets(), originalPosition, "elements not moved" ); + }); +}); + +function collisionTest( config, result, msg ) { + var elem = $( "#elx" ).position( $.extend({ + my: "left top", + at: "right bottom", + of: $("#within-container")[0], + within: $("#within-container") + }, config ) ); + same( elem.addOffsets(), result, msg ); +} + +function collisionTest2( config, result, msg ) { + collisionTest( $.extend({ + my: "right bottom", + at: "left top" + }, config ), result, msg ); +} + +test( "within: collision: fit, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 0, left: addLeft + 0 }, "left top" ); +}); + + +test( "within: collision: fit, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "fit", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "right bottom"); + + collisionTest2({ + collision: "fit", + at: "left+2 top+3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, positive offset" ); + + collisionTest2({ + collision: "fit", + at: "left-2 top-3" + }, { top: addTop + 0, left: addLeft + 0 }, "left top, negative offset" ); +}); + +test( "within: collision: fit, window scrolled", function() { + if ( scrollTopSupport() ) { + $("#within-container").css({"width": "1000px", "height": "800px", "top": "20px", "left": "20px", "position": "relative"}); + + + + var win = $("#within-container").css("overflow", "auto"); + win.scrollTop( 300 ).scrollLeft( 150 ); + + collisionTest({ + collision: "fit", + at: "left-100 top-100" + }, { top: addTop + 300, left: addLeft + 150 }, "top left" ); + collisionTest2({ + collision: "fit", + at: "right+100 bottom+100" + }, { top: addTop + 300 + win.height() + 10, left: addLeft + 150 + win.width() + 10 }, "right bottom" ); + win.scrollTop( 0 ).scrollLeft( 0 ); + + } + +}); + +test( "within: collision: flip, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip" + }, { top: addTop + -10, left: addLeft + -10 }, "left top" ); + + collisionTest2({ + collision: "flip" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "right bottom" ); +}); + +test( "within: collision: flip, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "flip", + at: "right+2 bottom+3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, with offset added" ); + + collisionTest2({ + collision: "flip", + at: "left+2 top+3" + }, { top: addTop + $("#within-container").height() - 3, left: addLeft + $("#within-container").width() - 2 }, "bottom, positive offset" ); + + collisionTest2({ + collision: "flip", + at: "left-2 top-3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, negative offset" ); +}); + +test( "within: collision: none, no offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none" + }, { top: addTop + $("#within-container").height(), left: addLeft + $("#within-container").width() }, "left top" ); + + collisionTest2({ + collision: "none" + }, { top: addTop + -10, left: addLeft + -10 }, "moved to the right bottom" ); +}); + +test( "within: collision: none, with offset", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + collisionTest({ + collision: "none", + at: "right+2 bottom+3" + }, { top: addTop + $("#within-container").height() + 3, left: addLeft + $("#within-container").width() + 2 }, "right bottom, with offset added" ); + + collisionTest2({ + collision: "none", + at: "left+2 top+3" + }, { top: addTop + -7, left: addLeft + -8 }, "left top, positive offset" ); + + collisionTest2({ + collision: "none", + at: "left-2 top-3" + }, { top: addTop + -13, left: addLeft + -12 }, "left top, negative offset" ); +}); + +test( "within: collision: fit, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 10, left: addLeft + 10 }, "left top" ); + + $( "#elx" ).css({ + "margin-left": 5, + "margin-top": 5 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 20, left: addLeft + $("#within-container").width() - 20 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); + + $( "#elx" ).css({ + "margin-right": 15, + "margin-bottom": 15 + }); + + collisionTest({ + collision: "fit" + }, { top: addTop + $("#within-container").height() - 25, left: addLeft + $("#within-container").width() - 25 }, "right bottom" ); + + collisionTest2({ + collision: "fit" + }, { top: addTop + 5, left: addLeft + 5 }, "left top" ); +}); + +test( "within: collision: flip, with margin", function() { + $("#within-container").css({"width": "500px", "height": "500px", "top": "20px", "left": "20px", "position": "relative"}); + + + + $( "#elx" ).css( "margin", 10 ); + + collisionTest({ + collision: "flip", + at: "left top" + }, { top: addTop + $("#within-container").height() - 10, left: addLeft + $("#within-container").width() - 10 }, "left top" ); + + collisionTest2({ + collision: "flip", + at: "right bottom" + }, { top: addTop + 0, left: addLeft + 0 }, "right bottom" ); +}); + +//test( "bug #5280: consistent results (avoid fractional values)", function() { +// var wrapper = $( "#bug-5280" ), +// elem = wrapper.children(), +// offset1 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(), +// offset2 = elem.position({ +// my: "center", +// at: "center", +// of: wrapper, +// collision: "none" +// }).offset(); +// same( offset1, offset2 ); +//}); + + + +}( jQuery ) ); diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index da97eb7e1..e53e9ddf6 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -76,6 +76,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } + $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); $( ".positionable" ).css( "opacity", 0.5 ); -- cgit v1.2.3 From 2bf45db9a556cfdcdb62e568a61423f395156482 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 20:53:25 +0000 Subject: Update test to make things a bit easier to test --- tests/visual/position/position_within.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'tests/visual/position') diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index e53e9ddf6..a20ae7b56 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -19,6 +19,9 @@ height:100%; width:100%; margin:0; + /* force scroll bar*/ + min-height:800px; + min-width:800px; } .demo-description { text-align:center; @@ -76,7 +79,7 @@ collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() }); } - $( ".demo" ).append("
").css("overflow","auto").scrollTop( 500 ).scrollLeft( 500 ); + $( ".demo" ).append("
").css("overflow","auto"); $( ".positionable" ).css( "opacity", 0.5 ); @@ -91,8 +94,9 @@ // reset offset before calculating it $( "#offset" ).val( "0" ); position(function( result ) { - $( "#offset" ).val( "" + ( ui.offset.left - result.left ) + - " " + ( ui.offset.top - result.top ) ); + var demo = $( ".demo" ); + $( "#offset" ).val( "" + ( ui.offset.left - result.left - demo.offset().left + demo.scrollLeft() ) + + " " + ( ui.offset.top - result.top - demo.offset().top + demo.scrollTop() ) ); position(); }); } -- cgit v1.2.3 From f798b046e0e25f1eea0ed695089c4f4502f9c18d Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Fri, 13 May 2011 22:21:52 +0000 Subject: Update core visual test to allow testing while the window is scrolled. --- tests/visual/position/position.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'tests/visual/position') diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index da0ff5170..11932da0e 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -35,7 +35,7 @@ -- cgit v1.2.3 From 40c008872154965d7572cda7911d42857e9fc3a9 Mon Sep 17 00:00:00 2001 From: David Murdoch Date: Thu, 26 May 2011 14:22:12 +0000 Subject: Fix visual test in IE6 and move the new helper functions for getting scrollbar properties to $.position --- tests/unit/position/position_core_within.js | 37 +++++------------------------ tests/visual/position/position_within.html | 9 ++++++- ui/jquery.ui.position.js | 15 +++++++----- 3 files changed, 23 insertions(+), 38 deletions(-) (limited to 'tests/visual/position') diff --git a/tests/unit/position/position_core_within.js b/tests/unit/position/position_core_within.js index 9c563b1a2..567c17192 100644 --- a/tests/unit/position/position_core_within.js +++ b/tests/unit/position/position_core_within.js @@ -4,31 +4,6 @@ function scrollTopSupport() { $( window ).scrollTop( 1 ); return $( window ).scrollTop() === 1; } -function getScrollbarWidth() { - var div = $( "
" ), - innerDiv = div.children()[0], - w1, w2; - $( "body" ).append( div ); - w1 = innerDiv.offsetWidth; - div.css( "overflow", "scroll" ); - - w2 = innerDiv.offsetWidth; - - if ( w1 === w2 ) { - w2 = div[0].clientWidth; - } - - div.remove(); - - return w1 - w2; -} -function getScrollInfo ( within ) { - var that = within[0], - scrollHeight = within.height() < that.scrollHeight, - scrollWidth = within.width() < that.scrollWidth, - scrollbarWidth = getScrollbarWidth(); - return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; -}; module( "position - within", { setup: function(){ @@ -301,7 +276,7 @@ test( "collision: fit, no offset", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -315,7 +290,7 @@ test( "collision: fit, with offset", function() { collisionTest({ collision: "fit", at: "right+2 bottom+3" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom"); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom"); collisionTest2({ collision: "fit", @@ -340,7 +315,7 @@ test( "collision: fit, within scrolled", function() { collisionTest2({ collision: "fit", at: "right+100 bottom+100" - }, { top: addTop + within.height() - 10 - getScrollInfo( within ).height, left: addLeft + within.width() - 10 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 10 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 10 - $.position.getScrollInfo( within ).width }, "right bottom" ); within.scrollTop( 0 ).scrollLeft( 0 ); } }); @@ -414,7 +389,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -427,7 +402,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 20 - getScrollInfo( within ).height, left: addLeft + within.width() - 20 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 20 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 20 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" @@ -440,7 +415,7 @@ test( "collision: fit, with margin", function() { collisionTest({ collision: "fit" - }, { top: addTop + within.height() - 25 - getScrollInfo( within ).height, left: addLeft + within.width() - 25 - getScrollInfo( within ).width }, "right bottom" ); + }, { top: addTop + within.height() - 25 - $.position.getScrollInfo( within ).height, left: addLeft + within.width() - 25 - $.position.getScrollInfo( within ).width }, "right bottom" ); collisionTest2({ collision: "fit" diff --git a/tests/visual/position/position_within.html b/tests/visual/position/position_within.html index a20ae7b56..ac1009d3e 100644 --- a/tests/visual/position/position_within.html +++ b/tests/visual/position/position_within.html @@ -22,6 +22,9 @@ /* force scroll bar*/ min-height:800px; min-width:800px; + + /* IE6 needs this */ + text-align:center; } .demo-description { text-align:center; @@ -29,8 +32,10 @@ } .demo-container { background:#aaa; - width:80%; + width:80%; height:80%; + + text-align:left; margin:0 auto; position:relative; padding:10px; @@ -40,6 +45,8 @@ overflow:hidden; position:relative; height:100%; + /* IE6 needs this */ + width:100%; } #parent { width: 60%; diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index e254ff9ff..5ebff5d16 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -17,8 +17,10 @@ var rhorizontal = /left|center|right/, rposition = /^\w+/, rpercent = /%$/, center = "center", - _position = $.fn.position, - getScrollbarWidth = function() { + _position = $.fn.position; + +$.position = { + scrollbarWidth : function() { var div = $( "
" ), innerDiv = div.children()[0], w1, w2; @@ -36,13 +38,14 @@ var rhorizontal = /left|center|right/, return w1 - w2; }, - getScrollInfo = function( within ) { + getScrollInfo : function( within ) { var that = within[0], scrollHeight = within.height() < that.scrollHeight, scrollWidth = within.width() < that.scrollWidth, - scrollbarWidth = getScrollbarWidth(); + scrollbarWidth = $.position.scrollbarWidth(); return { height : scrollHeight ? scrollbarWidth : 0, width : scrollWidth ? scrollbarWidth : 0 }; - }; + } +}; $.fn.position = function( options ) { if ( !options || !options.of ) { @@ -145,7 +148,7 @@ $.fn.position = function( options ) { elemHeight = elem.outerHeight(), marginLeft = parseInt( $.curCSS( this, "marginLeft", true ) ) || 0, marginTop = parseInt( $.curCSS( this, "marginTop", true ) ) || 0, - scrollInfo = getScrollInfo( within ), + scrollInfo = $.position.getScrollInfo( within ), collisionWidth = elemWidth + marginLeft + ( parseInt( $.curCSS( this, "marginRight", true ) ) || 0 ) + scrollInfo.width, collisionHeight = elemHeight + marginTop + -- cgit v1.2.3 From 7281f9f22904d97b3d244a1c8ed2450e6506d538 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Thu, 9 Jun 2011 17:14:21 +0200 Subject: Update menubar to forward menu option to nested menus, update default demo to set within update to the demo frame (for /demos) or window (standalone). Update visual test to have more useful defaults --- demos/menubar/default.html | 67 ++++-------------------------- tests/visual/position/position_within.html | 50 +++++++++++----------- ui/jquery.ui.menubar.js | 17 +++++--- 3 files changed, 43 insertions(+), 91 deletions(-) (limited to 'tests/visual/position') diff --git a/demos/menubar/default.html b/demos/menubar/default.html index 79662bd9f..8f15be516 100644 --- a/demos/menubar/default.html +++ b/demos/menubar/default.html @@ -13,9 +13,10 @@ - - + + - - - - +
Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
Drag around the parent element to see collision detection in action. @@ -126,15 +126,15 @@

This is the position parent element.

- +

to position

- +

to position 2

- +
position...
@@ -142,7 +142,7 @@ - +
- -
+ +
- \ No newline at end of file + diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index a0e9afb3c..39e75924e 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -21,7 +21,11 @@ $.widget( "ui.menubar", { version: "@VERSION", options: { buttons: false, - menuIcon: false + menuIcon: false, + position: { + my: "left top", + at: "left bottom" + } }, _create: function() { var that = this; @@ -39,6 +43,9 @@ $.widget( "ui.menubar", { this._hoverable( items ); items.next( "ul" ) .menu({ + position: { + within: this.options.position.within + }, select: function( event, ui ) { ui.item.parents( "ul.ui-menu:last" ).hide(); that._trigger( "select", event, ui ); @@ -119,7 +126,7 @@ $.widget( "ui.menubar", { // TODO ui-menubar-link is added above, not needed here? input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" ); }; - + }); that._bind( { keydown: function( event ) { @@ -210,11 +217,9 @@ $.widget( "ui.menubar", { var button = menu.prev().addClass( "ui-state-active" ).attr( "tabIndex", -1 ); this.active = menu .show() - .position( { - my: "left top", - at: "left bottom", + .position( $.extend({ of: button - }) + }, this.options.position ) ) .removeAttr( "aria-hidden" ) .attr( "aria-expanded", "true" ) .menu("focus", event, menu.children( "li" ).first() ) -- cgit v1.2.3 From 927857ce84b11b081d0c983e5fa561bc2264bd19 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 12 Jul 2011 11:15:33 -0400 Subject: Position: Cleanup up position demo CSS and add it to the within-visual-test --- demos/position/default.html | 14 +++++++------- tests/visual/position/position_within.html | 13 ++++++++++++- 2 files changed, 19 insertions(+), 8 deletions(-) (limited to 'tests/visual/position') diff --git a/demos/position/default.html b/demos/position/default.html index 60b8b39f9..72bf8abcc 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -12,7 +12,7 @@