when i switch between screens the navicon is not changing to the current page. The last page icon is still remaining as active. How do i set the current page navmenu icon to active on page load. Also I assume i will need to change the previous page's icon to inactive.
Do you mean the selected tab is not updating?
If you can add screen shots of what's happening, that would help.
yes that is correct. on the homescreen i have the homescreen set as active. when i navigate to a second page and then back to homescreen. The second page icon stays highlighted instead of homescreen navicon
code
var navbar = $("[data-role='navbar']:visible");
if($('.tg-state-persist', navbar).length == 0) {
$(".ui-btn-active", navbar).addClass('tg-state-persist');
} else {
$(".ui-btn-active", navbar).removeClass('ui-btn-active');
$(".tg-state-persist", navbar).addClass('ui-btn-active');
}
/code
It's how this particular component works in jQuery Mobile.
You load Page 1 with a NavBar component. The first tab is selected. The page is now in browser DOM.
You click on the 2nd tab. jQuery Mobile makes the 2nd tab active and then loads Page 2.
On Page 2, the 2nd tab is active.
On Page 2, you click on 1st tab to go back.
Page 1 was already loaded and is now in browser DOM. As the page is in the DOM, it is simply shown (not loaded). Its last state - 2nd tab was active (from navigation).
jQuery Mobile has a fixed NavBar: http://jquerymobile.com/demos/1.1.1/d... (we don't have it yet in the palette). This one would work as expected. We will be adding it soon to the builder. The code above takes the current NavBar component and makes it a persistent NavBar.
ok thanks where exactly should i enter this code?
On page load, for each page you have the navbar on
hmm it doesn't seem to have had any effect. The same thing is happening.. on each screen on load i added a custom javascript code event. I also made sure that my navbar element is called navbar. No luck
Did you also set the selected tab on each page?
ok this is my code. is there something i missed?
/this is for the home screen/
var navbar = $("[data-role='navbar']:visible");
if($('.tg-state-persist', navbar).length == 0) {
$(".ui-homebtn-active", navbar).addClass('tg-state-persist');
} else {
$(".ui-homebtn-active", navbar).removeClass('ui-homebtn-active');
$(".tg-state-persist", navbar).addClass('ui-homebtn-active');
}
/this is for the forrent screen/
var navbar = $("[data-role='navbar']:visible");
if($('.tg-state-persist', navbar).length == 0) {
$(".ui-forrentbtn-active", navbar).addClass('tg-state-persist');
} else {
$(".ui-forrentbtn-active", navbar).removeClass('ui-forrentbtn-active');
$(".tg-state-persist", navbar).addClass('ui-forrentbtn-active');
}