Javascript error in event handler! Event type = element

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

I used Edge Animate for assembly and javascript to program the functionality (or tried at least), the banner is 300x250px and the image is about 700px, this image animates from top (0px) to bottom (700px) over 4 seconds on the timeline.

The Javascript I'm using has been computed and kindly uploaded here

Amount the user can scroll = 100% / animation length = 100%
Number of users scrolled = 10% / timeline position = 10%

Everything should work correctly, however when I view the composition of the edge wrap in the browser (Chrome) the console log shows ...

Javascript error in event handler! Event Type = element

      

When I add this composition to a test webpage with some fake content, I get the same error as above and also this error when scrolling ...

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

      

Javascript is triggered when the error count is counted as I scroll, but I can't figure out how I made the mistake 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 tried the fix I found on the Adobe forums (not enough reference for a link) that says these functions are only available as part of Ready as it is a local function and adding sym. prefix, they will be available. I, however, have been unable to correct my mistake.

Any information or help on this matter would be appreciated.

Thanks in advance, Adam.

+3


source to share





All Articles