Page 1 of 1

Get Progress Bar to work based on Page active

Posted: Tue Sep 02, 2014 5:12 pm
by danjapro
We are trying to get progress bar to place active class on the current page it one based on variable being set on page called "page", also the page is written into the <body class="page"> tag, once it is loading the page.

It is not working as we need can anyone, help us with script below to set progress bar to do prev and next?????

So variable is:

Code: Select all


var page = "refundstep1";
Body Class tage looks like:

Code: Select all

<body class="refunStep 1 main-layout">

Progress bar is:

Code: Select all

<div class="tabContent progress-bar hidden-phone">
                
                  <div class="step active">
                    <h2>Step 1: Enter your Pin</h2>
                  </div>
                
                  <div class="step inactive">
                    <h2>Step 2: Tell us your address</h2>
                  </div>
                
                  <div class="step inactive">
                    <h2>Step 3: Confirm Your Details</h2>
                  </div>
                
</div>

Code to actual set the other list next as class="inactive", list passed or compelted as class="active done", Current page as class="active"

Code: Select all

var progressClass = $('.progress-bar div.step');
$(progressClass).addClass(function(index, activeClass) {
    var activeClass = 'done';
var activePage = 'active';
alert(page);
var currentPage = page;
var pageClass = $('body').hasClass(page);
console.log(pageClass);
    if(pageClass === true) {
 progressClass.addClass(activePage);
 progressClass.prevAll().addClass(activeClass);
 //To select all next elements of `.progressClass` element:
     progressClass.nextAll().addClass(nopageClass);
    }
    return nopageClass;
  });