Execution of jQuery Script

Question

Execution of jQuery Script

Asked 7 years, 11 months ago

Viewed 164 times

0

I have a Progress bar script, I would like the animation of the progress bar fill to be started as soon as the user scrolls the page up to the elements that will be animated. I tried to use $('.progress-bar').scroll(function() { etc..., but every time I use the mouse scroll restarts the script execution. I would like the script to run only once.

$('.skill-progress').each(function() {
  $('.html-css.circle').circleProgress({
    value: 0.87,
    size: 160,
    startAngle: -1.5,
    fill: {
      gradient: [['#EC6630', .5], ['#0096E6', .5]], gradientAngle: Math.PI / 5
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html('<i><span style="color: #EC6630;">HTML</span> / <span style="color: #0096E6;">CSS</span></i>');
  });
  $('.jq-js.circle').circleProgress({
    value: 0.63,
    size: 160,
    startAngle: -1.5,
    fill: {
      gradient: [['#1169AE', .5], ['#EEAF4B', .5]], gradientAngle: Math.PI / 1.8
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html('<i><span style="color: #1169AE;">JQ</span> / <span style="color: #EEAF4B;">JS</span></i>');
  });
  $('.php-mysql.circle').circleProgress({
    value: 0.47,
    size: 160,
    startAngle: -1.5,
    fill: {
      gradient: [['#8993BE', .5], ['#F88500', .5]], gradientAngle: Math.PI / 1.5
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html('<i><span style="color: #8993BE;">PHP</span> / <span style="color: #F88500;">MYSQL</span></i>');
  });
  $('.ps-cd.circle').circleProgress({
    value: 0.53,
    size: 160,
    startAngle: -1.5,
    fill: {
      gradient: [['#5889C4', .5], ['#55A746', .5]], gradientAngle: Math.PI / 2
    }
  }).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html('<i><span style="color: #5889C4;">PS</span> / <span style="color: #55A746;">CDR</span></i>');
  });
});

.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <div class="html-css circle">
    <strong></strong>
  </div>
  <div class="jq-js circle">
    <strong></strong>
  </div>
  <div class="php-mysql circle">
    <strong></strong>
  </div>
  <div class="ps-cd circle">
    <strong></strong>
  </div>
</div>

1

Could post more code.

– mau humor

2017/01/13 at 23:21
@mauhumor Ready, edited. I tried .each(); turned into nothing

– Giovani Rodrigo

2017/01/13 at 23:25

1 answer

Browser other questions tagged javascript jquery materialize

You are not signed in. Login or sign up in order to post.

by MarceloBoni • **6,385** points · Answer 1 · 2017-01-14T00:00:22+00:00

I did not understand the final objective of the question, there are two interpretations of what it needs

1)

I would like it to be a progress bar for page content?

If that’s right, you can use window.addEventListener('scroll', function() { taking the screen size of the user (var height = document.body.getBoundingClientRect().height - window.innerHeight;) with the current position of the screen (var top = window.scrollY;) to go recalculating the current percentage and reloading the script $('.circle').circleProgress({ with the percentage value.

Function adapted from this other: Progress-bar-when-scroll

function updateProgress(num1, num2) {
  var percent = Math.ceil(num1 / num2 * 100);
  $('.circle').circleProgress({
    value: percent / 100,
    animation: false,
    fill: {color: '#0000ff'}
  })
}

window.addEventListener('scroll', function() {
  var top = window.scrollY;
  var height = document.body.getBoundingClientRect().height - window.innerHeight;
  updateProgress(top, height);
});

.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <div class="fixo">
    <div class="circle">
      <strong></strong>
    </div>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>

2)

I would like the animation to begin as soon as it reaches the element?

You can do something similar: When starting the page call the function $('.circle').circleProgress({ with value: 0, create a function that calculates how far from the element taking into account the current screen view:

$(window).scroll(function() {
  var $circle = $(".circle");
  var window_offset = $circle.offset().top - $(window).scrollTop();
});

And within this function call another function that "high destroy" when it exceeds a certain stipulated limit:

var myFunction = function(window_offset) {
  if (window_offset < 100) {
    myFunction = function() {};

Within this stipulated limit still call again the function $('.circle').circleProgress({ with the value of the percentage you would like.

$('.circle').circleProgress({
  value: 0,
  fill: {
    color: '#0000ff'
  }
})

var myFunction = function () {
    $(".circle").circleProgress({
      value: 0.85,
      fill: {
        color: '#0000ff'
      }
    });

    myFunction = function() {};
    return 1;
};

$(window).bind("scroll resize", function() {
  var $circle = $(".circle");
  var win = $(window);

  var isVibile = win.scrollTop() + win.height() > $circle.offset().top + $circle.outerHeight();

  $("#window_offset").html(isVibile ? "Visível" : "Invisível");

  if (isVibile) {
     myFunction($circle);
  }
});

.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <br/>
  <br/>
  <label class="fixo" id="window_offset"></label>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="circle">
    <strong></strong>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>