MP Progress Bar Indicator - JS Iteration
Show visitors how many unique pages they've visited on a site with a progress bar. This is a helpful way to visually inform visitors how much of the site content is yet to be viewed. The indicator keeps track of pages with client-side cookie to update a page when it loads with the current progress.
JavaScript
To store and check the current page with an array saved in the cookie, the returnDocumentName function parses the page URL by looking for the last slash and removing the file extension. The code example works with three character extensions, such as PHP and HTM.
function returnDocumentName() {
var url = location.pathname;
var pname = url.lastIndexOf("/") + 1;
var psub = url.substr(pname);
var pageName = psub.slice(psub, psub.length - 4);
return pageName;
}
Next up, three functions work together to set, retrieve, and process cookie data. The checkCookie function sets the number pages to look for and begins to work with the cookie data if present, and a new cookie is generated when the value is not found to being the process. Page names are stored in an array for later retrieval. From here, the function counts how many page names are stored in the cookie and returns a percentage based on how many pages are configured.
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" +
exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {return unescape(y);}
}
}
function checkCookie() {
var pagesVisited = 0;
var thisPage = returnDocumentName();
var cookieName = getCookie("mpvisit");
var sitePages = 100;
var visitPercent = 0;
if (cookieName != null && cookieName != "") {
var newCookie = getCookie("mpvisit") + thisPage;
var oldCookie = cookieName;
var cookieValues = cookieName.split(":");
if (valueCheck(cookieValues, thisPage)) {
newCookie = oldCookie;
pagesVisited = cookieValues.length;
} else {
newCookie = oldCookie + ":" + thisPage;
pagesVisited = cookieValues.length;
setCookie("mpvisit", newCookie, 365);
}
} else {
cookieName = thisPage;
if (cookieName != null && cookieName != "") {
setCookie("mpvisit", cookieName, 365);
}
}
visitPercent = Math.round((pagesVisited / sitePages) * 100);
return visitPercent;
}
checkCookie();
In the valueCheck function, also called by the checkCookie function, we loop through the stored cookie array and return true if any of the values match the current page name.
function valueCheck(thisArray, thisValue) {
var i = thisArray.length;
while (i--) {
if (thisArray[i] === thisValue) return true;
}
return false;
}
HTML
Displaying the progress bar on a web page populates two <div> elements, one with a graphical CSS progress bar, and the other providing a numeric percentage value. Progress bar width is determined by multiplying a constant by the returned percentage, where the constant is determined by dividing the desired container width by 100px.
<div class="progressWrap">
<div id="VisitProgress"></div>
<div id="VisitInfo"></div>
<script type="text/javascript">
var pVal = checkCookie();
var barWidth = (pVal*1.5)
document.getElementById("VisitProgress").innerHTML='
<div id="VisitProgress"
style=\"width:'+barWidth+'px;background-color:#090;
height:15px;\"> </div>';
document.getElementById("VisitInfo").innerHTML='
You have visited '+pVal+'% of this website.';
</script>
</div>
Download source code - mpvp.js
Live page - (archived)
†