Is there a best method to achieve this with minimal CSS/JavaScript editing?
example:
Thanks.
This alternate version of the Javascript worked for me, with tabs hidden by Field Rules:
$(document).ready(function () {
//Add the progress bar upon form load
$('.cf-pagination-tabs').before('<div class="cf-pagination-progress-bar"><div class="cf-pagination-bar--title">Page 1</div><div class="cf-pagination-bar"><div class="cf-pagination-bar--completed" style="width: 25%;"></div></div><div class="cf-pagination-bar--indicator">Page 1 of 4</div></div>');
updateProgressBar();
//Any time the current page is changed, update the progress bar
$('.cf-pagination-tabs').click(updateProgressBar);
$('.cf-next-btn').click(updateProgressBar);
$('.cf-prev-btn').click(updateProgressBar);
//This function is called any time you need to update the progress bar. It uses Javascript to determine
//the current page name and position and the max number of pages, and then uses those values to update
//the progress bar.
function updateProgressBar()
{
var currentPageName = $('.active a:first').text();
var listItem = $('.active');
var hiddenItem = $('.hidden');
var currentPageNumber = parseInt($('.cf-pagination-tabs li').not(hiddenItem).index(listItem)) + 1;
var totalPages = parseInt($('.cf-pagination-tabs').find('li').not(hiddenItem).length);
var percentComplete = Math.round(parseFloat(currentPageNumber / totalPages * 100));
$('.cf-pagination-bar--title').text(currentPageName);
$('.cf-pagination-bar--indicator').text('Page ' + currentPageNumber + ' of ' + totalPages);
$('.cf-pagination-bar--completed').css('width', percentComplete + '%');
}
});
Set-up your pagination with "Navigation Tabs" and then use this Javascript to add and control the progress bar:
$(document).ready(function () {
//Add the progress bar upon form load
$('.cf-pagination-tabs').before('<div class="cf-pagination-progress-bar"><div class="cf-pagination-bar--title">Page 1</div><div class="cf-pagination-bar"><div class="cf-pagination-bar--completed" style="width: 25%;"></div></div><div class="cf-pagination-bar--indicator">Page 1 of 4</div></div>');
updateProgressBar();
//Any time the current page is changed, update the progress bar
$('.cf-pagination-tabs').click(updateProgressBar);
$('.cf-next-btn').click(updateProgressBar);
$('.cf-prev-btn').click(updateProgressBar);
//This function is called any time you need to update the progress bar. It uses Javascript to determine
//the current page name and position and the max number of pages, and then uses those values to update
//the progress bar.
function updateProgressBar()
{
var currentPageName = $('.active a:first').text();
var listItem = $('.active');
var currentPageNumber = parseInt($('.cf-pagination-tabs li').index(listItem)) + 1;
var totalPages = parseInt($('.cf-pagination-tabs').find('li').length);
var percentComplete = Math.round(parseFloat(currentPageNumber / totalPages * 100));
$('.cf-pagination-bar--title').text(currentPageName);
$('.cf-pagination-bar--indicator').text('Page ' + currentPageNumber + ' of ' + totalPages);
$('.cf-pagination-bar--completed').css('width', percentComplete + '%');
}
});
Also, please consider editing your original post and changing it from a discussion to a question, so that you can mark the answer once complete.
Matthew,
Thank you for the code and its working as expected. My only follow up would be on how to deal with hidden tabs? Here is what I am seeing with a tab hidden.
Thanks again.
Didn't even think about hidden tabs. I'll take a look...
This alternate version of the Javascript worked for me, with tabs hidden by Field Rules:
$(document).ready(function () {
//Add the progress bar upon form load
$('.cf-pagination-tabs').before('<div class="cf-pagination-progress-bar"><div class="cf-pagination-bar--title">Page 1</div><div class="cf-pagination-bar"><div class="cf-pagination-bar--completed" style="width: 25%;"></div></div><div class="cf-pagination-bar--indicator">Page 1 of 4</div></div>');
updateProgressBar();
//Any time the current page is changed, update the progress bar
$('.cf-pagination-tabs').click(updateProgressBar);
$('.cf-next-btn').click(updateProgressBar);
$('.cf-prev-btn').click(updateProgressBar);
//This function is called any time you need to update the progress bar. It uses Javascript to determine
//the current page name and position and the max number of pages, and then uses those values to update
//the progress bar.
function updateProgressBar()
{
var currentPageName = $('.active a:first').text();
var listItem = $('.active');
var hiddenItem = $('.hidden');
var currentPageNumber = parseInt($('.cf-pagination-tabs li').not(hiddenItem).index(listItem)) + 1;
var totalPages = parseInt($('.cf-pagination-tabs').find('li').not(hiddenItem).length);
var percentComplete = Math.round(parseFloat(currentPageNumber / totalPages * 100));
$('.cf-pagination-bar--title').text(currentPageName);
$('.cf-pagination-bar--indicator').text('Page ' + currentPageNumber + ' of ' + totalPages);
$('.cf-pagination-bar--completed').css('width', percentComplete + '%');
}
});
Thanks again Matthew, this works beautifully.