I have a button that is clickable. I want to dynamically put an overlay over it that is also clickable. When the overlay is on top and clicked I want the overlay onclick to be triggered, and the button onclick to be triggered.
Right now if I put the overlay on top with an onclick handler the click does not go through to the button underneath.
If I use pointerEvents="none" on the overlay then the click goes through but does not trigger the overlay onclick.
How can I get both onclicks to trigger when the overlay is on top?
<html><body>
<input type=button value=clickme style="position:absolute;top:50px;left:25px;z-index:-1" onclick="alert('button')" >
</body></html>
<script>
function createDiv(){
alert("creating div");
divTag = document.createElement("div");
divTag.id="overlay";
document.body.appendChild(divTag);
divTag.setAttribute("onclick","alert('overlay')");
divTag.style.backgroundColor="rgba(255, 255, 0, 0.5)";
divTag.style.top="0px";
divTag.style.left="0px";
divTag.style.width="100px";
divTag.style.height="100px";
divTag.style.zIndex=100;
//divTag.style.pointerEvents="none";
//divTag.style.pointerEvents="auto";
}
setTimeout(createDiv,2000);
</script>
https://jsfiddle.net/q6Levpds/
It's simple, don't touch the z-index of button, and set overlay z-index to -1
JS:
function createDiv(){
alert("creating div");
divTag = document.createElement("div");
divTag.id="overlay";
document.body.appendChild(divTag);
divTag.setAttribute("onclick","alert('overlay')");
divTag.style.backgroundColor="rgba(255, 255, 0, 0.5)";
divTag.style.top="0px";
divTag.style.left="0px";
divTag.style.width="100px";
divTag.style.height="100px";
divTag.style.zIndex=-1;
//divTag.style.pointerEvents="none";
//divTag.style.pointerEvents="auto";
}
setTimeout(createDiv,2000);
HTML:
<body>
<input type=button value="clickme" style="position:absolute;top:50px;left:25px" onclick="alert('button')" />
</body>
https://jsfiddle.net/q6Levpds/1/
Related
I am using p-sidebar to display a component as a sidebar from another component. Now when the sidebar displays, it has a close(X) icon at the top right corner and clicking on it closes the sidebar. I want to display a alert modal when clicked in close(X) icon.
<p-sidebar [(visible)]="slideBarDisplay"
[style]="{'height':'75%','overflow':'scroll'}"
position="bottom">
<sidebar-component (add)="addNew($event)"
(cancelAdd)="slideBarDisplay = false"
*ngIf="slideBarDisplay">
</sidebar-component>
</p-sidebar>
and I have showClearModal = false; to display the modal in sidebar-component html.
So I want to call
showAlertDisplay() {
this.showClearModal = true
}
when clicked on close(X) button so it will make p-dialog visible.
Appreacite any help
I just want change css property when scroll top of the page... not the bottom...
I tried
$(window).scroll(function(){
$(".class").css("position", "absolute");
//here change default position(fixed) when scroll(0.0)
});
I've this AngularJS demo app using Highcharts:
http://jsfiddle.net/dennismadsen/dpw8b8vv/1/
<div ng-app="myapp">
<div ng-controller="myctrl">
<button ng-click="hideView()">1. Hide</button>
<button ng-click="showView()">2. Show</button>
<div id="container" ng-show="show">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
</div>
If you change the width of the result view in JSFiddle, the Highchart will automatically resize it's width to the size of the container (the div with black border).
I've noticed that if Highchart is hidden, and the window is resized, it is not resized automatically (like iPad changing Landscape/Portrait orientation). Try this out by first clicing the "1. hide" button, change size of the result view, and then press the "2. show" button. See this example:
How can I force the highchart to resize even if it's not visible?
As per the documentation, we need to trigger the reflow method in scenarios where resize event cannot be captured by the chart.
Triggering reflow method in $timeout will render the chart properly.
$scope.showView = function () {
$scope.show = true;
$timeout(function () {
$scope.highchartsNG.getHighcharts().reflow()
});
}
Working Fiddle
I think it's a correct behaviour.
But considering that the resize event event fix the graph size, you can trigger a resize after the graph is shown, like:
setTimeout(function () {
$(window).trigger('resize');
}, 1);
It's the jQuery way, I think there's an angular too, but I'm not familiar with it.
I have an anglarJS project that has a horizontal navigation bar. Each element in the navigation bar is a category and uses an angularJS dropdown directive to show the subcategories for that category.
I would like the drop down to fill the whole screen from left to right. Currently the drop down determines it's width from the css "min-width" property. This does not solve my desire for the drop down menu to fill the whole screen I have seen some websites do this, and was wondering if there is a way to force my dropdown to fill the whole screen from left to right.
Here is the html for the page/drop down including the css that specifies the dropdown width.
Here is a picture of the dropdown again. I added blue arrows to indicate what I mean when I want the drop down to fill the whole screen.
The pictures are pretty high resolution and show you all the details. The page is rather complex to try and replicated in a plunker.
The whole thing needs to be responsive as well, and is based off of Bootstrap 3 and AngularJS Bootstrap.
Thanks for any help you can give!
David
I found a solution for the problem.
I created a button group that floats left that is on the same row as the button group in the center. The button group that floats left only contains one button, and that button has it's visibility set to hidden.
You have the dropdown attached to this button, rather than the ones in the center, since the dropdown won't start any farther left than the beginning of the button it is attached to.
<div class="pull-left">
<div class="btn-group" dropdown is-open="isOpen">
<button type="button" style="visibility: hidden" class="btn btn-link dropdown-toggle filter-criteria-variety-category-name" dropdown-toggle ng-disabled="disabled">
<span class="caret"></span>
</button>
<div class="dropdown-menu top-level-category-drop-down-standard" ng-style="{{windowWidth}}" ng-click="$event.stopPropagation()" >
<div ng-click="$event.stopPropagation()" ng-mouseleave="close()" ng-mouseenter="keepOpen()">
<div ng-if="currentCategory != undefined">
<horizontal-menu-inner close-drop-down-menu=$parent.closeDropDownMenu top-level-category=$parent.currentCategory></horizontal-menu-inner>
</div>
</div>
</div>
</div>
</div>
And for the centered button group that contains your categories you want to trigger the dropdown you pass the 'ioOpen' variable into the centered button directive as an attribute.
<div class="text-center">
<div class="btn-group">
<div class="horizontal-top-level-category" ng-repeat="topLevelCategory in categoryNavigationGraph">
<horizontal-top-level-category is-open=$parent.isOpen current-category-id=$parent.currentCategoryId top-level-category=topLevelCategory></horizontal-top-level-category>
</div>
</div>
</div>
You then have that directive set up to close or open the drop down depending on whether the mouse enters or leaves the button in that directive
<button ng-mousemove="activeMenuItemm()" ng-mouseleave="close($event)" ng-mouseenter="open()" type="button" ng-class="{'filter-criteria-variety-category-name-hover': filterCriteriaCategoryActive}" class="btn btn-link dropdown-toggle filter-criteria-variety-category-name" ng-disabled="disabled">
{{topLevelCategory.text}}
The tricky part is not having the dropdown close when you hover down from the centered button onto the dropdown
I did this by figuring out if the mouse was leaving from "down", which should not close the dropdown, or other, which should from the last position, which was calculated In the centered button directive link function:
link: function (scope, element) {
init();
scopeLevelFunctions();
function init(){
calculateBoundry();
}
function scopeLevelFunctions(){
scope.calculateElementBoundry = function(){
calculateBoundry();
}
}
function calculateBoundry(){
var boundry = element[0].getBoundingClientRect();
scope.boundry = boundry;
scope.topBoundry = boundry.top;
scope.bottomBoundry = boundry.bottom;
scope.leftBoundry = boundry.left;
scope.rightBoundry = boundry.right;
}
},
The open function triggered by mouseenter sets the boundry, which the close calculates from that value to see if this is a mouseleave that is leaving down
$scope.open = function(){
$scope.calculateElementBoundry();
$scope.currentCategoryId = $scope.topLevelCategory.categoryId;
$scope.filterCriteriaCategoryActive = true;
$scope.timeoutPromise = $timeout(function() {
$scope.isOpen = true;
}, 150);
};
$scope.close = function($event){
$scope.lastPosition = {
x : $event.clientX,
y : $event.clientY
};
var deltaX = $scope.lastPosition.x - $event.clientX,
deltaY = $scope.lastPosition.y - $event.clientY;
if($event.clientY >= ($scope.bottomBoundry - 8))
$scope.direction = "bottom";
else
$scope.direction = "other";
if($scope.direction != "bottom"){
if($scope.timeoutPromise != undefined)
$timeout.cancel(this.timeoutPromise);
$scope.isOpen = false;
$scope.filterCriteriaCategoryActive = false;
}
else{
if($scope.isOpen == false && $scope.timeoutPromise != undefined){
$timeout.cancel(this.timeoutPromise);
$scope.filterCriteriaCategoryActive = false;
}
}
I put the timeout in there so that if the user is just scrolling to bottom of the screen the drop down does not just appear. I cancel the timeout if they mouseleave and the drop down is not open.
The dropdown gets different data in it because the centered category directive has an attribute "categoryId" that is shared with the directive that the dropdown is located in. As that categoryId is changed that directive determines what that new categories submenu should be and feeds that into the dropdown.
I know how wide the dropdown should be because in the directive that contains the dropdown/invisible button I calculated the window width:
var width = $window.innerWidth;
$scope.windowWidth = "{'min-width':" + width + "}";
and on the dropdown I use ng-style to set this width
ng-style="{{windowWidth}}"
I want to relocate my bootstrap popover in the left side, i.e. I want to move the whole popover in the left side, while the white arrow would stay in one place.
I would like to have the effect which is on google.com website, when you click blue icon you see popover but its content is relocated while the white arrow is located under the user.
I know that I can use something like this:
.popover {
top:0 !important;
margin-top:10px;
}
Unfortunately, it relocates the whole popover altogether with white arrow.
What I have now (popover is on the right side and there's no place between screen edge and my popover)
What I want to have (small distance between popover and monitor's edge):
“I want to change the position of content of this popover so that this
arrow will be placed further on the left„
When the popover is shown the arrow position is calculated in Tooltip.prototype.replaceArrow based on width/height and placement. You can force a specific position with this CSS :
.popover .arrow {
left: 90px !important; /* or 45% etc */
}
But that will affect all popovers. Popovers is injected and removed to and from the DOM, and there is by default no way to target visible popovers individually. If you want to style the arrow on a specific popover, a workaround is to hook into the shown.bs.popover event, detect which popover that is being shown, and style the arrow for that popover if needed. Example :
.on('shown.bs.popover', function() {
var $popover = $('.popover')[0];
switch ($(this).attr('id')) {
case 'a' : $popover.find('.arrow').css('left', '10px');break;
case 'b' : $popover.find('.arrow').css('left', '40%');break;
case 'c' : $popover.find('.arrow').css('left', '180px');break;
default : break;
}
})
To get this to work, there must be only one popover shown at a time (see fiddle). It can be worked out with multiple visible popovers also, but then we need to add some HTML to the popover content.
see demo -> http://jsfiddle.net/uteatyyz/
As what I have understood so far, you want to achieve the popover to the left of the button.
Please check this Plunker Link
HTML Code:
<div class="pull-right">
<button type="button" mypopover data-placement="left" title="title">Click here</button>
</div>
Angular Code:
var options = {
content: popOverContent,
placement: "bottom",
html: true,
date: scope.date,
trigger: 'focus'
};
I have edited the answer as per the images that you have shown.
If this is not is answer, then please comment below.
Regards D.