i want to show footer navbar on different situation in JQUERY MOBILE

Question

I am making a mobile application with jQuery Mobile, but I have a problem with the Navbar Widget.

Here is the relevant part of my HTML code:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar">
        <ul id="abc">
            <li><a href="#" class="footerNavbar" data-icon="back"  data-role="button"  onclick="">a</a></li>
            <li id="a"><a href="#" class="footerNavbar" data-icon="check" data-role="button" onclick=""></a>b</li>
            <li id="b"><a href="#" class="footerNavbar" data-icon="check" data-role="button" onclick=""></a>c</li>
            <li id="c"><a href="#" class="footerNavbar" data-icon="forbidden" data-role="button" onclick="">d</a></li>
            <li id="d"><a href="#" class="footerNavbar" data-icon="delete" data-role="button" onclick="">e</a></li>
            <li id="e"><a href="#" class="footerNavbar" data-icon="check" data-role="button" onclick="">f</a></li>
            <li id="f"><a href="#" class="footerNavbar" data-icon="check" data-role="button" onclick="">g</a></li>
        </ul>
    </div>
</div>

I want to change the navbar depending on the situation, like this:

f(variable=='?'){
    $("#a").hide();
    $("#b").hide();

    $("#c").show();
    $("#d").show();
    $("#e").show();
    $("#f").show();
}else if(variable=='?'){
    $("#a").hide();
    $("#b").hide();
    $("#c").hide();

    $("#d").show();
    $("#e").show();
    $("#f").show();
}

But the Navbar is still not displayed the way I want. Also, the Navbar does not appear to be displayed in a well-designed way.

How can I obtain this?

Answer 1

I think you're looking for Window.matchMedia which allows you to set a rule like "when the screen size is less than 480px, do this, else other thing".

Here's an example from w3

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

I'd add that this is also accomplishable via CSS which a lot of folks do to handle this kind of thing - see libraries like Bootstrap or MaterialUI. For more info media queries - check this MDN out.

Answer 2

You have a few errors and unecessary commands in your HTML code example. Consider this simplified example HTML code:

<div data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div data-role="navbar" id="mynavbar">
      <ul>
        <li><a href="#" data-icon="back">Back</a></li>
        <li id="a"><a href="#" data-icon="check">a</a></li>
        <li id="b"><a href="#" data-icon="check">b</a></li>
        <li id="c"><a href="#" data-icon="forbidden">c</a></li>
        <li id="d"><a href="#" data-icon="delete">d</a></li>
      </ul>
    </div>
</div>

Likewise JavaScript code:

let variable = "?";
//let variable = "";

if (variable == '?') {
  $("#a").hide();
  $("#b").hide();

  $("#c").show();
  $("#d").show();

} else {
  $("#a").hide();
  $("#b").hide();
  $("#c").hide();

  $("#d").show();

}

Check out this Fiddle.

Note that Navbar widget version 1.4.5 official demosite will display differently if the number of items exceeds 5 - in which case the items will be displayed in two columns with multiple rows.

Answer 3

JQM doesn't support out-of-the-box a variable number of navbar buttons. At widget creation, the framework is checking how many items there are inside the list. Then, to get this nice-looking equal-width-buttons effect, the framework is applying some CSS rules: either a two-, three-, four- or five-columns style:

1. two-columns: each column has 50% width (grid A)
2. three-columns: 33% width (grid B)
3. four-columns: 25% width (grid C)
4. five-columns: 20% width (grid D)

To get an idea of that CSS rules, see here a description of the Grid widget: Grids - jQuery Mobile Demos.

Now, I believe the simplest solution to Your needs is to check how many toolbar buttons You need:

Example: adding an extra column to get a total of max. 6 columns:

.ui-grid-e {
  overflow: hidden;
}

.ui-grid-e > .ui-block-a, 
.ui-grid-e > .ui-block-b, 
.ui-grid-e > .ui-block-c, 
.ui-grid-e > .ui-block-d,
.ui-grid-e > .ui-block-e,
.ui-grid-e > .ui-block-f {
  width: 16.666%;
}

.ui-block-f {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

and then, depending from Your situation, override the original CSS rule with Your custom style, i.e. 100% / n. of cols. Hidden columns doesn't matter, while the visible columns will take the full-width space.