I am new to jQuery and i want to figure out how to select multiple elements for my navigation bar i'm trying to create. I want to have it check if the users mouse is over the item in the navigation bar or over the drop down menu (otherwise the drop down menu would disappear). I have tried to use:
$('#nav_item_1').mouseenter(function(){
//make the drop down menu visible and change nav_item background here
}); `
$('#nav_item_1,#dropdown').mouseleave({
//revert everything back to normal
});
but then when i try to move my mouse from the item in the navigation bar to the drop down menu it reverts everything back to normal.
The issue that you're having is because when you leave the navigation bar item .mouseleave is being triggered instantly hiding the #dropdown with it.
What I would do here is set a slight time out on the mouseleave event of the nav_item about half a second or less to hide the dropdown. This will allow the user the amount of seconds set outside of the navigation bar so that they can hover over the dropdown. After the user is on the #dropdown I would clear the timeout preventing the normal behavior of the dropdown hiding.
How would you do this with code?
$('#nav_item_1').mouseleave(function() {
/* set your time out here to return everything to normal. Because we want to allow the dropdown to stay visible for a fraction of time required to move the cursor to the dropdown.*/
});
And then,
$('#dropdown').mouseenter(function() {
// clear the timer to prevent normal behavior (keeping the dropdown visible).
});
Check out this link: http://www.w3schools.com/js/js_timing.asp
Regarding your original question about selecting multiple items. You are doing it corrently. But as I explained above your code is not reaching the mouseleave event of the #dropdown.
The second piece of code makes it so that when you leave #nav_item_1 OR #dropdown, everything will be reverted. So when you leave the #nav_item_1 to go to the #dropdown, the event will fire.
You could check every mouse move if the current mouse target contains the dropdown or nav_item:
$("#nav_item_1").mouseenter(function () {
// make menu visible etc
}
$(document).mousemove(function (e) { // note the e parameter
if ($(e.target).has("#dropdown,#nav_item_1").length !== 0) {
// revert
}
}
This requires the two elements to be very close to each other in order for it to work properly though.
Related
I want to hide the tab bar in some screens, to be more exact in the screens after the main screen of each tab.
I am using reac navigation 5
React native with hooks
I have the following layout, I am using drawer, tabs, and stack.
I want the tab bar to be displayed normally when the user stops at the shopping cart tab, but when the user clicks a button that takes him to another screen of the shopping cart stack, I want the tab bar to no longer be visible .
That is, only in the main screens of the tabs, the tab bar is present, in the other screens, it should not.
This behavior is satisfactory with Home, but not in the other tabs.
I really appreciate any help, I receive comments, suggestions, and anything to make this navigation distribution much better.
I've done this in my app in the following way:
import { useFocusEffect } from '#react-navigation/native';
{ ... }
// Hide parent tab bar on focus
useFocusEffect(
useCallback(() => {
// Do something when the screen is focused
const parent = dangerouslyGetParent();
if (parent) {
parent.setOptions({
tabBarVisible: false,
});
}
return () => {
};
}, [dangerouslyGetParent]),
);
Beware though. To make this really work when using navigation.pop() or navigating back to a previous screen you will need to add this same code to the components you want to ensure do show the tab bar as this modifies the navigator configuration itself. So you would just do the same in screens that get navigated to from the disabled tab bar screen with the above code sub tabBarVisible: true
I haven't really found a better way from researching when I was digging. Would love for other solutions that are more elegant but this at least will get you started and functionality working.
It took me a while to figure out the problem with Unity UI Button Transition:
Problem:
I hover on the button object, it goes to highlighted state, that's Fine. If I press mouse on button and it goes to pressed state then I move mouse outside of button so its no longer over button. The button goes to highlighted state instead of normal state. I need to click in empty space to get the normal state of button.
TLDR:
To retain keyboard automatic navigation, you probably want to inherit from IPointerExitHandler and deselect on exit:
public void OnPointerExit(PointerEventData data)
{
EventSystem.current.SetSelectedGameObject(null);
}
You could add checks to only deselect gameObject if already selected.
This is the default behaviour for a Button element in Unity - it retains focus after the initial interaction, causing it to show the Highlighted Color. Clicking away clears the focus, so it no longer becomes highlighted then.
To change this behaviour, you can switch the Navigation setting.
Currently, it's set to Automatic. According to the documentation, the option you want to use instead is None, which results in:
No keyboard navigation. Also ensures that it does not receive focus from clicking/tapping on it.
Hope this helps! Let me know if you have any questions.
If you want to use keyboard navigation and also get rid of this problem you can add this function to update:
void Update()
{
if (Input.GetMouseButtonUp(0))
{
EventSystem.current.SetSelectedGameObject(null);
}
}
I have some pages where I have a kendo ui grid (wired up to full CRUD services), but use a separate Kendo UI Toolbar control (as opposed to the toolbar configuration in the grid itself). I have a number of different buttons/menus on the toolbar, but am seeing a strange behavior when calling saveChanges() on the grid. If a cell is being edited when the save button is clicked, the grid is saved, but the edited value is lost (it reverts back to where it was). The following details what I see in different situations:
When using a save button configured in the grid (command: "save"), any changes in a cell being edited are committed with the save.
When using a plain html button that calls the saveChanges() method of the grid, any changes in a cell being edited are committed with the save.
When using a save button configured in a toolbar control, the changes in a cell being edited are LOST when saveChanges() is called.
The following jsbin shows the behavior of all three:
http://jsbin.com/jazobexatu/2/edit?html,js,output
I have tried calling the save from the toolbar button a number of different ways (even trying to trigger the click event of the external button), but nothing seems to correct the behavior. I also tried calling closeCell() on the grid (to try to force the value back into the data, but that doesn't work either). I haven't been able to debug the javascript enough to figure out what is different. I'm hoping someone with a deeper understanding of these controls can help me out.
For some reason, the mouse down event on the toolbar button doesn't cause a blur on the editor.
You can try it yourself by clicking in the cell to edit it, then click and hold the mouse button down on the "normal" button. The editor closes on mouse down, causing a blur of the editor, and persists the change.
If you do the same thing, click and hold mouse down, on the toolbar button, the editor stays open.
I've been poking through the source, but haven't figured out exactly why this happens. My best guess would be that the mousedown handler on the toolbar prevents the event from bubbling or running its default action and the editor doesn't blur.
Additional detail: On mousedown on the grid header button and the normal button, the focused element changes (which is what causes the editor blur). But on mousedown of the toolbar button, the editor input element still has the focus.
Shifting the focus on mousedown of the toolbar might be a workaround.
Sort of a weird hack, but this works in Chrome (any should in any browser that supports activeElement
click: function (e) {
$(document.activeElement).blur();
$("#grid").data("kendoGrid").saveChanges();
}
I have a kendo ui grid which has an incell editing mode.
Required is when altering a value in a cell and pressing anywhere else a confirmation window to appear to save/cancel the change.
Right now i have managed to make it partially work. In other words when i change a value and press somewhere on the web page or a button i get the confirmation window as requested.
When i press on another cell nothing happens. The pressed cell gets in edit mode, the "edit" function is fired but the previous cell loses its value and the binded function is never called.
So in a few words, i need to call my confirmation function every time a value is changed and the user presses anywhere else. Right now it partially works. It seems that the function is not fired when pressing on another cell.
My source right now is like that.
edit: function(e) {
e.model.unbind("change", confirmationFun).bind("change", confirmationFun);
}
function confirmationFun(e){
// open confirmation dialog and call save function
}
I tried to combine my confirmation with the change: function(e) but the change is fired every time i press on a cell, even before i change a value.
Instead of using edit event, you might use blur. After the initialization of your grid add the following command that binds any blur to your confirmationFun function.
$('#grid').on("blur", "input", confirmationFun);
Where grid is the id of your KendoUI grid.
The problem was finally resolved by removing the selectable: "multiple cell"
part from my code. Now by pressing on a different cell i get the confirmation dialog as required.
Thank you.
I have a expandable listview with textviews as rows and a webview as a child of each row (group). when user cliked on a group (row) webview with html loaded. after scrolling the webview towards end and then clicking another row doesnot show the group at top. it automatically scrolls down.
I want to scroll upwards so till currently selected group is at top.
thanks
You need to implement OnGroupClickListener with return value true to prevent event flow. In the OnGroupClick you can use setSelectionFromTop(groupPosition, 0); to move just expanded group to the top of ExpandableListView. Also you need to call expandGroup() and collapseGroup() in the listener. But you should note what you will override general behavior of ExpandableListView in ItemClick event with expanding and collapsing groups, such as animate and etc.
listView.setSelectedChild(selectedGroupNo, selectedChildNo, true);
does the trick.