How do you set the Navigation buttons as "active" using Javascript?

[Aldrich Barcenas]

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');

Code: Select all

 $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.

[Kateryna Grynko]

Hi Aldrich,

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

[Aldrich Barcenas]

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.

[Evgene Karachevtsev]

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

[Aldrich Barcenas]

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

[Evgene Karachevtsev]

Hello,

Could you please share you app link with us:

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

[Aldrich Barcenas]

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

[Evgene Karachevtsev]

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.

[Aldrich Barcenas]

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.

[Yurii Orishchuk]

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.