Start Edge Animate when is in the screen

I've come across a few sites that will tie window scrolling with animation. When used in a subtle, small fashion, this is kind of cool. When used to change large portions of the view or really screw with scrolling, I detect it. Like most things, it all comes down to how you use it I suppose. But I was thinking recently - how can we do this with Edge Animate?

Change edgePreload.js

In a file calles something_edgePreload.js you find a line similar to the follow:

    if (AdobeEdge.bootstrapLoading) { 
        signaledLoading = true; 
        AdobeEdge.loadResources = doLoadResources; 
        AdobeEdge.playWhenReady = playWhenReady; 
    }

Replace playWhenReady with false.

Change edgeActions.js

First of all you have to insert a function to decide if an element is in the visible part of the screen.

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) 
            && (elemTop >= docViewTop));
}

This function returns True if an element is in a visible portion of the screen.

Now we have to change the main function to check it and then play the animation. Here the complete code of an edgeAction.js.

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

   //Edge symbol: 'stage'
   (function(symbolName) {
       var showAnimation = true;
       function isScrolledIntoView(elem) {
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();

            var elemTop = $(elem).offset().top;
            var elemBottom = elemTop + $(elem).height();

            return ((elemBottom <= docViewBottom) 
                    && (elemTop >= docViewTop));
      }

      Symbol.bindSymbolAction(compId, symbolName, 
                    "creationComplete", function(sym, e) {
          var animSize = sym.getDuration();

          if(!isScrolledIntoView('.EDGE-1931783')) {
	        setTimeout(function() { sym.stop(); }, 0);    
          }

           window.onscroll = function(e) {
              if(isScrolledIntoView('.EDGE-1931783')) {
                  if (showAnimation) {
                    sym.play(0);
                    showAnimation = false;
                  }
              }
          }
      });
   })("stage");
   //Edge symbol end:'stage'

})(jQuery, AdobeEdge, "EDGE-1931783");

EDGE-1931783 is the class of my animation. Replace it with yours.

Happy coding!

Microsoft announces new issue tracker for Edge

microsoftedgebuild2015-1040x580

Microsoft has just kicked off its Microsoft Edge Web Summit 2016, and the company is explaining right now how it wants to change how it will deliver its new browser to the community. Microsoft has just announced a new issue tracker for Edge that will allow Microsoft engineers to better listen to user feedback. The new tool has been designed from the ground up and is directly integrated into Edge engineers workflow.

The new tool allow any user to report or search EdgeHTML issues, such as problems with site rendering or standards compliance. You will see more transparent progress from Microsoft as when you’ll file bugs, you can get notified about replies from the engineering team.

Microsoft Edge finally supports Extensions, available to Insiders now

Microsoft-Edge-chrome-extensions

Last night, Microsoft introduced Extensions support for Edge in Windows 10 Build 14291. The company released three official Extensions for Microsoft Edge yesterday, and more are expected to come later this year. Now, Microsoft’s Jacob Rossi today announced on Twitter that the company will be releasing a porting tool which will allow developers to port their Chrome extensions to Microsoft Edge. The company is apparently working on it now, and it isn’t finished as not all the APIs are supported just yet.

Microsoft-Edge-Screenshot-26-1

It is worth noting that porting Chrome extensions to Microsoft Edge is actually quite easy. If you are a developer, you will be able to port your Chrome extension to Edge pretty easily after changing several lines of code. Nonetheless, this upcoming tool should make porting Chrome extensions to Edge even easier, and we hope to hear more about it from Microsoft at Build 2016 later this month.

Windows 10: Extensions for Edge to arrive with Redstone in 2016

microsoft-edge-extensions

Microsoft Edge is an interesting browser, simply because it’s missing a rather hefty amount of vital features for people to want to make the switch from Chrome or Firefox. One feature that should have been there on day one but wasn’t, are extensions. Extensions are one of the main reasons people aren’t switching over to Edge, and now it appears users waiting to make the switch are going to have to wait a little longer.

Microsoft initially stated that extensions for Edge would arrive with an update “later this year”, but according to my contacts, there are no other feature updates after Threshold 2 that are scheduled for the end of this year. Extensions are yet to show up in the main development branch for Threshold 2 as well, and Microsoft still hasn’t started asking developers to port their extensions from other web browsers. With only two weeks left before Threshold 2 RTMs, there’s simply no time for Microsoft to ready extensions for Edge. So Instead, I hear Microsoft is planning to rollout the feature in 2016 with Redstone in the summer.

Insiders will likely get to mess with extensions before the summer however, as the Insider Program will likely begin receiving new Redstone builds way before RTM is released to the public. Microsoft will want developers and insiders to test (and develop) extensions within Edge, so when the update launches consumers will already have a number of extensions available for the browser. For those who don’t know, Microsoft is working on a bridge to allow extensions developed for Chrome to be easily ported to Edge with little to no code changes, much like the Project Astoria bridge.

Microsoft opens up even more, now sharing public changelog for Edge browser

Spartan-Social

 

Microsoft is using its new browser – Edge – to make a point: it wants to be more open. Case in point – the publicly accessible changelog.

Internet Explorer was infamously opaque. The company never provided detailed changelogs for its releases. Edge looks like it’ll be a different story.

A new area on the Microsoft Web platform site — where the company also tracks user requests for the browser — will detail the changes made to each release of the browser, such as additions of new Web standards or features.

Windows-Technical-Preview-Build-10074

This is a welcome change for Web developers, because they’re now able to actually find resources on what features are supported in which version and when they were added.

Microsoft doesn’t want developers building workarounds for Internet Explorer into their code anymore and it’s going to try to win back as many users as it can, so this change is a step in the right direction.

Edge Changelog

Microsoft announces Microsoft Edge

Today at Build 2015 in San Francisco, Microsoft announced its new Web browser called Microsoft Edge. This is the browser formerly known as Project Spartan.


Microsoft Edge, the new default browser will ship on all Windows 10 devices including PCs, tablets, smartphones, and Microsoft’s own tablet, Surface.

Microsoft Edge is the all-new Windows 10 browser built to give you a better web experience. Write directly on webpages and share your mark-ups with others. Read online articles free of distraction or use the offline reading feature for greater convenience. Microsoft Edge is the new browser that works the way you do.


Advertsing

125X125_06

Planet Xamarin

Planet Xamarin

Calendar

<<  November 2017  >>
MonTueWedThuFriSatSun
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

View posts in large calendar

Month List