CMS Development

yjadlaoui
Contributor

Progress bar html code

Hey there, the blog html's template don't accept the drag & drop modules , can someone please give me the "progress bar" html code please 🙂 

thank you. 

0 Upvotes
09112
Member

Progress bar html code

Hi, I tried as well and nothing is changed, is there something else to do than creating the module and add it in the template?

 

Thank you

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Progress bar html code

Hi @yjadlaoui ,

Try the below code:

<!-- HTML -->

<div class="progress-wrap progress" data-progress-percent="25">

  <div class="progress-bar progress"></div>

</div>

 

<!-- CSS -->

.progress {

width: 100%;

height: 50px;

}

 .progress-wrap {

background: #f80;

margin: 20px 0;

overflow: hidden;

position: relative;

}

 .progress-wrap .progress-bar {

background: #ddd;

left: 0;

position: absolute;

top: 0;

}

 

<!-- JavaScript -->

// on page load...

moveProgressBar();

// on browser resize...

$(window).resize(function() {

    moveProgressBar();

});

 

// SIGNATURE PROGRESS

function moveProgressBar() {

  console.log("moveProgressBar");

    var getPercent = ($('.progress-wrap').data('progress-percent') / 100);

    var getProgressWrapWidth = $('.progress-wrap').width();

    var progressTotal = getPercent * getProgressWrapWidth;

    var animationLength = 2500;

    

    // on page load, animate percentage bar to data percentage length

    // .stop() used to prevent animation queueing

    $('.progress-bar').stop().animate({

        left: progressTotal

    }, animationLength);

}

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

0 Upvotes
Anton
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Progress bar html code

Hi @yjadlaoui,

 

this code should do it's job

 

HTML:

<div class="pBar">
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>

 

CSS:

.pBar {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;{# change the background-color to the color of the "non-scrolled" progress bar #}
}

.progress-bar {
  height: 8px;
  background: #04AA6D; {# change the background-color to the color of the "scrolled" progress bar #}
  width: 0%;
}

 

JS: 

/ When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

 

 

best, 

Anton




check
Did my post help answer your query? Help the Community by marking it as a solution



yjadlaoui
Contributor

Progress bar html code

Hi @Anton  thank you for replying , do you know where i should write the JS code exactly ? because i tried in multiple codes who are related to the blog and nothing changed 😕

0 Upvotes
Anton
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Progress bar html code

@yjadlaoui

in my experience it's the best way to create a custom module with those code snippets and put each one in the corresponding place. Then you have to "just" place the module in the template and that's it. This works with everything. 

If you're using themes you could also create a single JS file in your theme and link it either in the module or in the "layout.html"(the file where you define the <head> for example). 

 

Another possible place to put it would be in the settings 
Settings-->Website-->Pages-->website-header HTML(or footer HTML).

By doing so this part will be loaded with the {{standard_header_includes}} in your template.

 

 

best, 

Anton




check
Did my post help answer your query? Help the Community by marking it as a solution



yjadlaoui
Contributor

Progress bar html code

Hello @Anton 

Thank you for responding , so basically nothing really changed 😕 i sent you a detailed message of what i did exactly i hope you can figure out what actually is the problem. 

Best regards 

Yjadlaoui 

0 Upvotes