Javascript jsNav

Control Opening/Closing Dynamic Content Display Area: [ Close ] [ Open / Reopen ]
Dynamically Generated Navigation: ...none yet...
Dynamic Content Display Area:

...none yet...

Example Links Which Add Data To Be Tracked (click on a few and then change scenarios below):
Data Link #1 || Data Link #2 || Data Link #3 || Data Link #4 || Data Link #5 || Data Link #6 || Data Link #7 || Data Link #8

Scenario #1:

Generate text-based navigation links when a link under "Example Links Which Add Data To Be Tracked" is clicked on
If the dynamic content display area is closed via "[ Close ]", hide the dynamic content display area but keep the navigation cache

<html>
<head>
<script language="javascript" type="text/javascript" src="jsNav.js"></script>
<script language="javascript" type="text/javascript">
/* Set Script For This Scenario */

navRetain = "normal";	/* How to cache data. right = retain cache history after user's current position as static, left = retain cache history before user's current position as static, normal = retain cache history based on activity sequentially (the traditional way) */
navLinkType = "text";	/* Type of cache history linking to use (text, button, image) */
navCloseLevel = "none";	/* Close button level of closing ability. single = close actively viewed cache data when clicked and load next cache data available but keep viewing area visible, all = close all cache data and remove from cache history and close viewing area, none = retain cache history but close the viewing area */
navMax = 5;	/* Number of cache links/blocks to maintain */
navTitleChars = 6;	/* Maximum number of characters per cache history link */
navTxtDivider = " / ";	/* Divider between text cache links */
navTitleTrailChars = "...";	/* Trailing character(s) to append to linkable text navigation titles */
navInsName = "navLinks";	/* ID of the element that cache history links (textual or otherwise) are inserted into which is on the page */
navInsData = "content";	/* ID of the element that cache history data is inserted into */
navPaneActiveClass = "navLinkActive";	/* CSS class to reference indicating the cache block currently being viewed */
navPaneOverClass = "navLinkOver";	/* CSS class to use when the mouse travels over a cache link - mouseover */
navPaneDefClass = "navLinkDef";	/* CSS class to use when the mouse travels off a cache link - mouseout */

