Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

fix(position): support IE8 #389

Closed
wants to merge 1 commit into from
Closed

fix(position): support IE8 #389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/position/position.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
};
}
};
Expand Down
22 changes: 15 additions & 7 deletions src/position/test/test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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('<div class="positioned">Positioned</div>');
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('<div class="positioned">Positioned' + withDelay + '</div>');
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);
}
};
});
Expand Down Expand Up @@ -108,6 +112,10 @@ <h3>Inside looong text</h3>
<p>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.</p>
<div class="content" position>HERE</div>
<p>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.</p>
<div class="content" position delay="6000">DELAY</div>
<p>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.</p>
<p>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.</p>
<p>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.</p>

<div style="position: fixed; bottom: 0px" class="container">
<h3>Within fixed div</h3>
Expand Down