Webform simple progress bar and pager

Public
</> CopyGet raw version
text
  1. Simple Js solution for webform 3.x (4.x has built in solution)
  2.  
  3. Source: https://dgtlmoon.com/drupal_webform_i_have_worlds_laziest_progress_bar

wform_pbar.js

</> CopyGet raw version
javascript
  1. (function ($) {
  2. Drupal.behaviors.QuestionnaireTweak = {
  3. // worlds easiest/laziest progressbar, IE9 doesnt support html5, so we cant use <progress>
  4. attach: function (context) {
  5. var total = $('[name="details[page_count]"]').val();
  6. var page_num = $('[name="details[page_num]"]').val();
  7. if (total > 1) {
  8. $('<div class="progress-bar"><span style="width: 10%"></span><div class="progress-text"></div></div>').insertAfter('#edit-actions');
  9. $('.progress-text').html(page_num+" / "+total);
  10. $('.progress-bar span').css('width',page_num/total*100+"%");
  11. }
  12. }
  13. };
  14. })(jQuery);

Write into template.php

</> CopyGet raw version
php
  1. function YOURTHEME_preprocess_node($vars) {
  2. if ($vars['type'] == 'webform') {
  3. drupal_add_js(drupal_get_path('theme', 'YOURTHEME') .'/js/wform_pbar.js');
  4. }
  5. }

Write into .scss (without css progress bar won't appear)

</> CopyGet raw version
css
  1. .progress-bar {
  2. position: relative;
  3. clear: both;
  4. width: 100%;
  5. height: 20px;
  6. background-color: #EEEEEE;
  7. font-size: 14px;
  8. line-height: 20px;
  9.  
  10. span {
  11. display: inline-block;
  12. height: 100%;
  13. background: #a2cd5a;
  14. }
  15. }
  16. .progress-text {
  17. position: absolute;
  18. top: 0;
  19. left: 5px;
  20. font-size: 14px;
  21. line-height: 20px;
  22. }