</script>
<style type="text/css">
.navLinkActive { font-family: verdana; font-size: 8pt; color: blue; font-weight: normal; }
.navLinkOver { font-family: verdana; font-size: 8pt; color: red; font-weight: bold; }
.navLinkDef { font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnBack { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnForward { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
</style>
</head>
<body>
<span onmousedown="javascript:navClose();">[ Close ]</span> <span onmousedown="javascript:navStateRestore();">[ Open / Reopen ]</span><br />
<strong>Dynamic Navigation:</strong> <span id="navLinks">...none yet...</span><br />
<strong>Dynamic Content Display Area:</strong><br />
<div id="content" style="border-style: solid; border-width: 1px; border-color: green; font-family: verdana; font-size: 8pt; color: black; font-weight: normal;">...none yet...</div>
<br />
<span onmousedown="javascript:navTrack('Link 1', 'Link 1 Description');">Data Link #1</span>
<span onmousedown="javascript:navTrack('Link 2', 'Link 2 Description');">Data Link #2</span>
<span onmousedown="javascript:navTrack('Link 3', 'Link 3 Description');">Data Link #3</span>
</body>
</html>

(NOTE: After clicking the button, interact with the data links, dynamically generated navigation and open/close buttons.)

Scenario #2:

Generate text-based navigation links when a link under "Example Links Which Add Data To Be Tracked" is clicked on
If the dynamic content display area is closed via "[ Close ]", load previous data in cache (do not close display area unless there is no cache)

<html>
<head>
<script language="javascript" type="text/javascript" src="jsNav.js"></script>
<script language="javascript" type="text/javascript">
/* Set Script For This Scenario */

navRetain = "normal";	/* How to cache data. right = retain cache history after user's current position as static, left = retain cache history before user's current position as static, normal = retain cache history based on activity sequentially (the traditional way) */
navLinkType = "text";	/* Type of cache history linking to use (text, button, image) */
navCloseLevel = "single";	/* Close button level of closing ability. single = close actively viewed cache data when clicked and load next cache data available but keep viewing area visible, all = close all cache data and remove from cache history and close viewing area, none = retain cache history but close the viewing area */
navMax = 5;	/* Number of cache links/blocks to maintain */
navTitleChars = 6;	/* Maximum number of characters per cache history link */
navTxtDivider = " / ";	/* Divider between text cache links */
navTitleTrailChars = "...";	/* Trailing character(s) to append to linkable text navigation titles */
navInsName = "navLinks";	/* ID of the element that cache history links (textual or otherwise) are inserted into which is on the page */
navInsData = "content";	/* ID of the element that cache history data is inserted into */
navPaneActiveClass = "navLinkActive";	/* CSS class to reference indicating the cache block currently being viewed */
navPaneOverClass = "navLinkOver";	/* CSS class to use when the mouse travels over a cache link - mouseover */
navPaneDefClass = "navLinkDef";	/* CSS class to use when the mouse travels off a cache link - mouseout */

</script>
<style type="text/css">
.navLinkActive { font-family: verdana; font-size: 8pt; color: blue; font-weight: normal; }
.navLinkOver { font-family: verdana; font-size: 8pt; color: red; font-weight: bold; }
.navLinkDef { font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnBack { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnForward { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
</style>
</head>
<body>
<span onmousedown="javascript:navClose();">[ Close ]</span> <span onmousedown="javascript:navStateRestore();">[ Open / Reopen ]</span><br />
<strong>Dynamic Navigation:</strong> <span id="navLinks">...none yet...</span><br />
<strong>Dynamic Content Display Area:</strong><br />
<div id="content" style="border-style: solid; border-width: 1px; border-color: green; font-family: verdana; font-size: 8pt; color: black; font-weight: normal;">...none yet...</div>
<br />
<span onmousedown="javascript:navTrack('Link 1', 'Link 1 Description');">Data Link #1</span>
<span onmousedown="javascript:navTrack('Link 2', 'Link 2 Description');">Data Link #2</span>
<span onmousedown="javascript:navTrack('Link 3', 'Link 3 Description');">Data Link #3</span>
</body>
</html>

(NOTE: After clicking the button, interact with the data links, dynamically generated navigation and open/close buttons.)

Scenario #3:

Generate text-based navigation links when a link under "Example Links Which Add Data To Be Tracked" is clicked on
If the dynamic content display area is closed via "[ Close ]", clear the cache and close the dynamic content display area

<html>
<head>
<script language="javascript" type="text/javascript" src="jsNav.js"></script>
<script language="javascript" type="text/javascript">
/* Set Script For This Scenario */

navRetain = "normal";	/* How to cache data. right = retain cache history after user's current position as static, left = retain cache history before user's current position as static, normal = retain cache history based on activity sequentially (the traditional way) */
navLinkType = "text";	/* Type of cache history linking to use (text, button, image) */
navCloseLevel = "all";	/* Close button level of closing ability. single = close actively viewed cache data when clicked and load next cache data available but keep viewing area visible, all = close all cache data and remove from cache history and close viewing area, none = retain cache history but close the viewing area */
navMax = 5;	/* Number of cache links/blocks to maintain */
navTitleChars = 6;	/* Maximum number of characters per cache history link */
navTxtDivider = " / ";	/* Divider between text cache links */
navTitleTrailChars = "...";	/* Trailing character(s) to append to linkable text navigation titles */
navInsName = "navLinks";	/* ID of the element that cache history links (textual or otherwise) are inserted into which is on the page */
navInsData = "content";	/* ID of the element that cache history data is inserted into */
navPaneActiveClass = "navLinkActive";	/* CSS class to reference indicating the cache block currently being viewed */
navPaneOverClass = "navLinkOver";	/* CSS class to use when the mouse travels over a cache link - mouseover */
navPaneDefClass = "navLinkDef";	/* CSS class to use when the mouse travels off a cache link - mouseout */

</script>
<style type="text/css">
.navLinkActive { font-family: verdana; font-size: 8pt; color: blue; font-weight: normal; }
.navLinkOver { font-family: verdana; font-size: 8pt; color: red; font-weight: bold; }
.navLinkDef { font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnBack { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnForward { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
</style>
</head>
<body>
<span onmousedown="javascript:navClose();">[ Close ]</span> <span onmousedown="javascript:navStateRestore();">[ Open / Reopen ]</span><br />
<strong>Dynamic Navigation:</strong> <span id="navLinks">...none yet...</span><br />
<strong>Dynamic Content Display Area:</strong><br />
<div id="content" style="border-style: solid; border-width: 1px; border-color: green; font-family: verdana; font-size: 8pt; color: black; font-weight: normal;">...none yet...</div>
<br />
<span onmousedown="javascript:navTrack('Link 1', 'Link 1 Description');">Data Link #1</span>
<span onmousedown="javascript:navTrack('Link 2', 'Link 2 Description');">Data Link #2</span>
<span onmousedown="javascript:navTrack('Link 3', 'Link 3 Description');">Data Link #3</span>
</body>
</html>

(NOTE: After clicking the button, interact with the data links, dynamically generated navigation and open/close buttons.)

Scenario #4:

Generate text-based navigation links when a link under "Example Links Which Add Data To Be Tracked" is clicked on
If a link is clicked on in the middle of the "Dynamically Generated Navigation" (for example, there are three links and the second link is clicked on), then if the user clicks on a link under "Example Links Which Add Data To Be Tracked", that link is added in that position and the cache history is retained after the user's current position
If the dynamic content display area is closed via "[ Close ]", hide the dynamic content display area but keep the navigation cache

<html>
<head>
<script language="javascript" type="text/javascript" src="jsNav.js"></script>
<script language="javascript" type="text/javascript">
/* Set Script For This Scenario */

navRetain = "right";	/* How to cache data. right = retain cache history after user's current position as static, left = retain cache history before user's current position as static, normal = retain cache history based on activity sequentially (the traditional way) */
navLinkType = "text";	/* Type of cache history linking to use (text, button, image) */
navCloseLevel = "none";	/* Close button level of closing ability. single = close actively viewed cache data when clicked and load next cache data available but keep viewing area visible, all = close all cache data and remove from cache history and close viewing area, none = retain cache history but close the viewing area */
navMax = 3;	/* Number of cache links/blocks to maintain */
navTitleChars = 6;	/* Maximum number of characters per cache history link */
navTxtDivider = " / ";	/* Divider between text cache links */
navTitleTrailChars = "...";	/* Trailing character(s) to append to linkable text navigation titles */
navInsName = "navLinks";	/* ID of the element that cache history links (textual or otherwise) are inserted into which is on the page */
navInsData = "content";	/* ID of the element that cache history data is inserted into */
navPaneActiveClass = "navLinkActive";	/* CSS class to reference indicating the cache block currently being viewed */
navPaneOverClass = "navLinkOver";	/* CSS class to use when the mouse travels over a cache link - mouseover */
navPaneDefClass = "navLinkDef";	/* CSS class to use when the mouse travels off a cache link - mouseout */

</script>
<style type="text/css">
.navLinkActive { font-family: verdana; font-size: 8pt; color: blue; font-weight: normal; }
.navLinkOver { font-family: verdana; font-size: 8pt; color: red; font-weight: bold; }
.navLinkDef { font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnBack { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnForward { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
</style>
</head>
<body>
<span onmousedown="javascript:navClose();">[ Close ]</span> <span onmousedown="javascript:navStateRestore();">[ Open / Reopen ]</span><br />
<strong>Dynamic Navigation:</strong> <span id="navLinks">...none yet...</span><br />
<strong>Dynamic Content Display Area:</strong><br />
<div id="content" style="border-style: solid; border-width: 1px; border-color: green; font-family: verdana; font-size: 8pt; color: black; font-weight: normal;">...none yet...</div>
<br />
<span onmousedown="javascript:navTrack('Link 1', 'Link 1 Description');">Data Link #1</span>
<span onmousedown="javascript:navTrack('Link 2', 'Link 2 Description');">Data Link #2</span>
<span onmousedown="javascript:navTrack('Link 3', 'Link 3 Description');">Data Link #3</span>
</body>
</html>

(NOTE: After clicking the button, interact with the data links, dynamically generated navigation and open/close buttons.)

Scenario #5:

Generate text-based navigation links when a link under "Example Links Which Add Data To Be Tracked" is clicked on
If a link is clicked on in the middle of the "Dynamically Generated Navigation" (for example, there are three links and the second link is clicked on), then if the user clicks on a link under "Example Links Which Add Data To Be Tracked", that link is added in that position and the cache history is retained before the user's current position
If the dynamic content display area is closed via "[ Close ]", hide the dynamic content display area but keep the navigation cache

<html>
<head>
<script language="javascript" type="text/javascript" src="jsNav.js"></script>
<script language="javascript" type="text/javascript">
/* Set Script For This Scenario */

navRetain = "left";	/* How to cache data. right = retain cache history after user's current position as static, left = retain cache history before user's current position as static, normal = retain cache history based on activity sequentially (the traditional way) */
navLinkType = "text";	/* Type of cache history linking to use (text, button, image) */
navCloseLevel = "none";	/* Close button level of closing ability. single = close actively viewed cache data when clicked and load next cache data available but keep viewing area visible, all = close all cache data and remove from cache history and close viewing area, none = retain cache history but close the viewing area */
navMax = 3;	/* Number of cache links/blocks to maintain */
navTitleChars = 6;	/* Maximum number of characters per cache history link */
navTxtDivider = " / ";	/* Divider between text cache links */
navTitleTrailChars = "...";	/* Trailing character(s) to append to linkable text navigation titles */
navInsName = "navLinks";	/* ID of the element that cache history links (textual or otherwise) are inserted into which is on the page */
navInsData = "content";	/* ID of the element that cache history data is inserted into */
navPaneActiveClass = "navLinkActive";	/* CSS class to reference indicating the cache block currently being viewed */
navPaneOverClass = "navLinkOver";	/* CSS class to use when the mouse travels over a cache link - mouseover */
navPaneDefClass = "navLinkDef";	/* CSS class to use when the mouse travels off a cache link - mouseout */

</script>
<style type="text/css">
.navLinkActive { font-family: verdana; font-size: 8pt; color: blue; font-weight: normal; }
.navLinkOver { font-family: verdana; font-size: 8pt; color: red; font-weight: bold; }
.navLinkDef { font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnBack { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnForward { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
</style>
</head>
<body>
<span onmousedown="javascript:navClose();">[ Close ]</span> <span onmousedown="javascript:navStateRestore();">[ Open / Reopen ]</span><br />
<strong>Dynamic Navigation:</strong> <span id="navLinks">...none yet...</span><br />
<strong>Dynamic Content Display Area:</strong><br />
<div id="content" style="border-style: solid; border-width: 1px; border-color: green; font-family: verdana; font-size: 8pt; color: black; font-weight: normal;">...none yet...</div>
<br />
<span onmousedown="javascript:navTrack('Link 1', 'Link 1 Description');">Data Link #1</span>
<span onmousedown="javascript:navTrack('Link 2', 'Link 2 Description');">Data Link #2</span>
<span onmousedown="javascript:navTrack('Link 3', 'Link 3 Description');">Data Link #3</span>
</body>
</html>

(NOTE: After clicking the button, interact with the data links, dynamically generated navigation and open/close buttons.)

Scenario #6:

Generate back/forward CSS buttons appropriately as links under "Example Links Which Add Data To Be Tracked" are clicked on and the back / forward buttons are used (which changes the user's position in the cache)
If the dynamic content display area is closed via "[ Close ]", hide the dynamic content display area but keep the navigation cache

<html>
<head>
<script language="javascript" type="text/javascript" src="jsNav.js"></script>
<script language="javascript" type="text/javascript">
/* Set Script For This Scenario */

navRetain = "normal";	/* How to cache data. right = retain cache history after user's current position as static, left = retain cache history before user's current position as static, normal = retain cache history based on activity sequentially (the traditional way) */
navLinkType = "button";	/* Type of cache history linking to use (text, button, image) */
navCloseLevel = "none";	/* Close button level of closing ability. single = close actively viewed cache data when clicked and load next cache data available but keep viewing area visible, all = close all cache data and remove from cache history and close viewing area, none = retain cache history but close the viewing area */
navBtnBackLabel = "<<";	/* Visible text for the back button */
navBtnForwardLabel = ">>";	/* Visible text for the forward button */
navBtnSpacer = " ";	/* Spacing between the back and forward buttons; could use html tags here if needed */
navBtnBackClass = "navBtnBack";	/* CSS class for the back button */
navBtnForwardClass = "navBtnForward";	/* CSS class for the forward button */
navMax = 5;	/* Number of cache links/blocks to maintain */
navInsName = "navLinks";	/* ID of the element that cache history links (textual or otherwise) are inserted into which is on the page */
navInsData = "content";	/* ID of the element that cache history data is inserted into */

</script>
<style type="text/css">
.navLinkActive { font-family: verdana; font-size: 8pt; color: blue; font-weight: normal; }
.navLinkOver { font-family: verdana; font-size: 8pt; color: red; font-weight: bold; }
.navLinkDef { font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnBack { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnForward { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
</style>
</head>
<body>
<span onmousedown="javascript:navClose();">[ Close ]</span> <span onmousedown="javascript:navStateRestore();">[ Open / Reopen ]</span><br />
<strong>Dynamic Navigation:</strong> <span id="navLinks">...none yet...</span><br />
<strong>Dynamic Content Display Area:</strong><br />
<div id="content" style="border-style: solid; border-width: 1px; border-color: green; font-family: verdana; font-size: 8pt; color: black; font-weight: normal;">...none yet...</div>
<br />
<span onmousedown="javascript:navTrack('Link 1', 'Link 1 Description');">Data Link #1</span>
<span onmousedown="javascript:navTrack('Link 2', 'Link 2 Description');">Data Link #2</span>
<span onmousedown="javascript:navTrack('Link 3', 'Link 3 Description');">Data Link #3</span>
</body>
</html>

(NOTE: After clicking the button, interact with the data links, dynamically generated navigation and open/close buttons.)

Scenario #7:

Generate back/forward image buttons appropriately as links under "Example Links Which Add Data To Be Tracked" are clicked on and the back / forward buttons are used (which changes the user's position in the cache)
If the dynamic content display area is closed via "[ Close ]", hide the dynamic content display area but keep the navigation cache

<html>
<head>
<script language="javascript" type="text/javascript" src="jsNav.js"></script>
<script language="javascript" type="text/javascript">
/* Set Script For This Scenario */

navRetain = "normal";	/* How to cache data. right = retain cache history after user's current position as static, left = retain cache history before user's current position as static, normal = retain cache history based on activity sequentially (the traditional way) */
navLinkType = "image";	/* Type of cache history linking to use (text, button, image) */
navCloseLevel = "none";	/* Close button level of closing ability. single = close actively viewed cache data when clicked and load next cache data available but keep viewing area visible, all = close all cache data and remove from cache history and close viewing area, none = retain cache history but close the viewing area */
navBtnBackImg = "back.gif";	/* Path to image to use as the back button graphic */
navBtnForwardImg = "forward.gif";	/* Path to image to use as the forward button graphic */
navMax = 5;	/* Number of cache links/blocks to maintain */
navInsName = "navLinks";	/* ID of the element that cache history links (textual or otherwise) are inserted into which is on the page */
navInsData = "content";	/* ID of the element that cache history data is inserted into */

</script>
<style type="text/css">
.navLinkActive { font-family: verdana; font-size: 8pt; color: blue; font-weight: normal; }
.navLinkOver { font-family: verdana; font-size: 8pt; color: red; font-weight: bold; }
.navLinkDef { font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnBack { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
.navBtnForward { border-style: solid; border-width: 1px; border-color: black; font-family: verdana; font-size: 8pt; color: black; font-weight: normal; }
</style>
</head>
<body>
<span onmousedown="javascript:navClose();">[ Close ]</span> <span onmousedown="javascript:navStateRestore();">[ Open / Reopen ]</span><br />
<strong>Dynamic Navigation:</strong> <span id="navLinks">...none yet...</span><br />
<strong>Dynamic Content Display Area:</strong><br />
<div id="content" style="border-style: solid; border-width: 1px; border-color: green; font-family: verdana; font-size: 8pt; color: black; font-weight: normal;">...none yet...</div>
<br />
<span onmousedown="javascript:navTrack('Link 1', 'Link 1 Description');">Data Link #1</span>
<span onmousedown="javascript:navTrack('Link 2', 'Link 2 Description');">Data Link #2</span>
<span onmousedown="javascript:navTrack('Link 3', 'Link 3 Description');">Data Link #3</span>
</body>
</html>

(NOTE: After clicking the button, interact with the data links, dynamically generated navigation and open/close buttons.)

NOTES:
You will notice that there are a series of links which add data to the dynamic navigation cache such as the one shown below:
<span onmousedown="javascript:navTrack('Link 1', 'Link 1 Description');">Data Link #1</span>
In this particular example, you can see that the title (Link 1) and content (Link 1 Description) is pre-defined. So, how would you grab dynamically generated content and place it into the navigation cache? Basically you would write your own function to grab that data and then pass it to the navTrack() function. Please see below for an example (onmousedown is used here for simplicity although you could have a function which grabs the content after it loads in the <div></div> region after an AJAX call, etc):

<script language="javascript" type="text/javascript">
<!--
function myFunction() {
/* Pass my dynamic data so it can be cached */
navTrack(document.getElementById("myTitle").innerHTML, document.getElementById("myContent").innerHTML);
}
//-->
</script>
<div id="myTitle">The title of this dynamically generated content</div>
<div id="myContent">Dynamically generated content with or without HTML code.</div>
<span onmousedown="javascript:myFunction();">Save The Dynamic Content Into Cache</span>

NOTE: You can download the script from the main javascript page.