Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/js/scripts.js

Issue 29335113: Issue 2675 - Implemented responsive header for web.eyeo.com (Closed)
Patch Set: Fixed logo, floats, css style, and IE8 events Created June 16, 2016, 5:43 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « static/js/respond.min.js ('k') | templates/default.tmpl » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: static/js/scripts.js
===================================================================
--- a/static/js/scripts.js
+++ b/static/js/scripts.js
@@ -1,39 +1,68 @@
-jQuery(function()
-{
- var toTop = jQuery("#to-top");
- toTop.click(function ()
- {
- jQuery("body,html").animate({
- scrollTop: 0
- }, 800);
- return false;
- });
-});
-
-jQuery(window).scroll(function()
-{
- var scrollTop = jQuery(window).scrollTop();
-
- // Fix header
- var header = jQuery("#header");
- var height = header.height();
- var fixed = (scrollTop > height);
- if (fixed != header.hasClass("fixed"))
- {
- if (fixed)
- {
- header.css("top", -height);
- header.animate({top: 0},function()
- {
- header.css("top", "");
- });
- header.addClass("fixed");
- }
- else
- header.removeClass("fixed");
- }
-
- // Display "to top" button
- var toTop = jQuery("#to-top");
- toTop.css("opacity", scrollTop > 100 ? 1 : 0)
-});
+(function(){
+
+ function addListener(target, event, callback)
+ {
+ if (target.addEventListener)
+ {
+ return target.addEventListener(event, callback, false);
+ }
+ else
+ {
+ return target.attachEvent("on" + event, callback);
+ }
+ }
+
+ function onLoad(callback)
+ {
+ if (document.addEventListener)
+ {
+ return addListener(document, "DOMContentLoaded", callback);
+ }
+ else
+ {
+ return addListener(window, "load", callback);
+ }
+ }
+
+ onLoad(function()
+ {
+ // expand & contract fixed header
+
+ var header = document.getElementById("header");
+ var headerPadding = 13;
+
+ addListener(window, "scroll", function()
+ {
+ var scrollY = window.scrollY || document.documentElement.scrollTop;
+
+ if (scrollY < headerPadding)
+ {
+ header.className = "top";
+ }
+ else
+ {
+ header.className = "";
+ }
+ });
+
+ // open & close header menu (on small screens)
+
+ var menu = document.getElementById("menu");
+ var menuButton = document.getElementById("header-hamburger");
+
+ addListener(menuButton, "click", function()
+ {
+ if (menu.className === "open")
+ {
+ menu.className = "";
+ menu.setAttribute("aria-expanded", false);
+ }
+ else
+ {
+ menu.className = "open";
+ menu.setAttribute("aria-expanded", true);
+ }
+ });
+ });
+
+}());
« no previous file with comments | « static/js/respond.min.js ('k') | templates/default.tmpl » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld