From d529f38c247e114f0d291250f8e7d66f5b648859 Mon Sep 17 00:00:00 2001 From: Gabriele Rabbiosi Date: Fri, 3 May 2013 00:02:16 +0200 Subject: [PATCH] Fix $position service to make it work in IE8 It doesn't work when calculating the position of an element while the document is scrolled down --- src/position/position.js | 4 ++-- src/position/test/test.html | 22 +++++++++++++++------- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/position/position.js b/src/position/position.js index c62c12b210..f702e2390b 100644 --- a/src/position/position.js +++ b/src/position/position.js @@ -71,8 +71,8 @@ angular.module('ui.bootstrap.position', []) return { width: element.prop('offsetWidth'), height: element.prop('offsetHeight'), - top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop), - left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft) + top: boundingClientRect.top + ($window.pageYOffset || ($document[0].body.scrollTop + $document[0].documentElement.scrollTop)), + left: boundingClientRect.left + ($window.pageXOffset || ($document[0].body.scrollLeft + $document[0].documentElement.scrollLeft)) }; } }; diff --git a/src/position/test/test.html b/src/position/test/test.html index 4bdaca490e..4b1ea60d64 100644 --- a/src/position/test/test.html +++ b/src/position/test/test.html @@ -30,13 +30,17 @@ angular.module('position', ['ui.bootstrap.position']).directive('position', function ($compile, $position) { return { link: function (scope, element, attrs) { - - var positionedEl = angular.element('
Positioned
'); - var elPosition = $position.position(element); - elPosition.left += elPosition.width; - - positionedEl.css({left: elPosition.left + 'px', top: elPosition.top + 'px'}); - element.after($compile(positionedEl)(scope)); + var delay = attrs.delay || 0; + + setTimeout(function() { + var withDelay = delay > 0 ? " with delay!!" : ""; + var positionedEl = angular.element('
Positioned' + withDelay + '
'); + var elPosition = $position.position(element); + elPosition.left += elPosition.width; + + positionedEl.css({left: elPosition.left + 'px', top: elPosition.top + 'px'}); + element.after($compile(positionedEl)(scope)); + }, delay); } }; }); @@ -108,6 +112,10 @@

Inside looong text

Maecenas feugiat ultrices laoreet. Sed congue posuere diam ac faucibus. Pellentesque eget leo ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec quam eu tellus sagittis cursus a sit amet eros. Mauris sit amet orci at orci vulputate commodo ut ut nunc. Etiam sagittis erat ut nisi ultricies feugiat. Morbi sed eros nisi. Cras vitae augue in risus aliquet commodo non id est.

HERE

Maecenas laoreet nisi pretium elit bibendum eget tempor nunc aliquet. Vivamus interdum nisi sit amet tortor fermentum congue. Suspendisse at posuere erat. Aliquam hendrerit ultricies nunc non adipiscing. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis molestie viverra nulla a aliquet. Nullam non eros vel sem vehicula suscipit. Ut sit amet arcu ac tortor dignissim viverra in a ligula.

+
DELAY
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non velit nulla. Suspendisse sit amet tempus diam. Sed at ultricies neque. Suspendisse id felis a sem placerat ornare. Donec auctor, purus at molestie tempor, arcu enim molestie lacus, ac imperdiet massa urna eu massa. Praesent velit tellus, scelerisque a fermentum ut, ornare in diam. Phasellus egestas molestie feugiat. Vivamus sit amet viverra metus.

+

Etiam ultricies odio commodo erat ullamcorper sodales. Nullam ac dui ac libero dictum mollis. Quisque convallis adipiscing facilisis. In nec nisi velit, id auctor lectus. Cras interdum urna non felis lacinia vulputate. Integer dignissim, mi aliquam gravida auctor, massa odio cursus lorem, eu ultrices eros nisl tempus diam. Maecenas tristique pellentesque nisi sed adipiscing. Aenean hendrerit sapien quis arcu lobortis vitae pulvinar ante volutpat. Morbi consectetur erat eu lacus facilisis eu ullamcorper orci euismod. Quisque diam dui, interdum in suscipit et, fringilla non justo. Pellentesque non nibh odio. Proin sit amet massa sem.

+

Nam in urna erat, at congue nisi. Donec eu tellus lorem, sed facilisis tellus. Aliquam suscipit faucibus ipsum, at hendrerit metus interdum at. Integer et eros ac lacus vulputate sagittis quis quis erat. Suspendisse consectetur vehicula purus vitae imperdiet. Suspendisse in augue magna, quis imperdiet enim. Nullam non diam ac erat auctor bibendum. Praesent ante mauris, egestas sit amet molestie sed, tristique at lorem. Nam at mi ac nisl venenatis semper nec eget mi. Pellentesque a lectus ac leo feugiat suscipit. Quisque tristique dui nec urna placerat a viverra mi iaculis. Ut et tellus et turpis sagittis iaculis nec eu magna. Sed quis nunc non arcu tincidunt ultricies viverra id mauris.

Within fixed div