1

I want to use this animated graph as seen here

But it lives below the fold and I want it to only animate once it is in view.

I tried using the code provided here, which looks like it would do the trick: Load (Lazy Loading) a Div whenever the DIV gets visible for the first time

Along with other similar posts but have had no success.

some help would be much appreciated. the barebones of the code can be seen here

Thanks. Neil

Community
  • 1
  • 1
user2112869
  • 11
  • 1
  • 3
  • http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – l2aelba Feb 26 '13 at 21:32
  • Please post the relevant portion of your code here. – Asad Saeeduddin Feb 26 '13 at 21:33
  • @Asad I was able to get the bar graph animating with the first link in my post, the js file there is rather long to embed here, and the lazy load div code I tried to add is; `function lazyload(){ var wt = $(window).scrollTop(); var wb = wt + $(window).height(); $(".ads").each(function(){ var ot = $(this).offset().top; var ob = ot + $(this).height(); if(!$(this).attr("loaded") && wt<=ob && wb >= ot){ $(this).html("#slowload"); $(this).attr("loaded",true);` where #slowload is the div that has the graph that animates – user2112869 Feb 26 '13 at 23:17

1 Answers1

0

I think the problem with this lazyLoad() function is that it uses the offset().top of the element to determine if the element is in the view of the window.

The problem though, is if your element display property is set to none, the offset method will return 0, which will fire the event when the page loads, thus making your animation start on page load.

Since your animation probably uses the display property to control the visiblitiy of the animation, you are probably getting a 0 value from the offset method.

Give this a try, put this in the lasyLoad() function just after it calls the offset method (about line 13) and see what the offset value is when the page loads

console.log("offset top " + ot + " height: " + ob);

Enter that just after the offset call.

You can check out this fiddle, where I debugged this issue http://jsfiddle.net/jessekinsman/yDybE/5/

You might try using css transition to do your animation and use the visibility property instead of the display property. Since I don't know what type of animation you are trying to achieve, I can't really recommend exactly what animation to try.

Hope this helps

Jesse Kinsman
  • 732
  • 2
  • 7
  • 20
  • Thanks, still no luck. the js that animates the graph can be seen [here](http://www.equicomgroup.com/graphs/03.js) It looks like there are a lot of variables and functions that could be modified if I were better at JS but I am struggling here. – user2112869 Feb 27 '13 at 17:17