I'm looking to enable my users to search by selecting text. Once they select text, a new button will appear on the right side of the selected text giving them the option to search or not. However, when the user scrolls to the bottom of the page, the position of the search button is not correct. Here is the code snippet:
HTML:
<body ng-app="newsApp" ng-controller="NewsCtrl" ng-mouseup="showSelectedText($event)">
<!-- User search button -->
<div ng-show="isUserSearch" ng-style="{ 'left' : leftPos, 'top': rightPos, 'display': displayState }" class="searchBtn">
Search
</div>
<!-- Main content -->
<div>
<!-- Main content -->
</div>
</body>
CSS:
.searchBtn {
position: absolute;
padding: 4px 7px;
background-color: #ff0;
color: #ddd;
z-index: 9999;
border-radius: 5px;
height: 27px;
cursor: pointer;
}
Javascript:
angular.module('newsApp', [])
.controller('NewsCtrl', function ($scope) {
$scope.leftPos = "-200px";
$scope.rightPos = "-200px";
$scope.displayState = "none !important";
$scope.isUserSearch = false;
$scope.selectedTextSearch = "";
$scope.showSelectedText = function($event) {
$scope.selectedText = "";
if (window.getSelection) {
$scope.selectedText = window.getSelection().toString();
}
else if (document.selection && document.selection.type != "Control") {
$scope.selectedText = document.selection.createRange().text;
}
if($scope.selectedText.length > 0) {
$scope.leftPos = (+$event.clientX + 5) + 'px';
$scope.rightPos = (+$event.clientY - 15) + 'px';
$scope.isUserSearch = true;
} else {
$scope.isUserSearch = false;
}
};
});
What should be my next step?