Eat Cookies!

What are Cookies?

Cookies are data, stored in small text files, on your computer.

When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.

Cookies were invented to solve the problem "how to remember information about the user":

• When a user visits a web page, his name can be stored in a cookie.
• Next time the user visits the page, the cookie "remembers" his name.

Cookies are saved in name-value pairs like:

username = John Doe

When a browser requests a web page from a server, cookies belonging to the page is added to the request. This way the server gets the necessary data to "remember" information about users.

Function

function deleteCookie(cname) {
    setCookie(name, '', 1);
    document.cookie = name + '=; Expires=Thu, 01 Jan 1970 " + 
                      "00:00:01 GMT; path=/;';
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires + 
                      "; path=/;";
}

Happy coding!

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!