layout. centered vertically. nav inside iframe.

ncase · Aug 28, 2017 · 4daad38 · 4daad38
1 parent 27de751
commit 4daad38
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 20 deletions.
diff --git a/js/slides.js b/js/slides.js
@@ -36,8 +36,12 @@ $(window).on('scroll', function() {
 		// var inView = $(window).scrollTop() >= $(this).offset().top
 		if(inView) {
 			var id = $(this).attr('id');
-			$('#nav nav a').removeClass('active');
-			$('#nav nav a[href=#a_'+ id +']').addClass('active');
+
+			$('#nav nav a[href="../newer.html#a_'+ id +'"]', $("#fixedbox").contents()).addClass('active');
+
+			$("#fixedbox").contents().find('#nav nav a').removeClass('active');
+			$('#nav nav a[href="../newer.html#a_'+ id +'"]', $("#fixedbox").contents()).addClass('active');
+			// $("#fixedbox").contents().find('#nav nav a[href="../newer.html#a_'+ id +'"]').addClass('active');
 			$(this).css('background-color',"#ddddee");
 			if (id!=old_div) {
 				globalHtmlName = $(this).attr('id') + ".html"
@@ -77,14 +81,22 @@ $(window).on('scroll', function() {
 			console.log("topper")
 			n1.css("position","absolute")
 			n1.css("top", topoffirst)
+			n1.css("margin-top","0")
 		} else if (belowbottomoflast) {
 			console.log("bottomer")
 			n1.css("position","absolute")
 			n1.css("top",bottomoflast-sidebarheight+"px")
+			n1.css("margin-top","0")
 		} else { // sticky
 			console.log("sticky")
 			n1.css("position","fixed")
-			n1.css("top",prejump+"px")
+			if (window_height > 770) {
+				n1.css("top","50%")
+				n1.css("margin-top","-385px")
+			} else {
+				n1.css("top","0")
+				n1.css("margin-top","0")
+			}
 		}
 	}
 

diff --git a/newer.html b/newer.html
@@ -375,23 +375,6 @@ <h2 class="ballot_title" style="margin-bottom: 0.15em;">321 Strategic</h2>
 
 </section>
 <aside id="nav">
-	<nav>
-		<a href="#a_ballot4" class="active">Ballot 4</a>
-		<a href="#a_ballot5">Ballot 5</a>
-		<a href="#a_election7">Election 7</a>
-		<a href="#a_election8">Election 8</a>
-		<a href="#a_ballot8">Ballot 8</a>
-		<a href="#a_ballot11">Ballot 11</a>
-		<a href="#a_ballot12">Ballot 12</a>
-		<a href="#a_election10">Election 10</a>
-		<a href="#a_election11">Election 11</a>
-		<a href="#a_election12">Election 12</a>
-		<a href="#a_ballot9">Star Ballot 9</a>
-		<a href="#a_election13">Star Election 13</a>
-		<a href="#a_ballot10">321 Ballot 10</a>
-		<a href="#a_election14">321 Election 14</a>
-		<a href="#sandbox">Sandbox</a>
-	</nav>
 	<iframe id="fixedbox" src="sandbox/fixedbox.html" scrolling="yes"></iframe>
 </aside>
 

diff --git a/play/css/fixedbox.css b/play/css/fixedbox.css
@@ -70,3 +70,34 @@ textarea, input{
 }
 
 
+#nav {
+	font-size: 10px;
+	top: 0%;
+
+/*	just for start*/
+	position: absolute;
+	line-height: 1em;
+}
+
+#nav a {
+	border-bottom: 1px solid #666;
+	color: #333;
+	display: block;
+	padding: 1px;
+	text-align: center;
+	text-decoration: none;
+}
+
+#nav a:hover, #nav a.active {
+	background: #666;
+	color: #fff;
+}
+
+#nav nav {
+	left: 0;
+	width: 100px;
+	height: 20%;
+	position: absolute;
+}
+
+
diff --git a/sandbox/fixedbox.html b/sandbox/fixedbox.html
@@ -7,8 +7,28 @@
 	<link rel="stylesheet" type="text/css" href="css/election.css">
 	<link rel="stylesheet" type="text/css" href="css/ballotInSandbox.css">
 	<link rel="stylesheet" type="text/css" href="css/fixedbox.css">
+	<base target="_parent">
 </head>
 <body>
+	<aside id="nav">
+		<nav>
+			<a href="../newer.html#a_ballot4" class="active">Ballot 4</a>
+			<a href="../newer.html#a_ballot5">Ballot 5</a>
+			<a href="../newer.html#a_election7">Election 7</a>
+			<a href="../newer.html#a_election8">Election 8</a>
+			<a href="../newer.html#a_ballot8">Ballot 8</a>
+			<a href="../newer.html#a_ballot11">Ballot 11</a>
+			<a href="../newer.html#a_ballot12">Ballot 12</a>
+			<a href="../newer.html#a_election10">Election 10</a>
+			<a href="../newer.html#a_election11">Election 11</a>
+			<a href="../newer.html#a_election12">Election 12</a>
+			<a href="../newer.html#a_ballot9">Star Ballot 9</a>
+			<a href="../newer.html#a_election13">Star Election 13</a>
+			<a href="../newer.html#a_ballot10">321 Ballot 10</a>
+			<a href="../newer.html#a_election14">321 Election 14</a>
+			<a href="../newer.html#sandbox">Sandbox</a>
+		</nav>
+	</aside>
 	<div id="center"></div>
 	<div id="left"></div>
 	<div id="right"></div>