This repository has been archived by the owner on Dec 24, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (130 loc) · 5.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<! to do: replace all instances of localhost/~Ajay/designByAjayRaw/.... with the actual URL>
<head>
<title>Design By Ajay</title>
<link rel="stylesheet" href="css/index.css" title="index css" type="text/css" media="screen">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/waypoints.min.js" charset="utf-8"></script>
<script src="js/jquery.scrollTo-min.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
function sizeMediaRotatorAndOffsetBodyArticles(){
var mediaRotatorMaxHeightStr = ($(window).width()*0.75)-$("#visibleHeader").height()+"px";
var visibleHeaderHeight = $("#visibleHeader").height();
var mediaRotatorHeightStr = $(window).height()-visibleHeaderHeight-5+"px";
$("#mediaRotator").css({"max-height":mediaRotatorHeightStr,"height":mediaRotatorMaxHeightStr});
$(".navBarShim").css({"height":visibleHeaderHeight+"px"});
$(".bodyArticle").css({"padding-top":visibleHeaderHeight+30+"px"});
};
sizeMediaRotatorAndOffsetBodyArticles();
//on window resize, do these things
$(window).resize(function() {
sizeMediaRotatorAndOffsetBodyArticles();
});
//dock the nav bar when it hits the top of the screen (this needs some code to smooth it out!)
$("#visibleHeader").waypoint(function(event, direction) {
if (direction === 'down') {
$("#visibleHeader").addClass("fixedToTop").siblings(".navBarShim").removeClass("noHeight");
}
else {
$("#visibleHeader").removeClass("fixedToTop").siblings(".navBarShim").addClass("noHeight");
};
});
//make the toggle rig for the nav bar
//cache common vars
var allBtns = $(".navButton");
var iBtn = $("#iBtn");
var userExperiencesBtn = $("#userExperiencesBtn");
var majorBrandsBtn = $("#majorBrandsBtn");
var allTgts = $(".bodyArticle");
var iTgt = $("#bio");
var userExperiencesTgt = $("#portfolio");
var majorBrandsTgt = $("#caseStudies");
var contactTgt = $("#contact");
//toggle buttons when pressed
function pressButton(buttonToPress){
buttonToPress.addClass("navButtonPressed").children(".navButtonWord").addClass("navButtonWordPressed");
/*
searching child might have a small performance loss, but caching it to a var would not preserve the
relationship between child and parent, and therefore two arguments would have to be specified.
tl;dr this isn't optimal, but it makes more sense.
*/
};
function unpressAllButtons(){
allBtns.removeClass("navButtonPressed").children(".navButtonWord").removeClass("navButtonWordPressed");
};
function buttonListener(buttonToListenTo, correspondingTarget, correspondingTargetListener){
buttonToListenTo.click(function(){
toggleOnScroll = false; //this works
correspondingTargetListener.cancelToggleOnScrollSuspend = true;//this works
unpressAllButtons();
pressButton(buttonToListenTo);
scrollToTarget(correspondingTarget);
setTimeout(function(){
toggleOnScroll = true;
}, 510);
});
};
//scroll to corresponding target on press
function scrollToTarget(targetToScrollTo){
$.scrollTo(targetToScrollTo,500,{easing:"swing"});
};
//toggle buttons on scroll IFF user scrolls
var toggleOnScroll = true;
var currentTargetListener;
function requestButtonPress(buttonToPress){
if(toggleOnScroll){
try{
unpressAllButtons();
pressButton(buttonToPress);
}
catch(e){
unpressAllButtons();
};
};
};
function targetListener(targetToListenTo,correspondingButton,previousButton){
this.cancelToggleOnScrollSuspend = false;
this.downWaypoint = targetToListenTo.waypoint(function(event, direction){
if(direction==="down"){
requestButtonPress(correspondingButton);
};
},{offset:-10});
this.upWaypoint = targetToListenTo.waypoint(function(event, direction){
if(direction==="up"){
requestButtonPress(previousButton);
};
},{offset:10});
};
//instantiate all objs
var iTgtListener = new targetListener(iTgt,iBtn,null);
var userExperiencesTgtListener = new targetListener(userExperiencesTgt, userExperiencesBtn, iBtn);
var majorBrandsTgtListener = new targetListener(majorBrandsTgt, majorBrandsBtn, userExperiencesBtn);
var contactTgtListener = new targetListener(contactTgt, null, majorBrandsBtn);
var iBtnListener = new buttonListener(iBtn, iTgt, iTgtListener);
var userExperiencesBtnListener = new buttonListener(userExperiencesBtn, userExperiencesTgt, userExperiencesTgtListener);
var majorBrandsBtnListener = new buttonListener(majorBrandsBtn, majorBrandsTgt, majorBrandsTgtListener);
});
</script>
</head>
<body>
<div class="forward">
<article id="mediaRotator"></article>
<header class="navBar" id="visibleHeader">
<div class="navBarCenterAlign">
<nav class="navWord navButton" id="iBtn"><h1 class="navBarWord navButtonWord" id="iStr">I</h1></nav>
<nav class="navWord"><h1 class="navBarWord">design</h1></nav>
<nav class="navWord navButton" id="userExperiencesBtn"><h1 class="navBarWord navButtonWord" id="userExperiencesStr">User Experiences</h1></nav>
<nav class="navWord"><h1 class="navBarWord">for</h1></nav>
<nav class="navWord navButton" id="majorBrandsBtn"><h1 class="navBarWord navButtonWord" id="majorBrandsStr">Major Brands.</h1></nav>
</div>
</header>
<div class="navBarShim noHeight"></div>
</div>
<article class="bodyArticle" id="bio"></article>
<article class="bodyArticle" id="portfolio"></article>
<article class="bodyArticle" id="caseStudies"></article>
<article class="bodyArticle" id="contact"></article>
</body>
</html>