Managing Navigation

To provide users with access to the many features available in an "out of the box" FatSecret Platform application, a common "built in" navigation structure is automatically included in each application.
This navigation structure is a set of links output at the top of the application. There are five standard links in the default navigation, in the following order:
  • Home
  • Food Diary
  • Exercise Diary
  • Weight History
  • Diet Calendar
Figure 1: Standard FatSecret Platform navigation links
However, you may wish to remove one or more of the navigation options (e.g.: provide an alternate "home" web page), or to integrate with your web site navigation instead of using the common "built in" navigation. There are two general options available for you to manipulate the navigational structure:
  1. Suppress the navigation (and provide your own application navigation using Platform JavaScript navigation callbacks)
  2. Adjust the navigation (using platform JavaScript variables to turn on/off the default navigation elements).
Additionally, you can adjust the appearance of the navigation by changing one or more of the CSS attributes of the navigation. Also, you can receive notification when a user takes an action that loads a new canvas into the current container so that you can adjust your own site navigation as necessary.

Suppressing the navigation

The navigation can be suppressed by setting the auto_nav script URL parameter to false when declaring the script tag.
<script src="http://platform.fatsecret.com/js?key=XXXXX&auto_nav=false"></script>
Figure 2: Navigation turned off

Choosing which navigation elements to show

You can choose which navigation elements to show. You cannot change the names or order of the navigation elements. The fatsecret.variables.navOptions script function is used to set the navigation.
E.G.: showing only the Home and Diet Calendar in the navigation
<script>
fatsecret.variables.navOptions = fatsecret.navFeatures.home | fatsecret.navFeatures.diet_calendar;
</script>
Figure 3: Showing only Home and Diet Calendar in the navigation
The complete mapping of the navigation elements is as follows:
Home
fatsecret.navFeatures.home (1)
Food Diary
fatsecret.navFeatures.food_diary (2)
Exercise Diary
fatsecret.navFeatures.exercise_diary (4)
Diet Calendar
fatsecret.navFeatures.diet_calendar (8)
Weight History
fatsecret.navFeatures.weight_tracker (16)

Overriding the navigation style

You can adjust the CSS style of the navigation as follows:
  • The navigation is constructed using a HTML table with id fatsecret_nav.
  • Each navigation element is in a separate HTML td element.
  • The currently selected navigation element is in a class fatsecret_nav_highlight.
Armed with the HTML structure and CSS classes, you can now add your own styles to the navigation with any CSS styling.
E.G.: the style for the blue theme.
/* navigation */
#fatsecret_nav td {
border-left:1px solid #BFDBE7;
}

.fatsecret_nav_highlight {
background-color:#BFDBE7;
}
Each navigation element is styled with a blue border on the left and the selected navigation element's background is set to blue.

Setting up your own navigation

You can set up your own navigation using the fatsecret.onTabChanged script function. The fatsecret.onTabChanged function fires on every new canvas change.
E.G.: Creating our own navigation
Build the navigation structure with simple CSS styles.
<style>
#navigation {
list-style-type:none;
margin:0 0 1em 0;
}

#navigation li {
color:blue;
}

#navigation li:hover {
text-decoration:underline;
}
</style>

<ul id="navigation">
<li id="nav_1" onclick="fatsecret.setCanvas('home')">Home</li>
<li id="nav_2" onclick="fatsecret.setCanvas('food_entries.edit')">Food Diary</li>
<li id="nav_4" onclick="fatsecret.setCanvas('exercise_entries.edit')">Exercise Diary</li>
<li id="nav_8" onclick="fatsecret.setCanvas('calendar.get_month')">Diet Calendar</li>
<li id="nav_16" onclick="fatsecret.setCanvas('weights.get')">Weight History</li>
</ul>
We've created a simple unordered list with the five navigation elements and very minimal styling. The list elements behave like links which you can use to navigate. Note that the id of the navigation elements is in the format nav_<integer value of navigation element>.
Use the fatsecret.onTabChanged script function to add your own behavior to the navigation.
<script>
var currentTab = null;
fatsecret.onTabChanged = function(tab_id) {
if(currentTab) currentTab.style.fontWeight = "normal";
currentTab = document.getElementById("nav_" + tab_id);
if(currentTab) currentTab.style.fontWeight = "bold";
}
<script>
The code above finds the corresponding navigation element for the current canvas and change it's font-weight to bold. The tab_id is used to find the equivalent navigation element (remember we set their id's to nav_<integer value of navigation element>).
See the Sample Code for setting up a custom navigation.
FatSecret Sites
For Developers

For Professionals

For Everyone

FatSecret Platform API

Support
API

About FatSecret

© 2017 FatSecret. All rights reserved.