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!
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!