Forum | Appery.io

I have this code where it executes on every page load.:

function setActiveNavBtn(btn)
{
var $btn = Appery(btn);
var $navGrp = $('#mapScreen_KizunoNavButtons_15_mainNavBar');
$navGrp.find('a').removeClass('ui-btn-active');

 $btn.addClass('ui-btn-active'); 

}

the btn is the name of the button in the NavBar. But when I execute it, it doesn't set the btn as active.

Hi Aldrich,

Use the following function please:prefunction setActiveNavBtn(btn){
Apperyio(btn).addClass("ui-btn-active");
}/pre

It doesn't work. See my video:

http://www.screencast.com/users/Solid...

I would hope to have the button highlighted corresponding to the currently loaded page. I appears that the navbar is also being refreshed every time I switch pages.

Hello Andrich,

In this case you should pass name of desired button into this function on each page. How do you do this? Please, provide a screenshot where you invoke this action

I invoke it in a button as seen in the image. The 'whatsnewbutton' is the name of the navButton.

Hello,

Could you please share you app link with us:

http://docs.appery.io/documentation/s...

Is this the one?
http://appery.io/app/mobile-frame?src...

Try to use your function setActiveNavBtn with single button not in grid with mapping. And you should pass to this function name of this button (for example "mobilebutton_16"). In your example you try to set active class for label.

I do not get what you mean. If you inspect the btn element, you can see that the CSS is added in the class attribute, but it is not reflecting on the page.

Hi Aldrich.

Please follow these steps:

1 Modificate your "setActiveNavBtn" function with following code:

pre
code

function setActiveNavBtn(btn) {
jQuery(".ui-link").removeAttr("style");
var $btn = Appery(btn);
$btn.css('background-color', '#22AADD');
}

/code
/pre

2 Add "page show" JS event handler for "startScreen" page. And use following code:

pre
code

setActiveNavBtn("KizunoNavButtons_15_whatsNewNavBtn");

/code
/pre

3 Add "page show" JS event handler for "mapScreen" page. And use following code:

pre
code

setActiveNavBtn("KizunoNavButtons_15_mapNavBtn");

/code
/pre

4 Add "page show" JS event handler for "eventScreen" page. And use following code:

pre
code

setActiveNavBtn("KizunoNavButtons_17_eventNavBtn");

/code
/pre

5 Do the same with "menu" and "bio" pages.

That's all.

Regards.