Search jQuery

jQuery Forum

Developing jQuery Mobile

jasonpmor..

2 clicks required to highlight nav bar?

in Developing jQuery Mobile • 2 years ago

(First - please let me know if there's a better place to post this. Github issues looks inactive?)

I have a navbar, and it seems to require 2 clicks to get the blue highlight (a.ui-btn-active).

Demonstrating in Chrome 10.0.612.3 and iPhone Simulator 4.1 (also happens on iOS 4.x hardware): http://screenr.com/HWu

Code (there are more pages in the HTML document, let me know if more source is needed to diagnose):

<div data-role="page" id="page-beers">
<div data-role="header">
<h1>Beers</h1>
<a href="page-home" data-back="true" data-icon="grid" class="ui-btn-right">Home</a>
<div data-role="navbar">
<ul>
<li><a data-transition="none" href="#page-beers" class="ui-btn-active">Search</a></li>
<li><a data-transition="none" href="#page-beers-top">Top 10</a></li>
<li><a data-transition="none" href="#page-beers-map">Map</a></li>
</ul>
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
<li data-role="list-divider"><h3>21st Amendment Brewery (CA) - #540</h3></li>
</ul>
</div>
<div data-role="footer">
</div>
</div>

Each page (#page-beers, #page-beers-top, #page-beers-map) has class="ui-btn-active" manually applied to its appropriate div[data-role=navbar]>ul>li. The same behavior occurs if this class is not present (so far as I can tell).

Reproduce at http://beerfestapp.heroku.com (as of 12/21/2010 - this link probably won't be accurate forever).

Thanks!

-Jason

Replies(6)

jasonpmor..

Re: 2 clicks required to highlight nav bar?

2 years ago

On http://jquerymobile.com/demos/1.0a2/#docs/toolbars/docs-navbar.html I see the same behavior - can't get .ui-btn-active to apply by clicking the navbars. (It's present on initial page load, but clicking the navbars just removes .ui-btn-active from the prior selection, and doesn't apply it to the new button)

bstanescu

Re: 2 clicks required to highlight nav bar?

2 years ago

Considering you're using AJAX page requests via hashes and the navbar (used on multiple pages) looks like this:

<div data-role="footer" data-id="foot" data-position="fixed">
<div data-role="navbar">
<a href="/some/uri/">First item</a>
<a href="/some-other-uri/">Second item</a>
</div>
</div>

So that clicking on "First item" will make the browser hash to /#/some/uri/

...I'm using the following workaround for this issue, by including this in a JS

$(".page").live("pageshow", function(){
$(page).find('div[data-role="navbar"] a[href*="' + window.location.hash.replace("#", '') + '"]').addClass('ui-btn-active');
});

It's quick and dirty, but, hey...it works! :)

polyfade

Re: 2 clicks required to highlight nav bar?

2 years ago

Unfortunately, after about the 4th tap on one of the navigation buttons it breaks on me anyway. I tried placing your JS snippet right before the closing body tag, tried placing it at the top with document.ready and tried with window.load. Nothing kept the ui-btn-active from displaying properly. Very frustrating…

http://spinlinestudio.com/jmobile/

jQuerymobile 1.0.3a
iPhone 3GS / 4.2.1

batestini

Re: 2 clicks required to highlight nav bar?

1 year ago

A simple solution that works provided that you link to different files and not anchors (#one, #two) is to copy the ui-btn-active class, rename it, and use that instead. Then jQuery won't interfere.

batestini

Re: 2 clicks required to highlight nav bar?

1 year ago

A simple solution that works provided that you link to different files and not anchors (#one, #two) is to copy the ui-btn-active class, rename it, and use that instead. Then jQuery won't interfere.

frequent

Re: 2 clicks required to highlight nav bar?

1 year ago

I added "ui-btn-active ui-state-persist" to the button, which should be active on the respective page and this works just fine.

Like so:

<div data-role="navbar" data-grid="d">
<ul>
<li><a href="page1.html" data-iconpos="top" data-icon="plus">page1</a></li>
<li><a href="#" class="ui-btn-active ui-state-persist" data-iconpos="top" data-icon="info">page2</a></li>
<li><a href="page3.html" data-iconpos="top" data-icon="plus">page3</a></li>
<li><a href="page4.html" data-iconpos="top" data-icon="plus">page4</a></li>
<li><a href="page5.html" data-iconpos="top" data-icon="plus">page5</a></li>
</ul>
</div>

Does this help?

Top Reply

Response title

Attachments

jQuery Forum

2 clicks required to highlight nav bar?

Replies(6)

Re: 2 clicks required to highlight nav bar?

Re: 2 clicks required to highlight nav bar?

Re: 2 clicks required to highlight nav bar?

Re: 2 clicks required to highlight nav bar?

Re: 2 clicks required to highlight nav bar?

Re: 2 clicks required to highlight nav bar?

Statistics

Tags

Actions

Related Posts