top of page

Story Navigation Script

This page describes how to manage the button navigation for story content pages

Button Navigation

The navigaion between story content pages is managed by a javascript which renders a button menu when the web page loads. The javascript contains a list which identifies each button using the following form:


Button ID

Button Title Display



"] = "


Button URL




Adding Buttons

In the button format graphic above the gray items are required text that must not be modified. The yellow items are user modifiable text. When adding buttons be careful to keep each line intact and addhear to changing only the user editable items: 

  • add items by duplicating line "krxGoArray["krxId#"] = "display|page";"

  • where the "#" following krxId is a number to make the buttons id unique 

    • each button must have a unique id krxId is a variable name unique to this script

    • the unique # makes the button unique to this button list

  • where "display" is the text to display on the button

    • use letters and numbers only

  • where "|" is a delimiter and can not appear in display or page values

  • where "page" is the URL to navigate to

    • get page url from page menu

    • typically formed like "/#!name/code" ie: "/#!podiatry/c174h"

  • buttons are drawn in the position they appear

    • moving a button up or down a line will move it up or down in the display


Choosing a Button Title

It is a good idea to make the page title and the button title the same. This will help you keep the buttons and pages organized. The page and button title should also be as simple and brief as possible to help with page display and keep URLs short.


Button Styles

The buttons have the following styles:

  • default: this is the blue color.

  • hover: this is dark gray with yellow text style when a user moves the cursor over the button

  • active: this is the light gray button that indicates the page that is being displayed.


Setting the Active Button 

To set the active button you need to add a button id into the active button setting in the javascript. 

Button ID

var krxNavActive = "



Similar to the button list, the text in the gray boxes must not be changed, to set the active button you simple modify the text identified by the yellow boxes. Setting this variable tells the script which button to change to the active style when the page loads. 


Setting all Buttons to Default 

To set all buttons to the default style simply leave the active button setting blank:  var krxNavActive = "";


Turning Off/Hiding a Button 

Buttons can be turned off so they will not be displayed when the page loads by commenting the line for that button in the script. To comment a line add two forward-slashes  "//" infront of the button to be hidden. In the following example the second and third buttons will not be drawn by the script and will not appear on the page, while the first and fourth button will be drawn:


     krxGoArray["krxIdA"] = "What is Compounding?|/#!what-is-compounding/c2h5";

     //krxGoArray["krxIdB"] = "Pediatrics|/#!pediatrics/c1czg";

     //krxGoArray["krxIdC"] = "Veterinary Compounding|/#!veterinary-coumpounding/c5gs";

     krxGoArray["krxIdD"] = "Sports Medicine|/#!sports-medicine/cx50";



iFrame Editing

The button script is part of an iFrame, an HTML element, which holds the buttons drawn by the script when the page loads. To show the iFrame settings:

  • select the buttons iFrame

  • in the HTML pallette that opens, select the settings option

  • an HTML settings pallette will open and you will see

    • the mode set to HTML code

    • the javascript that is embedded in the HTML

    • an update button below the javascript embed

    • and the reset code option is selected

    • there are no animation setting used for the button iFrames


Modify Script in the iFrame

If you are doing something simple like changing the ID of the active button or commenting/uncommenting a button then you can probably make the edits right in the HTML Settings pallette. If you are going to do a more elaborate edit, like adding new buttons then you might want to:

  • click into the code field in the html settings pallette and select all and then copy the code

  • paste the copied code into a plain text editor (like TextPad on the PD or TextEdit on the Mac)

  • make the edits you need to make

  • select all the code in the plain text editor and copy

  • return to the html setting pallette select the code there, delete it, then paste the newly edited code back in.

  • click the update button

  • you will see the button iFrame reload

    • if the iFrame does not properly reload you have broken the script. check the script in your text editor to be sure you

      • have copied the whole script from the html pallette

      • have not made any errors

      • have selected pasted the entire
        script back into the html pallette

    • if the iFrame reloads properly you should select the save button from the wix tool bar and then the preview button; once the page previews test the buttons to be sure they display and work as you expect.

Button iFrame

HTML Settings Pallette

HTML Pallette

Updating All iFrames After Adding or Hiding a Button

Currently each story content page has a copy of the button code. This means that if you want to hide a button on the content pages you will need to open each page and comment that line in the code for each button iFrame. Similarly if you add a new page and button to the content pages you will need to add that new button to each button iFrame.


Updating all the iFrames can be tedious so be extra careful to follow the process above. If you are careful the most efficient way to do this is to:

  • add your change to just one content page button iFrame,

  • test the change to be sure it is working properly and that your change has not broken the script

  • complete the test on your desktop browser and on a mobile browser like an iPad or smartPhone

  • add the modification to the default script below (so you have it should you break the code at a later date)

  • then copy only the line(s) you changed into each of the remaining button iFrames, testing each time you update the iFrame


Navigation Javascirpt

The javascript below is what drives the creation and operation of the button navigation. Do not edit this version of the script. Use this version of the script as an original source copy. 



<script type="text/javascript">


copyright Thomas Slomka 2014 all rights reserved

written by Thomas Slomka - for use by Kenmore RX Center Pharmacy



// Copy this script into the html object and select update

