0

How to change navbar in jQuery Mobile from width like this?

In m.IKEA it's make:

<div data-role="header" id="ikea-homeheader" data-backbtn="false">
    <div id="ikea-navbar" data-role="headerbar" data-moreListId="#ikea-more-list">
        <ul>            
            <li class="ikea-navbar-item "><a href="/se/sv/" >Hem</a></li>
            <li class="ikea-navbar-item "><a href="/se/sv/catalog/functional/" >Sortiment</a></li>
            <li class="ikea-navbar-item "><a href="/se/sv/shoppinglist/" rel="nofollow">Inkopslista</a></li>
            <li class="ikea-navbar-item ikea-navbar-item-active"><a href="/se/sv/stores/" >Varuhus</a></li>

            <li class="ui-headerbar-more-item" data-role="headerbar-more-item"><a data-role="popupbutton" data-popup-content="more-item-popup" ><div class="ikea-navbar-more-image"></div></a></li>
        </ul>
    </div>
</div>


<div data-role="popup" id="more-item-popup">
    <ul data-role="listview" data-theme="d" id="ikea-more-list">
    </ul>
    <div data-role="popup-cancel-button">
        <div data-role="button" data-theme="c">Cancel</div>

    </div>
</div>

But how it's work I don't understand.

In my jQuery mobile 1.0.1 It's don't work ...

What's data-role="headerbar", data-moreListId, data-role="headerbar-more-item" ?

TITAN
  • 83
  • 1
  • 1
  • 6
  • I don't understand what you are asking. Your images appear to be different sizes, that's all. – shanabus Feb 13 '12 at 02:22
  • Navbar change when you change the width of the screen. I can not understand how to make the trigger to the width. – TITAN Feb 13 '12 at 12:03

1 Answers1

0

If you are trying to refresh the width on orientation change, you could try reapplying jqm styling/formatting using this command:

$("#your-jqm-page").page();

.page() refreshes the page with jQM markup. You may also have to try the .trigger("create") method as discussed here: JQuery Mobile .page() function causes infinite loop?

As for your other new questions, those data attributes look like elements added by the jqm framework after the page is initialized.

UPDATE

If you are trying to detect when a browser has resized, use a function like this:

$(window).resize(function() {

  // this is whatever size you would like to make the change on, in pixels
  var minimumPreferredSize = 600;

  if ($(window).width() < minimumPreferredSize) {
     $("#Varuhus").html("...");
  }
  else
  {
     $("#Varuhus").html("Varuhus");
  }
});

This solution assumes your a tag has an id of Varuhus.

This solution was made possible by this other post: Detect when a window is resized using JavaScript ?

Hope this helps!

Community
  • 1
  • 1
shanabus
  • 12,989
  • 6
  • 52
  • 78
  • How will work .trigger("create") with change width a window ? – TITAN Feb 13 '12 at 16:32
  • @TITAN I would like to help but I do not understand what you mean by change width of a window. You mean when orientation changes or do you mean a full browser running on a desktop/laptop PC? – shanabus Feb 13 '12 at 18:40
  • full browser running on a desktop/laptop PC? - yes, not only. – TITAN Feb 13 '12 at 19:44
  • Please see updated answer, this may be the solution you were looking for. – shanabus Feb 13 '12 at 20:16