jqXmenu - display Issue - ver 3.8 - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular menu, horizontal, jQuery Menu, jqxMenu, Menu, mode, MVC, MVC4, orientation, vertical

This topic contains 2 replies, has 2 voices, and was last updated by Keshavan 9 years, 5 months ago.

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

Author

jqXmenu – display Issue – ver 3.8 Posts

July 1, 2015 at 8:21 am jqXmenu – display Issue – ver 3.8 #73232

Participant

Hi,

I have implemented jqxMenu, the problem is that at first when the login page is invoked, the menu first renders in
Vertical fashion and then changes to Horizontal menu. Inspite of menu being defined to be Horizontal.
I have pasted the code below, this happens for all screens in my MVC4 application.
Thanks,
Keshavan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title id='Description'>
        Orderman
    </title>
    <link rel="stylesheet" href="/Content/Site.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="/jqWidgets/jqwidgets/styles/jqx.ui-sunny.css" type="text/css" />
    <script type="text/javascript" src="/JqWidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script type="text/javascript" src="/JqWidgets/jqwidgets/jqxnotification.js"></script> 
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="/signalr/hubs"></script>
    <!--SignalR script to update the chat page and send messages.-->
    @RenderSection("Heads", required: false)
    @RenderSection("scripts", required: false)
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxMenu").jqxMenu({ width: '960px', mode: 'horizontal', theme: 'ui-sunny' });  //
        })
    </script>
    <script>
        $(function () {
            var chat = $.connection.chatHub;
            // Create a function that the hub can call back to display messages.
            chat.client.addNewMessageToPage = function (name, message) {
                // Add the message to the page.
                {
                    $("#Orderwin").val(message);
                }
                $('#messageNotification').jqxNotification({ disabled: false });
                $("#messageNotification").html(message)
                $("#messageNotification").jqxNotification("open");
            };
            // Start the connection.
            $.connection.hub.start().done(function () {
                var name = "Keshavan";
                var message = "Hello";
            });
        });
        $("#messageNotification").jqxNotification({
            width: 250, position: "top-right", opacity: 0.9,
            autoOpen: true, animationOpenDelay: 50, autoClose: true, autoCloseDelay: 30000, template: "info", disabled: true
        });
    </script>
</head>
<body>
    <header>
                <div id='jqxMenu' style="margin-top: 0%; ">
                    <ul>
                        <li><a href="/Compani/Index">Company</a></li>
                        <li>
                            Gallery
                            <ul>
                                <li><a href="/Category/Index">Category</a></li>
                                <li><a href="/Brand/Index">Brand</a></li>
                                <li><a href="/Product/Index">Product</a></li>
                            </ul>
                        </li>
                        <li><a href="/Supplier/Index">Supplier</a></li>
                        <li><a href="/Personnel/Index">People</a></li>
                        <li><a href="/Lead/Index">Lead</a></li>
                        <li><a href="/Customer/Index">Account</a></li>
                        <li><a href="/Jplan/Index">DRS</a></li>
                        <li>
                            <a href="#">Order</a>
                            <ul>
                                <li><a href="/Order/Index">Create</a></li>
                                <li><a href="/AmendOrder/Index">Amend</a></li>
                            </ul>
                        </li>
                        <li><a href="/Ship/Index">Logistics</a></li>
                        <li><a href="/Receievebles/Index">Settlement</a></li>
                        <li>
                            <a href="#">Inv Upload</a>
                            <ul>
                                <li><a href="#">Template</a></li>
                                <li><a href="/ImportEF/ImportEF">Inventory</a></li>
                            </ul>
                        </li>
                        <li><a href="/Account/RoleCreate">Admin</a>
                        <li><a href="/Home/Chat">Chat</a>
                    </ul>
                </div>
    </header>
    <div id="body">
        <section id="body1" class="content-wrapper main-content clearfix cl1">
            @RenderBody()
        </section>
    </div>
    <footer style="width: 960px;">
        <div class="content-wrapper">
            <span class="float-left" style="font-weight: 800; font-size: larger; color: white">
                &copy; @DateTime.Now.Year - Orderman - Making your business better all the time.
            </span>
        </div>
    </footer>
    <!--Notifications-->
    <div id="messageNotification"></div>
</body>
</html>

July 1, 2015 at 9:38 am jqXmenu – display Issue – ver 3.8 #73238

Dimitar

Participant

Hi Keshavan,

Please try the approach of the demo Default Functionality, where the menu div is invisible initially and is shown after the widget has been initialized.

Best Regards,
Dimitar

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

July 1, 2015 at 10:30 am jqXmenu – display Issue – ver 3.8 #73242

Keshavan

Participant

Hi Dimitar,

Thanks for the solution.

Best Regards,
Keshavan

Author

Posts

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

You must be logged in to reply to this topic.