Merge pull request #12 from paretoman/layout3

Layout3
electionscience · Aug 28, 2017 · 67c6c50 · 67c6c50
2 parents ac867aa + 0fa9c93
commit 67c6c50
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 46 deletions.
diff --git a/css/slides.css b/css/slides.css
@@ -7,9 +7,9 @@ div.target  {
 }
 
 #main {
-	left: 500px;
-	max-width: 700px;
+	margin-left: 500px;
 	position:relative;
+	right: 20px;
 }
 
 #main div.target {
@@ -46,14 +46,14 @@ div.target  {
 }
 
 #nav nav {
-	left: 340px;
+	left: 0;
 	width: 100px;
 	height: 20%;
 	position: absolute;
 }
 
 #fixedbox {
-	width: 500px;
+	width: 458px;
 	height: 100%;
 }
 
@@ -63,4 +63,4 @@ div.target  {
 	height: 400px;
 	margin-top: -400px;
 	visibility: hidden;
-}
+}
diff --git a/js/slides.js b/js/slides.js
@@ -6,39 +6,42 @@ var old_div = null;
 var globalHtmlName = "ballot4.html"
 var exampleLoaded = null
 
+var read_fraction = .2
 
 //$("#main").css("width","500px")
 
 var setshift = function() {
 	var window_height = $(window).height();
 	// link into middle
 	// only really need to do this when the window is resized
-	var shift = .5*window_height - 2
+	var shift = read_fraction*window_height - 70
 	$(".anchor").each(function(){
-		$(this).attr("height",shift)
-		$(this).attr("margin-top",-shift)	
+		$(this).css("height",shift)
+		$(this).css("margin-top",-shift)	
 	})
 }
 $(window).on('resize', setshift)
 $(window).on('load', setshift)
-$(window).load(setshift)
 $(document).ready(setshift)
 
 $(window).on('scroll', function() {
-	setshift()
 
 	var window_height = $(window).height();
 	$('.target').each(function() {
 		// this function runs on each text box and checks to see if the middle of the page is inside the box.
-		var scrollMiddle = $(window).scrollTop() + (window_height/2);
+		var scrollMiddle = $(window).scrollTop() + (window_height * read_fraction);
 		elTop = $(this).offset().top;
 		elBtm = elTop + $(this).height();
 		var inView = elTop < scrollMiddle && elBtm > scrollMiddle;
 		// 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"
@@ -78,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
@@ -52,8 +52,6 @@
 		<img src="img/logo.png"/>
 	</div>
 
-<section id="main">
-	<div id="content">
 
 	<!-- - - - - - - - -
 
@@ -62,6 +60,7 @@
 
 	- - - - - - - - - -->
 
+	<div id="content">
 	<div class="words">
 
 	<p>You read/played Nicky Case's great <a href="http://ncase.me/ballot/">explainer on voting methods</a>. And you still want more!</p>
@@ -86,6 +85,7 @@ <h1 id="postmedian>">Unstrategic voting</h1>
 
 	</div>
 
+<section id="main">
 	<span class="anchor" id="a_ballot4"></span>
 	<div class="target" id="ballot4">
 	<div class="sim-ballot">
@@ -361,35 +361,20 @@ <h2 class="ballot_title" style="margin-bottom: 0.15em;">321 Strategic</h2>
 
 			<p><em>chicken dilemma with 3-2-1</em></p>
 
-	<p>Putting it all together, here's a sandbox for you to try out all the different systems and to make your own scenarios:</p>
-
 	</div>
-
+		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>			
 	</div>
+
+</section>		
+
+<div class="words">
+<p>Putting it all together, here's a sandbox for you to try out all the different systems and to make your own scenarios:</p>
+</div>
+
 </div>
-
-
 
 
-</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/election.css b/play/css/election.css
@@ -11,17 +11,18 @@ Election/Sandbox design:
 	height: 320px;
 }
 #left{
-	width:220px;
-	padding-right: 20px;
+	margin-top: 20px;
+	width:230px;
 	height: 371px;
+	overflow-y: auto;
 }
 #center{
 	width:320px;
 	height: 370px;
 }
 #right{
+	margin-top: 20px;
 	width: 220px;
-	padding-left: 20px;
 	overflow-y: auto;
 }
 #caption{

diff --git a/play/css/fixedbox.css b/play/css/fixedbox.css
@@ -1,3 +1,11 @@
+#center {
+	margin-left: 120px;
+}
+
+#right{
+	margin-left: 0px;
+}
+
 #reset, #save{
     background: #fff;
     color: #888;
@@ -19,13 +27,13 @@
 #reset{
 	position:absolute;
 	top: 330px;
-	left: 0px;
+	left: 120px;
 }
 
 #save{
 	position:absolute;
 	top: 330px;
-	left: 110px;
+	left: 230px;
 }
 
 #description_container{
@@ -54,11 +62,42 @@ textarea, input{
 #savelink{
 	position: absolute;
     top: 330px;
-    left: 220px;
+    left: 340px;
     width: 82px;
     height: 15px;
     padding: 8px;
     font-size: 12px;
 }
 
 
+#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/play/css/sandbox.css b/play/css/sandbox.css
@@ -56,4 +56,20 @@ textarea, input{
     height: 15px;
     padding: 8px;
     font-size: 12px;
+}
+
+
+#left{
+	overflow-y: visible;
+	width: 230px;
+}
+
+
+#left{
+	margin-top: 0px;
+	padding-right: 10px;
+}
+#right{
+	margin-top: 0px;
+	margin-left: 20px;
 }
diff --git a/sandbox/fixedbox.html b/sandbox/fixedbox.html
@@ -7,11 +7,31 @@
 	<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="right"></div>
 	<div id="left"></div>
+	<div id="right"></div>
 
 </body>
 </html>