jQuery UI Widgets Forums Navigation Menu, Context Menu Mobile Menu Opening/Closing not quite right…

This topic contains 7 replies, has 2 voices, and was last updated by  atrumm 8 years, 9 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • atrumm
    Participant

    Hi all!

    I’m having trouble getting a mobile view to work the way I really want and I thought you might have insight… basically two things are funky:

    1 – when a user touches the hamburger icon, the menu will open and close quickly and it takes a few tries to get it to stay open – then they try to close it and it’ll close and open and take a few tries to get closed

    2 – underneath the menu, the content of the page is still visible and editable (if they’ve clicked edit – it’s a data form) – but the menu’s in the way. also if they scroll down, then they’ve lost the hamburger and can’t close the menu without scrolling back up…

    I’ve been trolling the forums and the API but I can’t find what I’m looking for on these two issues…

    Let’s see… I should show you the code (as best I can – it’s a complicated application and some of it I’m supposed to keep under wraps).

    The JS part:

            
           // blah blah supposedly unrelated stuff
    
            $("#jqxpanel").jqxPanel({theme: theme, width: '97%', height: '97%'});
            // Create a jqxMenu
            $("#appMenu").jqxMenu({theme: theme, width: '100%'});
         
            // blah blah blah way more other supposedly unrelated stuff
    
    

    The HTML Part:

      <div id="jqxpanel" data-role="page">
      <div id='appMenu'>
          <ul>
              <?php require VIEWS_PATH . '_templates/tabs-mobile.php'; ?>
          </ul>
      </div>
    <!-- blah blah closing the jqxpanel div and other stuff -->
    

    That tabs-mobile.php file:

    <style>
      .jqx-menu ul {
        padding-bottom: 10px;
      }
      
      .jqx-menu ul li {
        width: 280px;
        font-size: 24px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-top: 1px solid black;
      }
    </style>
            <?php if (Session::get('user_logged_in') == 'administrator'):?>
                <li><a href="<?php echo URL; ?>user/index">User Administration</a></li>
            <?php endif; ?>
            <li><a href="<?php echo URL; ?>well/index">Wells</a></li>
            <li><a href="../../login/showProfile">User Profile</a></li>
            <li><a href="../../login/logout">Logout</a></li>
    

    Hmmmm… hmmm… so – hopefully somebody has some ideas πŸ™‚

    Thanks!

    — Aaron


    Nadezhda
    Participant

    Hello Aaron,

    You can open/close Minimized menu only by clicking on Toggle Button(hamburger icon). This mode of the menu is used only on touch devices.
    We are using the following example for testing the minimized menu when there is a form under the menu and open/close methods work properly on tablet: http://jsfiddle.net/r02z8dcn/.

    Please, test the above example on your mobile device and give us feedback if it works or not. You can specify the type of device you tested on and its browser and operating system.

    Best Regards,
    Nadezhda

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


    Nadezhda
    Participant

    Hi Aaron,

    Please make sure you are using the latest version of jQWidgets (3.7.0).

    Best Regards,
    Nadezhda

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


    atrumm
    Participant

    Hi Nadezhda!

    Yep I just confirmed we’re using 3.7.0…

    I tried that fiddle – that works fine. It’s a little wonky because of being inside the fiddle but the menu stays open when I touch it – my phone is a Samsung Galaxy I (old and funky πŸ™‚ )

    But our menu on our app – man I cannot get it to stay open for the life of me – and then if I do, then I can’t get it to close – it’s almost like every time I touch it, it thinks I’ve touched it twice. This behavior is also happening on my partner’s phone and even just in the browser on my desktop when I emulate mobile (I use Chrome mostly – you can emulate by using inspect element)..

    Very weird…

    What else do you think? πŸ™‚

    — Aaron


    atrumm
    Participant

    ps: here’s the entire code of a test page I’m using where I still get the wonky behavior. It still involves integration with our database and stuff so you can’t really run this code as is and have it work, but maybe it’ll lead to some insight…

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>VuTrac Directional Survey Management</title>
        <link rel="icon" type="image/png" href="../../public/img/Etech82X75.png"/>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- in case you wonder: This is the cool-kids-protocol-free way to load jQuery -->
        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/application.js"></script>
        <link rel="stylesheet" href="http://vutrac.local/public/css/vutrac-basic-styles.css" type="text/css" />
        <link rel="stylesheet" href="http://vutrac.local/public/js/jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="http://vutrac.local/public/js/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
        <!-- 2 lines below added by Aaron Trumm for mobile responsiveness -->
        <link rel="stylesheet" href="http://vutrac.local/public/js/jquery_mobile/jquery.mobile-1.4.5.min.css" type="text/css" />
        <script type="text/javascript" src="http://vutrac.local/public/js/jquery_mobile/jquery.mobile-1.4.2.min.js"></script>
        
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxresponse.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxtouch.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxexpander.js"></script>
        
        <!-- line below added by Aaron Trumm for mobile responsiveness -->
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdatatable.js"></script>
        
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxmaskedinput.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxpasswordinput.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdockpanel.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxchart.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxchart.api.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="http://vutrac.local/public/js/jqwidgets/jqxsplitter.js"></script>
    
    <script type="text/javascript">
    
        $(document).ready(function () {
        
            var response = new $.jqx.response();
            var device = response.device;
            var type = device.type;
            var viewPort = response.viewPort;
            //var plotWidth = 0;
            //var plotHeight = 0;
           
            if(viewPort.width > 1000){
              plotHeight = (viewPort.width/3)*.47+'px';
            }
            else if (viewPort.width < 600) {
              plotHeight = viewPort.width*.47+'px';
            }
            else {
              plotHeight = '280px';
            }
            
            $("#spiderPlot").css("height",plotHeight);
            $("#vsPlot").css("height",plotHeight);
            $("#planElements").css("height",plotHeight);
                
            var resizeFunction = function () {
              response.refresh();
              var viewPort = response.viewPort;
              if(viewPort.width > 1000){
                plotHeight = (viewPort.width/3)*.47+'px';
              }
              else if (viewPort.width < 600) {
                plotHeight = viewPort.width*.47+'px';
              }
              else {
                plotHeight = '280px';
              }
              $("#spiderPlot").css("height",plotHeight);
              $("#vsPlot").css("height",plotHeight);
              $("#planElements").css("height",plotHeight);
            }
                 
            response.resize([resizeFunction]);
            
        
            initializeFormControls();
    
            var urlBase = 'http://vutrac.local/';
            var wellID = '1';
            $("#WellID").val(wellID);
    
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'WellID' },
                    { name: 'WellName' },
                    { name: 'API' },
                    { name: 'CompanyUWI'},
                    { name: 'Easting' },
                    { name: 'Northing' },
                    { name: 'Latitude' },
                    { name: 'Longitude'},
                    { name: 'CRS'}
                ],
                id: 'well_id',
                url: urlBase + 'well/wellheader_data/' + wellID
            };
            
            var wellAdapter = new $.jqx.dataAdapter(source,
                {
                    autoBind: true,
                    loadComplete: function () {
                        // get data records.
                        var record = wellAdapter.records[0];
                        $("#WellID").val(record.WellID);
                        $("#WellName").val(record.WellName);
                        $("#API").val(record.API);
                        $("#CompanyUWI").val(record.CompanyUWI);
                        $("#Easting").val(record.Easting);
                        $("#Northing").val(record.Northing);
                        $("#Latitude").val(record.Latitude);
                        $("#Longitude").val(record.Longitude);
                        $("#CRS").val(record.CRS);
                    }
                }
            );
            
            /**Goes to the Survey Index page with the correct WellID*/
            $('#Surveys').on('click', function (event)
            {
                window.location.href = urlBase + "survey/index/" + wellID;
            });
            
            /**Goes to the Plans Index page with the correct WellID*/
            $('#Plans').on('click', function (event)
            {
                window.location.href = urlBase + "plan/index/" + wellID;
            });
            
            $('#SpiderPlot').on('click', function (event)
            {
                window.location.href = urlBase + "well/wellheaderSpiderPlot/" + wellID;
            });
            
            $('#VSPlot').on('click', function (event)
            {
                window.location.href = urlBase + "well/wellheaderVSPlot/" + wellID;
            });
            
            $('#PlanElements').on('click', function (event)
            {
                window.location.href = urlBase + "well/wellheaderPlanElements/" + wellID;
            });
    
            /**Update or ADD the row when the user clicks the 'Save' button on the well header form in the splitter.**/
            $("#Save").click(function () {
                var row = {  WellID: $("#WellID").val(), WellName: $("#WellName").val(), API: $("#API").val(),
                    CompanyUWI: $("#CompanyUWI").val(), Easting: $("#Easting").val(), Northing: $("#Northing").val(),
                    Latitude: $("#Latitude").val(), Longitude: $("#Longitude").val(), CRS:$("#CRS").val()};
    
                // synchronize with the server - send add command
                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: urlBase + 'well/update',
                    data: row,
                    success: function (data, status, xhr) {
                        // add command is executed.
                        if ($("#WellID").val()=="add") {
                            window.location = urlBase + 'well/wellheader/' + data;
                        }
                    },
                    error: function () {
                        // cancel changes.
                        //commit(false);
                    }
                });
                disableFormControls();
            });
    
            /**BUTTON HANDLERS
             *
             * Clicking the Cancel button when the value is Edit enables the form for editing.
             * Need to add 'permission to edit' check to show this button at all.
             * Clicking the Cancel button when the value is Cancel disables editing.
             */
    
            $('#Cancel').on('click', function (event)
            {
                if( $("#Cancel").val() == 'Edit') {
                    enableFormControlsForEditing();
                } else if( $("#Cancel").val() == 'Cancel') {
                    disableFormControls();
                }
            });
    
            /**MENU ITEM HANDLERS
             *
             * Open the add well form with no data in it
             */
    //        $("#AddWellMenuItem").click(function () {
    //            $("#WellID").val('add');
    //            $("#WellName").jqxInput({disabled: false});
    //            $("#WellName").val('');
    //            $("#API").jqxInput({disabled: false});
    //            $("#API").val('');
    //            $("#CompanyUWI").jqxInput({disabled: false});
    //            $("#CompanyUWI").val('');
    //            $("#Save").show();
    //            $("#Cancel").val('Cancel');
    //        });
    
        
        });
    
        function initializeFormControls() {
            var theme = 'energyblue';
            var wellID = '1';
    
            // get the epsg_coordinatereferencesystem lookup data 
            var crsSource =
            {
              datatype: "json",
              datafields: [
              { name: 'CrsID' },
              { name: 'CrsName' }
              ],
              id: 'epsg_crs_id',
              url: 'http://vutrac.local/well/fillEpsgCrsDropdown'
            };
            
            var crsAdapter = new $.jqx.dataAdapter(crsSource, {
              autoBind: true,
              async: false
            }); 
        
            $("#jqxpanel").jqxPanel({theme: theme, width: '97%', height: '97%'});
            // Create a jqxMenu
            $("#appMenu").jqxMenu({theme: theme, width: '100%'});
            $("#WellName").jqxInput({disabled: (wellID == 'add' ? false : true)});
            $("#API").jqxInput({disabled: (wellID == 'add' ? false : true)});
            $("#CompanyUWI").jqxInput({disabled: (wellID == 'add' ? false : true)});
            $("#Easting").jqxInput({disabled: (wellID == 'add' ? false : true)});
            $("#Northing").jqxInput({disabled: (wellID == 'add' ? false : true)});
            $("#Latitude").jqxInput({disabled: (wellID == 'add' ? false : true)});
            $("#Longitude").jqxInput({disabled: (wellID == 'add' ? false : true)});
            $("#CRS").jqxDropDownList({
    					source: crsAdapter,
    					displayMember: 'CrsName',
    					valueMember: 'CrsID',
    					theme: theme,
    					width: "96%",
    					placeHolder: "Empty. Please Select:",
    					enableBrowserBoundsDetection: true,
    					itemHeight: 50,
    					disabled: (wellID == 'add' ? false : true),
              /*
              renderer: function (index, label, value) {
                var table = '<hr>';
                return table;
              }
              */
            });
            $("#Surveys").jqxButton({});
            $("#Plans").jqxButton({});
            $("#Cancel").jqxButton({});
            $("#Save").jqxButton({});
            $("#SpiderPlot").jqxButton({});
            $("#VSPlot").jqxButton({});
            $("#PlanElements").jqxButton({});
            //$("#Save").hide();
            (wellID == 'add' ? $("#Save").show() : $("#Save").hide());
        }
    
        function enableFormControlsForEditing() {
            $("#Save").show();
            $("#Cancel").val('Cancel');
            $("#WellName").jqxInput({disabled: false});
            $("#API").jqxInput({disabled: false});
            $("#CompanyUWI").jqxInput({disabled: false});
            $("#Easting").jqxInput({disabled: false});
            $("#Northing").jqxInput({disabled: false});
            $("#Latitude").jqxInput({disabled: false});
            $("#Longitude").jqxInput({disabled: false});
            $("#CRS").jqxDropDownList({disabled: false});
        }
    
        function disableFormControls() {
            $("#Save").hide();
            $("#Cancel").val('Edit');
            $("#WellName").jqxInput({disabled: true});
            $("#API").jqxInput({disabled: true});
            $("#CompanyUWI").jqxInput({disabled: true});
            $("#Easting").jqxInput({disabled: true});
            $("#Northing").jqxInput({disabled: true});
            $("#Latitude").jqxInput({disabled: true});
            $("#Longitude").jqxInput({disabled: true});
            $("#CRS").jqxDropDownList({disabled: true});
        }
        
    </script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; 
        }
        
        .well-data {
            text-align: center;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
            width: 96%;
            height: 38px;
            font-weight: bold;
            font-size: 14pt;
        }
        
        .well-data-dropdown {
            text-align: center;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
            width: 96%;
            font-size: 11pt;
        }
           
        #WellID {
          text-align: right;
          font-size: 11pt;
          font-weight: bold;
        }
        
        #WellName, #API, #CompanyUWI, #Easting, #Northing, #Latitude, #Longitude {
            font-weight: bold;
            font-size: 16pt;
        }
        
        .view-button {
          background-color: red;
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
          border-radius: 5px;
          font-size: 11pt;
          font-weight: bold;
          width: 100%;
          height: 33px;
        } 
        
        @media all and (max-width: 600px)
        {
            .my-breakpoint .ui-block-a, .my-breakpoint .ui-block-b, .my-breakpoint .ui-block-c
            {
                width: 95%;
                float: none;
                margin-left: auto;
                margin-right: auto;
            }
            
            #spiderPlot, #vsPlot, #planElements
            {
                height: 150px;
            }
            
        }
    
    </style>
    </head>
    <body>
    
    <div id="DIV1" style="width: 100%; height: 100%;">
      <div id="jqxpanel" data-role="page">
      
        <div id='appMenu'>
          <ul>
              <style>
      .jqx-menu ul {
        padding-bottom: 10px;
      }
      
      .jqx-menu ul li {
        width: 280px;
        font-size: 24px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-top: 1px solid black;
      }
    </style>
    
            <li><a href="../../user/index">User Administration</a></li>
            <li><a href="../../well/index">Wells</a></li>
            <li><a href="../../login/showProfile">User Profile</a></li>
            <li><a href="../../login/logout">Logout</a></li>
    
          </ul>
      </div>
    
      
      
        <div id="ContentPanel" class="plotRow">         
          <table width="99%"><tr><td>Well Name:</td><td><td id="WellID">Well ID: 1</td></tr></table>
          
          <table width="100%">
            <tr>
              <td width="25%"><input class="view-button" id="SpiderPlot" type="button" value="Spider Plot" /></td>
              <td width="25%"><input class="view-button" id="VSPlot" type="button" value="VS Plot" /></td>
              <td width="22%"><input class="view-button" id="PlanElements" type="button" value="Plan Elements" /></td>
            </tr>
          </table>
          
          
          <center><input class="well-data" type="text" id="WellName" name="WellName" /></center>
          API:<br>
          <center><input class="well-data" type="text" id="API" name="API" /></center>
          Company UWI:<br>
          <center><input class="well-data" type="text" id="CompanyUWI" name="CompanyUWI" /></center>
          Easting:<br>
          <center><input class="well-data" type="text" id="Easting" name="Easting" /></center>
          Northing:<br>
          <center><input class="well-data" type="text" id="Northing" name="Northing" /></center>
          Latitude:<br>
          <center><input class="well-data" type="text" id="Latitude" name="Latitude" /></center>
          Longitude:<br>
          <center><input class="well-data" type="text" id="Longitude" name="Longitude" /></center>
          CRS:<br>
          <center><div class="well-data-dropdown" id="CRS" name="CRS" /></div></center>
          <table width="100%">
            <tr>
              <td width="25%"><input class="view-button" id="Surveys" type="button" value="Surveys" /></td>
              <td width="25%"><input class="view-button" id="Plans" type="button" value="Plans" /></td>
              <td width="6%"></td>
              <td width="22%"><input class="view-button" id="Cancel" type="button" value="Edit" /></td>
              <td width="22%"><input class="view-button" type="button" id="Save" value="Save" /></td>
            </tr>
          </table>
        </div><!-- end ContentPanel -->
      </div><!-- end jxpanel -->
    </div><!-- end DIV1 -->

    Nadezhda
    Participant

    Hi Aaron,

    Please, provide us with a JSFiddle example which is similar to the above code so we can test to determine if there is anything wrong with your implementation. Note, that you are using reference to jqxcheckbox.js two times I would suggest you to take out one of them.

    Best Regards,
    Nadezhda

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


    atrumm
    Participant

    Hi Nadezha,

    Ok yes I’ll do that – I’ll have to make that fiddle tomorrow but I’ll show you πŸ™‚

    For now one thing I’ve narrowed down is if I pull the appMenu div out and put it above the jqxPanel, the problem is fixed, but it breaks scrolling on at least one of the emulators (samsung)…

    so still puzzling – I’ll make a fiddle for you tomorrow that’s similar… thanks for the continued help!

    — Aaron


    atrumm
    Participant

    Hi there – I did not make that fiddle – what I did do was realize that I didn’t need such a complicated div structure – i didn’t even need a jqxpanel…

    once I simplified the body to this:

      <div id='appMenu'>
          <ul>
              <?php require VIEWS_PATH . '_templates/tabs-mobile.php'; ?>
          </ul>
      </div>
         
          <table width="99%"><tr><td id="WellID">Well ID: <?php echo $this->well_id; ?></td></tr></table>
          
          <table width="100%">
            <tr>
              <td width="25%"><input class="view-button" id="SpiderPlot" type="button" value="Spider Plot" /></td>
              <td width="25%"><input class="view-button" id="VSPlot" type="button" value="VS Plot" /></td>
              <td width="22%"><input class="view-button" id="PlanElements" type="button" value="Plan Elements" /></td>
            </tr>
          </table>
          
          Well Name:<br>
          <center><input class="well-data" type="text" id="WellName" name="WellName" /></center>
          API:<br>
          <center><input class="well-data" type="text" id="API" name="API" /></center>
          Company UWI:<br>
          <center><input class="well-data" type="text" id="CompanyUWI" name="CompanyUWI" /></center>
          Easting:<br>
          <center><input class="well-data" type="text" id="Easting" name="Easting" /></center>
          Northing:<br>
          <center><input class="well-data" type="text" id="Northing" name="Northing" /></center>
          Latitude:<br>
          <center><input class="well-data" type="text" id="Latitude" name="Latitude" /></center>
          Longitude:<br>
          <center><input class="well-data" type="text" id="Longitude" name="Longitude" /></center>
          CRS:<br>
          <center><div class="well-data-dropdown" id="CRS" name="CRS" /></div></center>
          <table width="100%">
            <tr>
              <td width="25%"><input class="view-button" id="Surveys" type="button" value="Surveys" /></td>
              <td width="25%"><input class="view-button" id="Plans" type="button" value="Plans" /></td>
              <td width="6%"></td>
              <td width="22%"><input class="view-button" id="Cancel" type="button" value="Edit" /></td>
              <td width="22%"><input class="view-button" type="button" id="Save" value="Save" /></td>
            </tr>
          </table>

    everything seems hunky dory… thanks! πŸ™‚

    — A

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

You must be logged in to reply to this topic.