jQWidgets Forums

Tagged: autoOpenPopup, contextmenu, jqxMenu, Menu, mode, popup, submenu

This topic contains 6 replies, has 4 voices, and was last updated by Nadezhda 9 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Context Menu with sub menu Posts

April 2, 2015 at 11:34 am Context Menu with sub menu #69474

Siva

Participant

Hi team,

I have an issue on contextmenu which have sub menu too. Let me explain the scenario

I have five list items like : ‘home, settings, logon, product, career’
On the “settings” i have sub menu list items like: ‘profile, education, life’ and so …

Once i hover on that “settings”, it will open the submenu which i listed above. At this time, immediately move my mouse on the way to down like ‘logon, product….’ ok..
Still that “submenu” opened, again i hover up on that “settings” only “submenu” getting closed..

I want that once the mouse leave from “settings” menu, that submenu should be closed.

I saw our examples too, its also the same behaviour. will you please help me how to fix this issue?

Thanks in advance.

April 2, 2015 at 12:50 pm Context Menu with sub menu #69477

Nadezhda

Participant

Hello Siva,

You can achieve your requirement as you set ‘autoOpenPopup’ property to false and ‘mode’ to ‘popup’ (Context Menu demo). If it does not help you fix the issue, please provide us with a JSFiddle example we can test to determine if there is anything wrong with your implementation.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

April 3, 2015 at 10:33 am Context Menu with sub menu #69524

Siva

Participant

Hello team,

We tried all this type of API’s from jqxmenu, but no use for us. Please check your website header menu too, its also have the same issue.

April 3, 2015 at 10:56 am Context Menu with sub menu #69528

seenuvasan

Participant

Hello – JQwidget Team,
I also from siva team.
1) problem we having: “jqMenu” functionality.

2) what is existing: when we mouse leave from main menu, the sub menu not closed for certain cases (particularly for speed cursor moving on menu.)

3) what we exactly need: i) when mouse hover is their, the sub menu need to open
ii) when mouse not hover the sub menu need to hide.

— I think this is not a major issue, but we need to do this for our project —

Note: if you dont understand my concern clearly, please let me know.

We need the sub menu show and hide functionality based on the mouse hover function….
I guess now the function is based on mouse enter and mouse leave or some other…

April 6, 2015 at 10:14 am Context Menu with sub menu #69590

Nadezhda

Participant

Hello seenuvasan,

Here is an example which shows how to hide submenu when mouse hover is not over the submenu. I hope it would be helpful.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create a jqxMenu
                var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '140px', autoOpenPopup: false, mode: 'popup' });
                // open the context menu when the user presses the mouse right button.
                $("#jqxWidget").on('mousedown', function (event) {
                    var rightClick = isRightClick(event) || $.jqx.mobile.isTouchDevice();
                    if (rightClick) {
                        var scrollTop = $(window).scrollTop();
                        var scrollLeft = $(window).scrollLeft();

                        contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                        return false;
                    }
                });

                // disable the default browser's context menu.
                $(document).on('contextmenu', function (e) {
                    return false;
                });

                function isRightClick(event) {
                    var rightclick;
                    if (!event) var event = window.event;
                    if (event.which) rightclick = (event.which == 3);
                    else if (event.button) rightclick = (event.button == 2);
                    return rightclick;
                }

                $("#jqxMenu").hover(function () {
                    $(this).show();
                });

            });
        </script>
        <div id='jqxWidget' style='vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 400px;'>
            <div id='jqxMenu'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>About Us
                        <ul class="subAbout">
                            <li><a href="#">History</a></li>
                            <li><a href="#">Our Vision</a></li>
                            <li><a href="#">The Team</a></li>
                            <li><a href="#">Clients</a></li>
                            <li><a href="#">Testimonials</a></li>
                            <li><a href="#">Press</a></li>
                            <li><a href="#">FAQs</a></li>
                        </ul>
                    </li>
                    <li>Services
                    </li>
                    <li>Products
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
            <span style='font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;'>Right-Click here to Open the Menu </span>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

April 9, 2015 at 3:23 pm Context Menu with sub menu #69716

Jose

Participant

Hello JQWidgets team,

I have an issue on contextmenu when the submenu is opened.

I have a button, and in the onclick event I open the contextmenu in a fixed position: button bottom-right position. When I open a submenu is opened closed the left-top corner of the document. The submenu is opened as if the contextmenu was set at the position (top: 0, left: 0) and this is not true. There is some way to fix this issue?


var contextmenu = $("#contextmenu").jqxMenu({ width: 190, theme: 'metro', autoOpenPopup: false, mode: 'popup'});
var scrollTop = $("#button").position().top + $("#button").height();
var scrollLeft = $("#button").position().left - (contextmenu.width() - $("#button").width());
contextmenu.jqxMenu('setItemOpenDirection', 'LinkTasks', 'right', 'up');
contextmenu.jqxMenu('open', scrollLeft, scrollTop);

Thanks,
José

April 14, 2015 at 9:48 am Context Menu with sub menu #69866

Nadezhda

Participant

Hello José,

Please, insert the following lines into your code and check if it will fix the issue. If this suggestion does not help you provide us with a JSFiddle example which demonstrates the issue you experience.

// disable the default browser's context menu.
$(document).on('contextmenu', function (e) {
    return false;
});

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.