Skip to content
Permalink
Browse files
Merge branch 'position-notification'
  • Loading branch information
jzaefferer committed Apr 24, 2012
2 parents dfa89f9 + 252352e commit db72cb7e944552ee54854834e3a73602f1f4818a
Showing 14 changed files with 535 additions and 175 deletions.
@@ -13,76 +13,67 @@
<script>
$(function() {
$( ".demo" ).tooltip({
open: function(event, ui) {
$("<div>").addClass("arrow").appendTo(ui.tooltip);
},
position: {
my: "center bottom",
my: "center bottom-20",
at: "center top",
offset: "0 -20px"
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
.demo {
margin: 10em 0 0 10em;
}
.ui-tooltip, .arrow:after {
background: black;
border: 2px solid white;
background: black;
border: 2px solid white;
}
.ui-tooltip {
display: inline-block;
position: relative;
padding: 10px 20px;
color: white;
border-radius: 20px;
text-align: center;
font: bold 14px "Helvetica Neue", Sans-Serif;
font-stretch: condensed;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 0 7px black;
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px "Helvetica Neue", Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px black;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
.arrow.top {
top: -16px;
bottom: auto;
}
div[data-tooltip].active {
opacity: 1;
margin-top: 6px;
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
}
div[data-tooltip].out {
opacity: 0;
margin-top: -20px;
.arrow.top:after {
bottom: -20px;
top: auto;
}
</style>
</head>
@@ -43,7 +43,7 @@ <h2 id="qunit-userAgent"></h2>
<div id="parent" style="position: absolute; width: 6px; height: 6px; top: 4px; left: 4px; line-height: 6px;"></div>
<div id="within" style="position: absolute; width: 12px; height: 12px; top: 2px; left: 0px;"></div>

<div style="position: absolute; top: 0px; left: 0px">
<div id="scrollx" style="position: absolute; top: 0px; left: 0px">
<div id="elx" style="position: absolute; width: 10px; height: 10px; line-height: 10px;"></div>
<div id="parentx" style="position: absolute; width: 20px; height: 20px; top: 40px; left: 40px;"></div>
</div>
@@ -255,11 +255,30 @@ test( "offsets", function() {
});

test( "using", function() {
expect( 6 );
expect( 10 );

var count = 0,
elems = $( "#el1, #el2" ),
expectedPosition = { top: 40, left: 40 },
of = $( "#parentx" ),
expectedPosition = { top: 60, left: 60 },
expectedFeedback = {
target: {
element: of,
width: 20,
height: 20,
left: 40,
top: 40
},
element: {
width: 6,
height: 6,
left: 60,
top: 60
},
horizontal: "left",
vertical: "top",
important: "vertical"
},
originalPosition = elems.position({
my: "right bottom",
at: "rigt bottom",
@@ -269,11 +288,14 @@ test( "using", function() {

elems.position({
my: "left top",
at: "left top",
at: "center+10 bottom",
of: "#parentx",
using: function( position ) {
using: function( position, feedback ) {
deepEqual( this, elems[ count ], "correct context for call #" + count );
deepEqual( position, expectedPosition, "correct position for call #" + count );
deepEqual( feedback.element.element[ 0 ], elems[ count ] );
delete feedback.element.element;
deepEqual( feedback, expectedFeedback );
count++;
}
});
@@ -569,6 +591,67 @@ test( "within", function() {
}, "flipfit - left top" );
});

test( "with scrollbars", function() {
expect( 4 );

$( "#scrollx" ).css({
width: 100,
height: 100,
left: 0,
top: 0
});

collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90,
left: 90
}, "visible" );

$( "#scrollx" ).css({
overflow: "scroll"
});

var scrollbarInfo = $.position.getScrollInfo( $.position.getWithinInfo( $( "#scrollx" ) ) );

collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90 - scrollbarInfo.height,
left: 90 - scrollbarInfo.width
}, "scroll" );

$( "#scrollx" ).css({
overflow: "auto"
});

collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90,
left: 90
}, "auto, no scroll" );

$( "#scrollx" ).css({
overflow: "auto"
}).append( $("<div>").height(300).width(300) );

collisionTest({
of: "#scrollx",
collision: "fit",
within: "#scrollx"
}, {
top: 90 - scrollbarInfo.height,
left: 90 - scrollbarInfo.width
}, "auto, with scroll" );
});

test( "fractions", function() {
expect( 1 );

@@ -10,23 +10,31 @@
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function() {
var inputs = $("input");
$("ul").insertAfter(inputs);
$(window).resize(function() {
inputs.each(function() {
$(this).position({
var input = $(this).position({
my: this.id.replace(/-/, " "),
at: this.id.replace(/-/, " "),
of: "#container",
collision: "none"
});
$(this).next().menu().position({
my: "left top+20",
var menu = $(this).next().menu()
menu.position({
my: "left+30 top+20",
at: "left bottom",
of: this,
using: function( position, feedback ) {
input.val(feedback.horizontal + " " + feedback.vertical)
$(this).offset( position );
$(this)
.removeClass("left right top bottom center middle")
.addClass(feedback.horizontal)
.addClass(feedback.vertical);
}
});
});
}).resize();
@@ -44,11 +52,11 @@
top: -22px;
left: 5px;
}
.ui-flipped-left:before {
.right:before {
left: auto;
right: 5px;
}
.ui-flipped-top:before {
.bottom:before {
content: "↓";
top: auto;
bottom: -19px;

0 comments on commit db72cb7

Please sign in to comment.