// Copy into each html object that uses the script



//identify id of button for current page

var krxNavActive = "krxIdA";


//add page destinations here

var krxGoArray = {};


A) add items by duplicating line "krxGoArray["krxId#"] = "display|page";" below

where the "#" following krxId is a number to make the buttons id unique 

- each button must have a unique id krxId is a variable name unique to this script

- the unique # makes the button unique to this button list

where "display" is the text to display on the button

- use letters and numbers only

where "|" is a delimiter and can not appear in display or page values

where "page" is the URL to navigate to

- get page url from page menu

- typically formed like "/#!name/code" ie: "/#!podiatry/c174h"

B) buttons are drawn in the position they appear

- moving a button up or down a line will move it up or down in the display



//button code template

//krxGoArray["xx"] = "xx|/#!xx";


krxGoArray["krxIdA"] = "What is Compounding?|/#!what-is-compounding/c2h5";

krxGoArray["krxIdB"] = "Pediatrics|/#!pediatrics/c1czg";

krxGoArray["krxIdC"] = "Veterinary Compounding|/#!veterinary-coumpounding/c5gs";

krxGoArray["krxIdD"] = "Sports Medicine|/#!sports-medicine/cx50";


krxGoArray["krxIdE"] = "Adrenal-Thyroid|/#!adrenalthyroid/c1swb";

krxGoArray["krxIdF"] = "Andropause - Hormone Therapy for Men|/#!hormone-therapy-for-men/cfwc";

krxGoArray["krxIdG"] = "Hormone Replacement Therapy for Women|/#!hormone-therapy-for-women/cgq6";


krxGoArray["krxIdH"] = "Dentistry|/#!dentistry/cxe3";

krxGoArray["krxIdI"] = "Podiatry|/#!podiatry/c174h";

krxGoArray["krxIdJ"] = "Dermatology|/#!dermatology/c1k6o";


krxGoArray["krxIdK"] = "Wound Care|/#!wound-care/cyk7";

krxGoArray["krxIdL"] = "Pain Management|/#!pain-management/ckdf";

krxGoArray["krxIdM"] = "Palliative Care|/#!PalliativeCare/c1aup";

krxGoArray["krxIdN"] = "Chronic Fatigue/Fibromyalgia|/#!chronic-fatigue-fibromyalgia/c1708";






 !!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!! 


 !!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!! 




set font size

- target small screen (narrow column use)

- where krxWidth value = pixel width to change font size

- where krxSmlFnt and krxLrgFnt are the small and large font size in em

- do not add "em" value is used in a calculation


var krxSmlFnt = "0.4";

var krxLrgFnt = "0.6";

var krxWidth = "140px";


//detect Window width

var krxWdWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;


//call write buttons



//write buttons

function krxDrawButtons(){

document.write('<div id="krxMenu">');

for(key in krxGoArray){


var krxI = krxGoArray[key].split("|");

document.write('<div id="'+key+'" onmouseover="krxOver(\''+key+'\');" onmouseout="krxOut(\''+key+'\');" onmouseup="krxUp(\''+key+'\');"><p id="krx'+key+'">'+krxI[0]+'</p></div>');





//style buttons

for(krxKey in krxGoArray){


document.getElementById(krxKey).style.width = "95%";

if(krxWdWidth < krxWidth){

document.getElementById(krxKey).style.height = Number(0.75+krxSmlFnt)+"em";

document.getElementById('krx'+krxKey).style.height = Number(0.25+krxSmlFnt)+"em";


document.getElementById(krxKey).style.height = Number(0.75+krxLrgFnt)+"em";

document.getElementById('krx'+krxKey).style.height = Number(0.25+krxLrgFnt)+"em";


if(krxNavActive == krxKey){

document.getElementById(krxKey).style.background = "#A2ABB3";


document.getElementById(krxKey).style.background = "#5483C4";


document.getElementById(krxKey).style.borderRadius = "5px";

document.getElementById(krxKey).style.margin = "0px";

document.getElementById('krx'+krxKey).style.margin = "2px 5px 2px 5px";

document.getElementById(krxKey).style.padding = "0px";

document.getElementById('krx'+krxKey).style.padding = "5px 5px 2px 5px";

document.getElementById(krxKey).style.fontFamily ="Din Next,arial,serif";

document.getElementById('krx'+krxKey).style.fontFamily ="Din Next,arial,serif";

if(krxWdWidth < krxWidth){

document.getElementById(krxKey).style.fontSize= Number(krxSmlFnt)+"em";


document.getElementById(krxKey).style.fontSize= Number(krxLrgFnt)+"em";




document.getElementById(krxKey).style.color = "#ffffff";

document.getElementById(krxKey).style.textAlign = "center";






//react to interactions

function krxUp(krxId){

var krxI = krxGoArray[krxId].split("|");

var krxNewWin = ""+krxI[1];


//parent.location.href = krxNewWin;,'_parent');


function krxOver(krxOverId){

if(krxNavActive != krxOverId){





function krxOut(krxOutId){

if(krxNavActive == krxOutId){

document.getElementById(krxOutId).style.background = "#A2ABB3";


document.getElementById(krxOutId).style.background = "#5483C4";





bottom of page