jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › when add jqxresponse.js file, minimize method is not work on mobile browser

Tagged: , , , , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    when add jqxresponse.js file, minimize method is not work on mobile browser Posts
  • January 8, 2015 at 5:17 am when add jqxresponse.js file, minimize method is not work on mobile browser #65096

    minsu0806
    Participant
    when add jqxresponse.js file, minimize&restore method is not work on mobile browser.

the source code is minimized.html appended jqxresponse.js

this code just look minimize only.

restore method not work
------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The demo demonstrates the Minimized state of jqxMenu.</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="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxresponse.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxMenu
            $("#jqxMenu").jqxMenu({ width: '100%', height: '32px', autoSizeMainItems: true});
            $("#jqxMenu").jqxMenu('minimize');
            $("#minimizeCheckbox").jqxCheckBox({ checked: true });
            $("#minimizeCheckbox").on('change', function () {
                if ($("#minimizeCheckbox").val()) {
                    $("#jqxMenu").jqxMenu('minimize');
                }
                else $("#jqxMenu").jqxMenu('restore');
            });

            $("#jqxMenu").css('visibility', 'visible');
        });
    </script>
</head>
<body class='default'>
    <div id='jqxMenu' style='visibility: hidden;'>
        <ul>
            <li><a href="#Home">Home</a></li>
            <li><a href="#Solutions">Solutions</a>
                <ul style='width: 250px;'>
                    </li><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>Software Solutions
                                <ul style='width: 220px;'>
                                    </li><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><a href="#">All industries and solutions</a></li>
                
            
            <li><a href="#Products">Products</a>
                <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>     
        
    </div>
    <br />
    <br />
    <div id="minimizeCheckbox">Minimized</div>
</body>
</html>
    January 8, 2015 at 8:20 am when add jqxresponse.js file, minimize method is not work on mobile browser #65113

    Dimitar
    Participant

    Hello minsu0806,

    This has nothing to do with jqxresponse.js but with the default behaviour of jqxMenu on touch devices. To disable it, please set the minimizeWidth property to null (for more information, please refer to the Documentation). Here is a working example: http://jsfiddle.net/Dimitar_jQWidgets/ajabc9vn/embedded/result/ (tested with mobile versions of Chrome and Firefox).

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.