How to fire jQuery in page view?

Question

I want this animation to start when the portion is either selected from the nav bar or is in view on scrolling.
Sample code:
HTML:

    <section id="section-skills" class="section appear clearfix">
            <div class="container">
                <div class="row mar-bot40">
                    <div class="col-md-offset-3 col-md-6">
                        <div class="section-header">
                            <h2 class="section-heading animated" data-animation="bounceInUp">Skills</h2>
    </div>
</div>
</div>
</div>
<div class="container">
                <div class="row" >
                <div class="col-md-6">
<div class="skillbar clearfix " data-percent="80%">
    <div class="skillbar-title" style="background: #333333;"><span>Java</span></div>
    <div class="skillbar-bar" style="background: #525252;"></div>
    <div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<!--REST OF THE CODE FOLLOWS AS IN THE EXAMPLE LINK PROVIDED-->

 </section>

I tried using waypoint in jQuery but it's not working.

jQuery(document).ready(function(){
  $('#section-skills').waypoint(function(direction) {  
    jQuery('.skillbar').each(function(){
        jQuery(this).find('.skillbar-bar').animate({
            width:jQuery(this).attr('data-percent')
        },6000);
    });
});
});

Any solution would be really helpful.

score 1 · Answer 1 · answered Jul 06 '14 at 00:33

Use jQuery Appear repository to start the animation when the elements are in viewport.

Here is the sample code

HTML:

    <!-- Progress Bars -->
<div class="skills-wrap">
    <div class="container">
        <!-- Blue progress bars -->
        <h1 class="text-center">BLUE PROGRESS BARS</h1>
        <div class="skills progress-bar1">
            <ul class="col-md-6 col-sm-12 col-xs-12">
                <li class="progress">
                    <div class="progress-bar" data-width="85">
                        Wordpress 85%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="65">
                        Graphic Design 65%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="90">
                        HTML/CSS Design 90%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="60">
                        SEO 60%
                    </div>
                </li>
            </ul>
            <ul class="col-md-6 col-sm-12 col-xs-12 wow fadeInRight">
                <li class="progress">
                    <div class="progress-bar" data-width="75">
                        Agencying 75%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="95">
                        App Development 95%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="70">
                        IT Consultency 70%
                    </div>
                </li>
                <li class="progress">
                    <div class="progress-bar" data-width="90">
                        Theme Development 90%
                    </div>
                </li>
            </ul>
        </div>
        <!-- /Blue progress bars -->
    </div>
</div>

The CSS:

.progress {
    height: 35px;
    line-height: 35px;
    margin-bottom: 45px;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
    list-style: none;
}

.progress-bar {
    font-weight: 600;
    line-height: 35px;
    padding-left: 20px;
    text-align: left;
}

.progress-bar1 .progress-bar {
    background: #026ea6;
}

Script:

jQuery(document).ready(function () {

/*----------------------------------------------------*/
/*  Animated Progress Bars
/*----------------------------------------------------*/

    jQuery('.skills li').each(function () {
        jQuery(this).appear(function() {
          jQuery(this).animate({opacity:1,left:"0px"},800);
          var b = jQuery(this).find(".progress-bar").attr("data-width");
          jQuery(this).find(".progress-bar").animate({
            width: b + "%"
          }, 1300, "linear");
        }); 
    });   

});

The live demo is here at Bootstrap Animated Progress Bar

I am using the exact progress bar style as given here-http://codepen.io/tamak/pen/hzEer. What changes should I make to this so that it does the job? — HackCode, Jul 07 '14 at 10:39

score 1 · Answer 2 · answered Jul 07 '14 at 16:02

1

Here you go. I have created a new pen Progress Bars

All you have to do is to use this script to run the animation when it appears in viewport.

jQuery(document).ready(function(){
    jQuery('.skillbar').each(function(){
        jQuery(this).appear(function() {
            jQuery(this).find('.skillbar-bar').animate({
                width:jQuery(this).attr('data-percent')
            },6000);
        });
    });
});

And don't forget to add the jQuery Appear script on your site. If you still have any problem please let me know.

answered Jul 07 '14 at 16:02

Monzurul Haque

114
8

Thank you so much! This worked! Although there's some problem with the new pen that you created,the jQuery Appear did the trick. Awesome! – HackCode Jul 07 '14 at 17:29
I am glad it worked!! By the way i don't see any problem on the pen. It is working properly for me though. – Monzurul Haque Jul 07 '14 at 18:24

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

Use .position().top to get the top position of the .skillbar.

Then use the .scroll() event to get the current position the window is scrolled to using .scrollTop().valueOf().

When the .scrollTop value is close enough to the .skillbar's top position, then the element must be in view, so you can set this up as a condition for when to invoke the animation.

jQuery(document).ready(function(){
  var skillBarTopPos = jQuery('.skillbar').position().top;
  jQuery(document).scroll(function(){
    var scrolled_val = $(document).scrollTop().valueOf();
    if(scrolled_val>skillBarTopPos-250) startAnimation();
  });

  function startAnimation(){
    jQuery('.skillbar').each(function(){
      jQuery(this).find('.skillbar-bar').animate({
        width:jQuery(this).attr('data-percent')
      },6000);
    });
  };

});

http://api.jquery.com/position/

How to detect scroll position of page using jQuery

http://api.jquery.com/scrollTop/#scrollTop2

edited May 23 '17 at 12:01

Community

1
1

answered Jun 28 '14 at 16:37

chris

789
4
16

This is giving me the same output. It still starts when the entire page is loaded,not when I scroll to that section. – HackCode Jun 28 '14 at 17:46
Is there something missing? I tried some tweaks but it didn't help. – HackCode Jun 28 '14 at 18:01
The only thing I did different was add a
before the first and after the last .skillbar in your pen's html to test scrolling down, and to make sure the animation wouldn't start until it came into full view on my browser. You could also try increasing or decreasing the subtracted value from skillBarTopPos (for example: skillBarTopPos-100 or skillBarTopPos-500), at least to see if what I thought was a solution has issues with different screen resolutions or browser sizes. I hope that this helps. – chris Jun 28 '14 at 18:50

How to fire jQuery in page view?

3 Answers3