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
Related
I am using Shopisle theme. I have displayed product category drop-down filter widget on the left side of shop page. But on the smaller screens, it automatically shifts at the bottom of the page. How can it be displayed on the top in smaller screens?
It can be done with some javascript on the window resize event. The sidebar is really on the right side in the HTML markup (Or more specifically, it's below). It appears on the left because css has the main section floating right.
On resize, css removed the float at width 767px. So the side bar falls to the bottom.
With jQuery's insertBefore (http://api.jquery.com/insertbefore/) as well as insertAfter, the html markup can be switched.
NB: this example moves the entire sidebar. It can be modified a bit to move just a single widget if that's necessary. This indicates the general process.
**By the way, this script should be placed in a .js file for the child-theme. If a .js file is not already in place, then try adding it to the footer template file (preferably in child theme) within <script>...</script> tags.
var sidebar_at_top = false;
function formatdisplay(){
if(jQuery( window ).width() < 768){
if(!sidebar_at_top){
console.log('moving sidebar to before main area');
jQuery('.sidebar-shop').insertBefore(jQuery('.shop-with-sidebar'));
sidebar_at_top = true;
}
}else{
if(sidebar_at_top){
console.log('moving sidebar to after main area');
jQuery('.sidebar-shop').insertAfter(jQuery('.shop-with-sidebar'));
sidebar_at_top = false;
}
}
}
jQuery( window ).resize(function() {
formatdisplay();
});
jQuery( document ).ready(function() {
formatdisplay();
});
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/
I have a page where I have a fixed navbar in right and the content of the page.
in the content of the page I have a button when I click on him it will open a dialog in the center of the page, I'm using Angular Materiel Dialogs for this.
The problem is when I open the dialog the fixed bar is always on the top of the page :
As you can see the side bar is hiding a part of that dialog box.
And this is the code i use to diplay my dialog box :
$mdDialog.show({
clickOutsideToClose: true,
controller : DialogController,
controllerAs : 'vm',
parent : $document.find('body').eq(0),
templateUrl : templateUrl,
targetEvent : event
});
As you can see I'm using $document.find('body').eq(0), as a parent for the dialog, but why this dialog is never on top of the side bar ?
jsfiddle :
http://jsfiddle.net/jhzawjdb/17/
How can I solve this ?
#sidebar-wrapper {
z-index: 0;
}
Change z-index to 0 and this will correct the modal aka dialog box.
Override or change the z-index on #sidebar-wrapper to 0 from 1000.
http://jsfiddle.net/vcpqasyd/
I am trying to scroll to top everytime the slide is loaded. So that I can start from top to scroll the slide.
I tried this:
onSliderLoad: function (el) {
el.window.slider.scrollTo(0,0);
}
but it didn't scroll the slider to its top when the new slide is loaded.
How can I make the slider to go to top ?
I have a variety of ToggleButtons that are loaded with an image. The buttons size is determinated by the image size and the button itself is created by JavaCode. A few buttons have icons (the icon is just part of the loaded image) on either the left or right side.
How can I move the text by a certain value to the left or right so I can center the text again but with the offset of the icon? I don't mind passing the width of the icon as parameter, but I cant find anything to move the text for a certain amount.
The button is created from the green image, the right icon is part of it; total width is 300, icon is taking 100; the text should be centered to the leftover 200. For language setting reason the text itself cant be part of the picture.
you can set the style of the button as followed:
// top right bottom left
btn.setStyle("-fx-padding: 5px 5px 5px 5px;");
EDIT:
You can use an HBox:
HBox hbox = new HBox();
// the text of the "button"
Label lbl_txt = new Label("Text");
// the icon of the "button", i am using Labels for icon(with css)
Label lbl_ico = new Label("ico");
hbox.getChildren().addAll(lbl_txt, lbl_ico);
hbox.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
// alternative to Button click
}
});
Everything else is styling with css. ;-)