jQuery UI Widgets Forums Navigation Menu, Context Menu menu horizontal on ipad

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 10 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • menu horizontal on ipad #52438

    al3dv
    Participant

    Hi all, I have a problem with my horizontal menu.
    After the update at the last version of jqwidget framework I can’t see the menu when I visit my site using my iPad.

    when i visit my site using pc/mac – firefox/chrome/explorer the menu working fine, but not on ipad/iphone.

    it happen only after the update at the last versione of jqwidget.
    I tried also to roolback the jqwidget framework, and the menu shown correctly.

    thanks a lot
    Ale

    menu horizontal on ipad #52454

    Peter Stoev
    Keymaster

    Hi al3dv,

    We are not aware of such issue. We use jqxMenu on our own website and it is displayed correctly on IPAD and the menu’s version is the latest one.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    menu horizontal on ipad #52560

    al3dv
    Participant
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta name="keywords" content="jQuery Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" /> 
        <meta name="description" content="The jqxMenu widget makes it easy to add menus to your website or web application. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting."/>
        <title id='Description'>The jqxMenu widget makes it easy to add menus to your website or web application. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. </title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="scripts/demos.js"></script>
        <script type="text/javascript" src="jqwidgets/jqx-all.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    // Create a jqxMenu
                    $("#jqxMenu").jqxMenu({ width: '670', height: '30px'});
                    $("#jqxMenu").css('visibility', 'visible');
                    $("#disabled").jqxCheckBox({  width: '150px', height: '20px' });
                    $("#open").jqxCheckBox({  width: '150px', height: '20px' });
                    $("#hover").jqxCheckBox({  width: '150px', height: '20px' });
                    $("#topLevelArrows").jqxCheckBox({  width: '200px', height: '20px' });
                    $("#animation").jqxCheckBox({  width: '150px', height: '20px' });
                    $("#animation").on('change', function (event) {
                        var value = event.args.checked;
                        // enable or disable the menu's animation.
                        if (!value) {
                            $("#jqxMenu").jqxMenu({ animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0 });
                        }
                        else {
                            $("#jqxMenu").jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 });
                        }
                    });
                    $("#disabled").on('change', function (event) {
                        var value = event.args.checked;
                        // enable or disable the menu
                        if (!value) {
                            $("#jqxMenu").jqxMenu({ disabled: false });
                        }
                        else {
                            $("#jqxMenu").jqxMenu({ disabled: true });
                        }
                    });
                    $("#hover").on('change', function (event) {
                        var value = event.args.checked;
                        // enable or disable the menu's hover effect.
                        if (!value) {
                            $("#jqxMenu").jqxMenu({ enableHover: false });
                        }
                        else {
                            $("#jqxMenu").jqxMenu({ enableHover: true });
                        }
                    });
                    $("#open").on('change', function (event) {
                        var value = event.args.checked;
                        // enable or disable the opening of the top level menu items when the user hovers them.
                        if (!value) {
                            $("#jqxMenu").jqxMenu({ autoOpen: false });
                        }
                        else {
                            $("#jqxMenu").jqxMenu({ autoOpen: true });
                        }
                    });
                    $("#topLevelArrows").on('change', function (event) {
                        var value = event.args.checked;
                        // enable or disable the opening of the top level menu items when the user hovers them.
                        if (!value) {
                            $("#jqxMenu").jqxMenu({ showTopLevelArrows: false });
                        }
                        else {
                            $("#jqxMenu").jqxMenu({ showTopLevelArrows: true });
                        }
                    });
                });
            </script>
            <div id='jqxWidget' style='height: 300px;'>
                <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'>
                    <ul>
                        <li><a href="#Home">Home</a></li>
                        <li>Solutions
                            <ul style='width: 250px;'>
                                <li><a href="#Education">Education</a></li>
                                <li><a href="#Financial">Financial services</a></li>
                                <li><a href="#Government">Government</a></li>
                                <li><a href="#Manufacturing">Manufacturing</a></li>
                                <li type='separator'></li>
                                <li>Software Solutions
                                    <ul style='width: 220px;'>
                                        <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                                        <li><a href="#Mobile">Mobile</a></li>
                                        <li><a href="#RIA">Rich Internet applications</a></li>
                                        <li><a href="#TechnicalCommunication">Technical communication</a></li>
                                        <li><a href="#Training">Training and eLearning</a></li>
                                        <li><a href="#WebConferencing">Web conferencing</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">All industries and solutions</a></li>
                            </ul>
                        </li>
                        <li>Products
                            <ul>
                                <li><a href="#PCProducts">PC products</a></li>
                                <li><a href="#MobileProducts">Mobile products</a></li>
                                <li><a href="#AllProducts">All products</a></li>
                            </ul>
                        </li>
                        <li>Support
                            <ul style='width: 200px;'>
                                <li><a href="#SupportHome">Support home</a></li>
                                <li><a href="#CustomerService">Customer Service</a></li>
                                <li><a href="#KB">Knowledge base</a></li>
                                <li><a href="#Books">Books</a></li>
                                <li><a href="#Training">Training and certification</a></li>
                                <li><a href="#SupportPrograms">Support programs</a></li>
                                <li><a href="#Forums">Forums</a></li>
                                <li><a href="#Documentation">Documentation</a></li>
                                <li><a href="#Updates">Updates</a></li>
                            </ul>
                        </li>
                        <li>Communities
                            <ul style='width: 200px;'>
                                <li><a href="#Designers">Designers</a></li>
                                <li><a href="#Developers">Developers</a></li>
                                <li><a href="#Educators">Educators and students</a></li>
                                <li><a href="#Partners">Partners</a></li>
                                <li type='separator'></li>
                                <li>By resource
                                    <ul>
                                        <li><a href="#Labs">Labs</a></li>
                                        <li><a href="#TV">TV</a></li>
                                        <li><a href="#Forums">Forums</a></li>
                                        <li><a href="#Exchange">Exchange</a></li>
                                        <li><a href="#Blogs">Blogs</a></li>
                                        <li><a href="#Experience Design">Experience Design</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>Company
                            <ul style='width: 180px;'>
                                <li><a href="#About">About Us</a></li>
                                <li><a href="#Press">Press</a></li>
                                <li><a href="#Investor">Investor Relations</a></li>
                                <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                                <li><a href="#Careers">Careers</a></li>
                                <li><a href="#Showcase">Showcase</a></li>
                                <li><a href="#Events">Events</a></li>
                                <li><a href="#ContactUs">Contact Us</a></li>
                                <li><a href="#Become an affiliate">Become an affiliate</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <br />
                <div style='margin-left: 60px;  margin-top: 120px;'>
                    <div style='font-size: 16px; font-family: Verdana Arial;'>
                        Settings
                    </div>
                    <div style='margin-top: 20px; font-size: 14px; font-family: Verdana Arial; float: left;'>
                        <div id='animation' checked='checked'>Enable Animation</div>
                        <div style='margin-top: 20px;' id='disabled'>Disabled</div>
                    </div>
                    <div style='margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;'>
                        <div id='hover' checked='checked'>Enable Hover</div>
                        <div style='margin-top: 20px;' id='open' checked='checked'>Auto Open</div>
                    </div>
                      <div style='margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;'>
                        <div id='topLevelArrows'>Show Top-Level Arrows</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    I tried to put this page on my web site.

    if I open it from my mac/pc it working fine, but if I open it from my ipad/iphone I see the menu in ‘mobile version’.

    is it possibile to see the menu on device mobile with the same layout of desktop?

    – sorry for my english – thanks
    Ale

    menu horizontal on ipad #52563

    Peter Stoev
    Keymaster

    Hi Ale,

    Yes, it is possible. Add reference to jqxmenu.js and jqxcore.js and remove jqx-all.js.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.