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
Related
I've created a drawer and I wish to close it by pressing the same button that triggers it. This button is outside the drawer. But QML doesn't seem to allow this as the only closepolicy (drawer property to close) options for Popups are:
Popup.NoAutoClose (where I have to click and drag the drawer to close it)
Popup.CloseOnPressOutside (anywhere outside)
Popup.CloseOnPressOutsideParent (anywhere outside) (default)
Popup.CloseOnReleaseOutside Popup.CloseOnReleaseOutsideParent
Popup.CloseOnEscape (only on escape button) (default)
Also, I don't seem to be able to click any button outside the drawer when it is visible/drawn for some reason. If that wasn't the case, I wouldn't have this issue either.
Can I make the drawer close by clicking on a specific button/area outside it?
Does anyone know the solution to this?
Thanks in advance!
Drawer inherited from Popup so we can take those advantages to control the behavior. By setting the model: false and closePolicy: Popup.NoAutoClose it is possible to control the drawer from button actions.
Window {
id: window
width: 640
height: 480
visible: true
Drawer {
id: drawer
width: 0.4 * window.width
height: window.height
closePolicy: Popup.NoAutoClose
modal: false
}
Button {
text: drawer.visible ? "close" : "open"
anchors.centerIn: parent
onClicked: {
drawer.visible = !drawer.visible
}
}
}
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 PrimeFaces wizard with some panels, and next/prev buttons is drawn by wizard widget itself... But there is one problem - when i press next button before the last step, it hides with animation... Is it possible to disable this animation and hide next button instantly?
So, you simply want to remove the fading effects on the wizard next button ?
These effects are done with Primefaces Javascript built-in functions, like:
PrimeFaces.widget.Wizard.prototype.showNextNav = function() {
jQuery(this.nextNav).fadeIn();
}
PrimeFaces.widget.Wizard.prototype.hideNextNav = function() {
jQuery(this.nextNav).fadeOut();
}
However, Primefaces creators have let the possibility of overriding them quite easily.
Just add this in your .xhtml page:
<script>
PrimeFaces.widget.Wizard.prototype.hideNextNav = function() {
jQuery(this.nextNav).hide();
}
PrimeFaces.widget.Wizard.prototype.showNextNav = function() {
jQuery(this.nextNav).show();
}
</script>
Tested and working on PF 5.1.
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
});
I am using menu using dijit.menu and Its work with right click and left click.
How I open the menu on mouse over and close on onmouseout?
dijitActionMenu = new dijit.Menu({
targetNodeIds:[actionMenuId],
leftClickToOpen:"true"
});
Have you tried something like
// Create a new Tooltip
var tip = new dijit.Tooltip({
// Label - the HTML or text to be placed within the Tooltip
label: '<div class="myTipType">This is the content of my Tooltip!</div>',
// Delay before showing the Tooltip (in milliseconds)
showDelay: 250,
// The nodes to attach the Tooltip to
// Can be an array of strings or domNodes
connectId: ["myElement1","myElement2"]
});
More details are here dialogs_tooltips.Even dijit.Menu have onMouseOver even.
onMouseOver Event
I am able to get the dijit/Menu onmouseover.
Create an element which will invoke onmouseover event.
Element
show() will call custom widget which will create menu for you.
E.g.,
show = function() {
var roll = new rollover()
}
And rollover.js will be the custom widget.
From the constructor of it, you can invoke the function and create the menu.
pMenu = new Menu({ class: "rollovermenu", id: "rolloverid" });