Forum | Appery.io

I'm trying to base all pages of an app that will function as a book off of 1 template page. I would like to be able to change the header dynamically based on the chapter or page the reader is on. Is there a javascript function I can embed in the template that would dynamically change the header based on something else on the page, such as something contained in an or something?

For instance, can I write a script that targets the header to changed based on what is contained in the on-page ?

What I would really be aiming for is to have this script reference an external file. For instance, an if then statement that said "if on-page says this, then make the header X" or something similar.

Any other solution to getting headers to dynamically change based on an external file would be welcome as well.

Hi Elliot,

You can use following JS code on event you need:

pre

var newHaderText = "New caption";
jQuery('.ui-page:visible [data-role="header"] .ui-title').text(newHaderText);

/pre

Regards.