correct syntax for placing javascript function into other function

Question

i have this code that is a couple of little animations.

function circle_progess() {
  var divElement = $('div'); //log all div elements
  if (retina()) {
    $(".whiteCircle").knob({
      'min': 0,
      'max': 100,
      'readOnly': true,
      'width': 240,
      'height': 240,
      'bgColor': 'rgba(255,255,255,0.5)',
      'fgColor': 'rgba(255,255,255,0.9)',
      'dynamicDraw': true,
      'thickness': 0.1,
      'tickColorizeValues': true
    });

    $(".circleStat").css('zoom', 0.5);
    $(".whiteCircle").css('zoom', 0.999);
  } else {

    $(".whiteCircle").knob({
      'min': 0,
      'max': 100,
      'readOnly': true,
      'width': 120,
      'height': 120,
      'bgColor': 'rgba(255,255,255,0.5)',
      'fgColor': 'rgba(255,255,255,0.9)',
      'dynamicDraw': true,
      'thickness': 0.1,
      'tickColorizeValues': true
    });
  }

  $(".circleStatsItemBox").each(function() {
    var value = $(this).find(".count > .number").html();
    var unit = $(this).find(".value > .unit").html();
    var percent = $(this).find("input").val() / 100;

    countSpeed = 2300 * percent;
    endValue = value;

    $(this).find(".count > .unit").html(unit);
    $(this).find(".count > .number").countTo({
      from: 0,
      to: endValue,
      speed: countSpeed,
      refreshInterval: 50
    });

    //$(this).find(".count").html(value*percent + unit);
  });
}

i want to replace the below code line that gives an alert when scrolled with the above code. so i execute function on scroll. I cant seem to integrate the code, can someone help me out ?

var $findme = $('.whiteCircle');

function Scrolled() {
  $findme.each(function() {
    var $section = $(this),
      findmeOffset = $section.offset(),
      findmeTop = findmeOffset.top,
      findmeBottom = $section.height() + findmeTop,
      scrollTop = $(document).scrollTop(),
      visibleBottom = window.innerHeight,
      prevVisible = $section.prop('_visible');

    if ((findmeTop > scrollTop + visibleBottom) ||
      findmeBottom < scrollTop) {
      visible = false;
    } else visible = true;

    if (!prevVisible && visible) {
      alert($section.text());
    }
    $section.prop('_visible', visible);
  });

}

function Setup() {
  var $top = $('#top'),
    $bottom = $('#bottom');

  $top.height(500);
  $bottom.height(500);

  $(window).scroll(function() {
    Scrolled();
  });
}

$(document).ready(function() {
  Setup();

});

SIMPLY PUT I want this....

var $findme = $('circle_progress');

function Scrolled() {
    $findme.each(function() {
          var $section = $(this),
            findmeOffset = $section.offset(),
            findmeTop = findmeOffset.top,
            findmeBottom = $section.height() + findmeTop,
            scrollTop = $(document).scrollTop(),
            visibleBottom = window.innerHeight,
            prevVisible = $section.prop('_visible');

          if ((findmeTop > scrollTop + visibleBottom) ||
            findmeBottom < scrollTop) {
            visible = false;
          } else visible = true;

          if (!prevVisible && visible) {


            function circle_progess() {

              var divElement = $('div'); //log all div elements

              if (retina()) {

                $(".whiteCircle").knob({
                  'min': 0,
                  'max': 100,
                  'readOnly': true,
                  'width': 240,
                  'height': 240,
                  'bgColor': 'rgba(255,255,255,0.5)',
                  'fgColor': 'rgba(255,255,255,0.9)',
                  'dynamicDraw': true,
                  'thickness': 0.1,
                  'tickColorizeValues': true
                });

                $(".circleStat").css('zoom', 0.5);
                $(".whiteCircle").css('zoom', 0.999);


              } else {

                $(".whiteCircle").knob({
                  'min': 0,
                  'max': 100,
                  'readOnly': true,
                  'width': 120,
                  'height': 120,
                  'bgColor': 'rgba(255,255,255,0.5)',
                  'fgColor': 'rgba(255,255,255,0.9)',
                  'dynamicDraw': true,
                  'thickness': 0.1,
                  'tickColorizeValues': true
                });

              }



              $(".circleStatsItemBox").each(function() {
                var value = $(this).find(".count > .number").html();
                var unit = $(this).find(".value > .unit").html();
                var percent = $(this).find("input").val() / 100;

                countSpeed = 2300 * percent;
                endValue = value;

                $(this).find(".count > .unit").html(unit);
                $(this).find(".count > .number").countTo({
                  from: 0,
                  to: endValue,
                  speed: countSpeed,
                  refreshInterval: 50
                });

                //$(this).find(".count").html(value*percent + unit);
              });

            }

html added to give some clarity on how output might look....

<div class="circleStatsItemBox blue">
<div class="header">Levels of Involvement</div>
<span class="percent">% Increase</span>
<div class="circleStat"> <input value="20" class="whiteCircle" type="text"> </div>
<div class="footer"><span class="count"> <span class="number">40</span> <span>Before</span>
</span> <span class="sep"> / </span> <span class="value"> <span class="number">50</span><span class="unit"> During</span></span> </div>
</div>

I don't see where you are calling circle_progress? If the function is not called then it cannot run. My suggestion would be to put in console.logs or alerts in some key places to see where it breaks. — JeremyS
– JeremyS, Commented Nov 16, 2016 at 22:47

Barmar · Accepted Answer · 2016-11-16 23:27:00Z

1

You don't need to put the function definition inside the other code. Just leave it outside and write:

if (!prevVisible && visible) {
    circle_progress();
}

answered Nov 16, 2016 at 23:27

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

20 Comments

greggycoding Over a year ago

that makes sense to me but it didn't work, replaced the alert text with the function as you describe ? hmm

Barmar Over a year ago

What is it supposed to do, what did it do instead? Any errors in the JS console? I have no idea what .knob() is, it's not a standard jQuery method.

greggycoding Over a year ago

its basicaly a donut chart that animates the percentage value ... i will put the html in the edit of one of the charts there are many of them but want to start their associated function only when they come into the viewscreen , edited now

greggycoding Over a year ago

p.s i appreciate your help

greggycoding Over a year ago

...clearly instead of .section it needs to be .circleStat ... i think

|

Collectives™ on Stack Overflow

correct syntax for placing javascript function into other function

1 Answer 1

20 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

20 Comments

Your Answer

Sign up or log in

Post as a guest

Related