0

I have an old jQuery Mobile Splitview app and need to hide the menu on the left.

Updated: In Chrome view app at localhost and enter inspect menu to view the phone view: It's landing page is OK which shown content and menu folded properly. Until I login or click menu to enter any submenu. The menu is gone and I have to use phone back or forward instead.

enter image description here

My question is

  1. How to hide the left menu (if still using splitview)?

  2. Or is there anything to replace it as jQuery Mobile Splitview hasn't had activity for 5 years. Seems to have no support with others anymore.

    Picture of landing page look good in localhost view through Chrome. enter image description here

But when uploaded to heroku it only showed menu until we click home. enter image description here

And below I believed was the code about this issue.

!!! 5
%html
  %head
    %meta(name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1")
    = stylesheet_link_tag "application"
    = javascript_include_tag "application"
    = render :partial => "layouts/metatag"
    - if GMAP
      = javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false"
  %body
    = render :partial => "mindapp/menu"
    %div{"data-id" => "main", "data-role" => "panel", "data-backbtn"=>"false"}
      - if @cache
        - cache = {}
      - else
        - cache = {"data-cache"=>"never"}
      - if @backbtn
        - backbtn= {"data-backbtn"=>"true"}
      - else
        - backbtn= {"data-backbtn"=>"false"}
      %div{{"data-role" => "page"}.merge(cache) }
        %div{{"data-role" => "header"}.merge(backbtn)}
          %h1= @title || DEFAULT_TITLE
        %div{"data-role" => "content"}
          = yield
      = render :partial => "mindapp/static"
:javascript
  $(document).on("pagehide", 'div', function(e,ui) {
    var page = $(e.target);
    if(page.attr('data-cache') == 'never') {
      page.remove();
    };
  });
  $( document ).on( "pagechange", function(){
    $.get("/mindapp/ajax_notice", function(r) {$(r).appendTo('head').remove()});
    var meta = $(".content").text();
    if (!meta) {
      meta = "Mindapp Tools to create visual programming using mindmap"
    }
    $('meta[name=description]').attr('content', meta);
  });
/= raw handle_ma_notice
Community
  • 1
  • 1
PKul
  • 1,691
  • 2
  • 21
  • 41

1 Answers1

0

It's seem the viewport don't work unless I moved it to have it refreshed in partial file. In mycase I have all metatag in _metatag.html.erb, then worked.

Still I have another feature that need to be resolved. How to hide the left menu and make content 100%. 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="follow, all" />
  <meta name="language" content="en, th" />
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">
PKul
  • 1,691
  • 2
  • 21
  • 41