I am rendering the Aui dialog by setting toolbars : false in the configuration to disable close button(X) at corner of Aui dialog.
How to enable toolbars in a rendered aui dialog. i.e I want show (X)close icon after checking certain condition.
I think simply hiding and showing the toolbar will do what you want. You can hide and show the toolbar of a modal like so:
modal.getToolbar(Y.WidgetStdMod.HEADER).hide();
modal.getToolbar(Y.WidgetStdMod.HEADER).show();
In order to satisfy your use case, you should hide the toolbar, show the modal, then when your condition is met, show the toolbar:
modal.getToolbar(Y.WidgetStdMod.HEADER).hide();
modal.show();
// Once your condition is met:
modal.getToolbar(Y.WidgetStdMod.HEADER).show();
If you need more information, check out the Toolbar API Docs.
You can also select other toolbars besides the HEADER toolbar when using Modal.getToolbar(). Check out the list of the other toolbar sections for more details.
Here's a runnable example:
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: 'Modal body',
headerContent: '<h3>Modal header</h3>',
modal: false,
render: '#modal',
width: 450,
visible: false
}).render();
modal.getToolbar(Y.WidgetStdMod.HEADER).hide();
modal.show();
Y.one('#button').on('click', function(event) {
modal.getToolbar(Y.WidgetStdMod.HEADER).enable();
modal.getToolbar(Y.WidgetStdMod.HEADER).show();
});
});
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
<button id="button">Show Toolbar</button>
<div id="modal"></div>
</div>
Note: Hiding the toolbar does not disable it, so if you need to ensure that the user cannot access the toolbar, you will need to call Toolbar.disable() and you will need to disable all the inputs and buttons within the toolbar programmatically.
Related
I have a menu that calls the above events at the main div.
mouseover
function() {
$('.box-content-category').addClass('active');
$(".box-content-category").show(1);
}
mouseout
function() {
$('.box-content-category').addClass('active');
$(".box-content-category").hide(1);
}
The problem. When the user sets the mouse (mouseover) to below div to explore the menu the menu dissapears.
How can i set the menu to stay open on mouseover and close when the mouseout at the above divs?
Thank you
Wish you the best
I developed an app using Xamarin forms that has side menu see this url.
But I couldn't use this in my current project, so I made my custom component for side menu.
How to implementing feature that hide menu when I tap range out of side menu?
It is hard to give you any help without seeing your code, but generally I tackle this issue by adding a ContentView that covers the screen when ever your menu opens. The menu would be displayed on top of the ContentView. Then you add a TapGestureRecognizer to the ContentView which closes the menu when clicked.
You could add some color to the ContentView but make it opaque so it is see-through, something like this color: #74787878
ContentView backgroundView = new ContentView {
BackgroundColor = Color.FromHex("#74787878"),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Content = //Your menu
}
backgroundView.GestureRecognizers.Add(new TapGestureRecognizer {
Command = new Command(() => {
//Remove the background and hide the menu
})
});
I have a custom polymer dialog that I use for login, this is what I want it to look like:
This is the code I'm using to achieve that:
<polymer-element name="login-dialog">
<template>
<paper-dialog heading="XYZ Login" vertical autoCloseDisabled="true" transition="paper-transition-center" opened="true">
<p>{{feedback}}</p>
<paper-input floatingLabel label="Username" inputValue="{{username}}" type="text"></paper-input>
<paper-input floatingLabel label="Password" inputValue="{{password}}" type="password"></paper-input>
<paper-button role="button" on-click="{{reset}}" class="noink" affirmative>
Reset Password
</paper-button>
<paper-button role="button" on-click="{{login}}" class="ink" affirmative>
Login
</paper-button>
</paper-dialog>
</template>
<script type="application/dart" src="login-dialog.dart"></script>
</polymer-element>
I don't want the buttons to close the dialog, so I remove the affirmative from the paper buttons so that I can close the dialog myself if the correct login details were filled in.
As soon as I remove affirmative, a big white space appears at the bottom of the dialog:
Inside the dart code, I have the following for now:
login(event, detail, target) {
print("Clicked Login");
return false;
}
reset(event, detail, target) {
print("Clicked Reset");
return false;
}
I was hoping that returning false would stop the dialog from closing if I use affirmative, but it does nothing. Any ideas on how to get the buttons to no close the dialog unless I tell it to do so in the dart code and not have that white space at the bottom? (not keen on hacking it with css)
Returning false doesn't do anything. You need to call preventDefault() on the event.
login(event, detail, target) {
print("Clicked Login");
event.preventDefault();
// event.stopPropagation();
}
reset(event, detail, target) {
print("Clicked Reset");
event.preventDefault();
// event.stopPropagation();
}
<paper-dialog> has a specific option to disable automatic closing so you can affirmative for layout only.
<paper-dialog closeSelector="" ....
see also Prevent paper-dialog from automatically closing
I have a problem , i have a script for mobile version of page that will scroll down the page to a specific div tag, it works fine but I would like the script to also open this section (open a tab)
This is what i got so far
The script
<asp:PlaceHolder ID="plhAnimatedScroll" visible="false" runat="server">
<script type="text/javascript">
var navHeight = $('#gecko-sub-navigation').outerHeight();
var buffer = (navHeight * 2) + 70;
$("html, body").animate({ scrollTop: $('#' + '<%=SelectedPage%>').offset().top - buffer }, 1000);
</script>
</asp:PlaceHolder>
One of the sections of the page
<section class="help_section">
Box title
<div class="help_details">
<div class="help_btm_msg"> some text </div>
</div>
</section>
The opening of the tab is triggered by click on anchor tag so the class changes from class="link help_switch closed" to class="link help_switch open" , is there any way to adjust the script so that it will change the class from closed to open or emulate the click ?
Thanks
Since you are using jquery, you can simulate a mouseclick, or trigger a click on a certain element using the trigger function.
jQuery documentation:
.trigger()
The idea is that you can first setup a click handler, and then call that click handler any time by triggering the "click" function in your code:
$( ".help_switch" ).on( "click", function() {
alert("help_switch has been clicked, or triggered.");
// now toggle the open/closed class
var isOpen = !$(this).hasClass("closed");
if(isOpen){
$(this).removeClass("open");
$(this).addClass("closed");
} else {
$(this).removeClass("closed");
$(this).addClass("open");
}
});
// trigger the "click" event on .help_switch when the page loads
// to show an example of how to call it:
$( ".help_switch" ).trigger( "click" );
Hope this helps.
You can see a working example of this code on jsfiddle: http://jsfiddle.net/8cvkm7y3/3/, if you load this code in jsfiddle, then you can watch how the closed and open class toggles on your help_switch class as you click the "Box Title" link by "Inspect Element" in Chrome Developer Tools or your web inspector of choice.
I'm using Dojo version 1.6.1. I'm building a menu that has a Dialog dijit as a popup from a PopupMenuItem. This works, however, if the menu is docked on the right-hand side of the application I need the popup to display to the left of the menu. I can't seem to get this to work. If I use another type of widget (like a ColorPalette), this works fine. With popup submenus and a popup ColorPalette, everything opens to the left if the menu is on the right-hand side of the screen, and everything opens to the right if the menu is on the left-hand side of the screen. Dojo just handles this automatically. But with any Dialog widget, even an empty one, it always pops out to the right of the PopupMenuItem regardless of where the menu is on the screen. I thought that perhaps specifying height and width of the div that is the dijit.Dialog would resolve this, but it did not.
Here's a simplified version of the code:
<div data-dojo-type="dijit.Menu" id="toolPalette" style="position:absolute; right:0; top:0; z-index: 999;">
</div>
<script>
// Grab the div for the menu, declared in the HTML above.
var toolPalette = dijit.byId("toolPalette");
// This tool button has a popup
var menuItem1 = new dijit.PopupMenuItem({
id: "menuItem1",
iconClass: "shelterIcon",
popup: new dijit.Dialog()
});
toolPalette.addChild(menuItem1);
// This tool button does not have a popup
var menuItem2 = new dijit.MenuItem({
id: "menuItem2",
iconClass: "shelterIcon"
});
toolPalette.addChild(menuItem2);
toolPalette.startup();
</script>
Any help is greatly appreciated! I've tried everything I can think of.
Way to find your current Cursor location
document.onmouseup = getXY;
var mouseX, mouseY;
function getXY(e) {
mouseX= (e || event).clientX;
mouseY= (e || event).clientY;
if (document.documentElement.scrollTop > 0) {
mouseY= mouseY+ document.documentElement.scrollTop;
}
}
Your Code here .
var myDialog = new dijit.Dialog();
var menuItem1 = new dijit.PopupMenuItem({
id: "menuItem1",
iconClass: "shelterIcon",
popup: myDialog
});
Now apply the X and Y to your Dialog.
dijit.popup.open({
x: mouseX,
y : mouseY,
popup: myDialog
});