Javascript error in event handler! Event Type = element

I am trying to create a display banner that scrolls with the hosting page, see example ... 3. Cut Out MPU

I have used Edge Animate to build, and javascript to program the functionality (or tried at least), the banner is 300x250 px, and the image is around 700px, this image animates from top (0px) to bottom (700px) over 4 secs in the timeline.

The Javascript I am using was figured out and kindly uploaded here

Amount user can scroll = 100% / animation length = 100%
Amount user has scrolled = 10% / timeline position = 10%

This should all be working correctly, however when I preview the edge animate composition in a browser (Chrome), console log shows...

Javascript error in event handler! Event Type = element

When I add this composition to a test webpage with some phoney content, I get the same error as above aswell as this error when I scroll...

    Uncaught TypeError: undefined is not a function
getScrollPerc
window.onscroll

The Javascript is firing as the error tally counts up as I scroll, but I cannot figure out how I have made an error in my code. My code from Edge is below...

(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes

   //Edge symbol: 'stage'
   (function(symbolName) {




      Symbol.bindElementAction(compId, symbolName, "document", "compositionReady", function(sym, e) {

         // insert code to be run when the composition is fully loaded here
         var animSize = getDuration();
         window.onscroll = function(e) {
           var perc = getScrollPerc();
           var animPos = (perc/100) * animSize;
           sym.stop(animPos);
         }

         function getScrollPerc() {
           var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
           return (wintop/(docheight-winheight))*100;
         }

         if(getScrollPerc() > 0) {
           console.log('do initial move');
           var perc = getScrollPerc();
           var animPos = (perc/100) * animSize;
           setTimeout(function() { sym.stop(animPos);}, 0);
         }

      });
      //Edge binding end

   })("stage");
   //Edge symbol end:'stage'

})(window.jQuery || AdobeEdge.$, AdobeEdge, "EDGE-4414348");

I have tried a fix found on Adobe forums (not enough rep to link) which states that these functions are only available within compositionReady as it is a local function, and by adding the sym. prefix, they will be available. I have however not been able to rectify my error.

Any information or help on the matter would be greatly appreciated.

Thanks in advance, Adam.

Answers:

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.