Goal: To build a versatile browser navigation menu system using the menus action javascripting.
Catch: Overlapping menu windows on mouseover when moving mouse pointer from one menu button to the next.
Have a look at this short video to have an idea about the Menus action javascript: https://www.ajaxvideotutorials.com/V...ui_menus_1.swf
It is also the first search result when you search for "menus" in the video library entitled: "Menus - Displaying pop up menus when the user clicks a button"
I tried to prevent this overlapping using two solution attempts:
Products Menu mouse over it FIRST:
PROODUCTS_MENU_DIV_ID_SELECTED_1ST.png
Products Menu mouse over it LAST:
PROODUCTS_MENU_DIV_ID_SELECTED_LAST.png
So when I put the following inline-js on mouseover of the HOME Menu Button
It works but then I want to hide the other dropdown menus when one menu is mouseover for example, I put this inline js code in the mouseover of the ProductsMenu:
without hiding the div of the products menu assuming that its id A5menu0.MENU won't change (which it does). this works if I mouseover the products menu first but it doesn't if i refresh the page and then mouse over other menu buttons with ids that change depending on which menu has been mouseovered first.
getMenu method - Menus AJS - UX.png
When I copy the example code to clipboard I get this call method of the window which is not the getMenu() method (possible BUG)
Then when I try to use getMenu method, I get the TypeError .getMenu is not a function as if the function is not defined in dialog component.
Uncaught TypeError - getMenu is not a function on mouseover.png
I have attached a sample testing UX named "Navigation_Menu_test" that has the dropdown menus for testing purposes.
I am using the latest production AA v12 build (4770) and testing in the browser.
Thanks in advance for taking the time looking into this. I do appreciate it ^^
Maroine
Navigation_Menu_Test.a5wcmp
Catch: Overlapping menu windows on mouseover when moving mouse pointer from one menu button to the next.
Have a look at this short video to have an idea about the Menus action javascript: https://www.ajaxvideotutorials.com/V...ui_menus_1.swf
It is also the first search result when you search for "menus" in the video library entitled: "Menus - Displaying pop up menus when the user clicks a button"
I tried to prevent this overlapping using two solution attempts:
1st Solution Attempt:
I inspected the element that holds the div displaying the dropdown menu in order to find the id and then use document.getElementById to hide it. It worked sometimes at least. The problem with that is that the div id changes depending on whose menu button I mouseover first. Check out the following screenshots:Products Menu mouse over it FIRST:
PROODUCTS_MENU_DIV_ID_SELECTED_1ST.png
Products Menu mouse over it LAST:
PROODUCTS_MENU_DIV_ID_SELECTED_LAST.png
So when I put the following inline-js on mouseover of the HOME Menu Button
Code:
document.getElementById("A5menu0.MENU").style.display = "none"; document.getElementById("A5menu1.MENU").style.display = "none"; document.getElementById("A5menu2.MENU").style.display = "none"; document.getElementById("A5menu3.MENU").style.display = "none"; document.getElementById("A5menu4.MENU").style.display = "none"; document.getElementById("A5menu5.MENU").style.display = "none";
Code:
document.getElementById("A5menu1.MENU").style.display = "none"; document.getElementById("A5menu2.MENU").style.display = "none"; document.getElementById("A5menu3.MENU").style.display = "none"; document.getElementById("A5menu4.MENU").style.display = "none"; document.getElementById("A5menu5.MENU").style.display = "none";
2nd Solution Attempt:
I tried to get a pointer to the menu object and execute the hide method to hide it getMenu method - Menus AJS - UX.png
When I copy the example code to clipboard I get this call method of the window which is not the getMenu() method (possible BUG)
Code:
//call a method of the window var wObj = {Grid.Object}.getWindow('{Alias}MYWINDOW'); wObj.hide(); //(UX Component only) Shortcut method to close a window {dialog.Object}.closeWindow('MYWINDOW');
Uncaught TypeError - getMenu is not a function on mouseover.png
I have attached a sample testing UX named "Navigation_Menu_test" that has the dropdown menus for testing purposes.
I am using the latest production AA v12 build (4770) and testing in the browser.
Thanks in advance for taking the time looking into this. I do appreciate it ^^
Maroine
Navigation_Menu_Test.a5wcmp
Comment