Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout3 #12

Merged
merged 5 commits into from
Aug 28, 2017
Merged

Layout3 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
031dd09
small fix - updates window size for nav anchors. added feature to al…
paretoman Aug 25, 2017
8bac598
layout: small fix
paretoman Aug 28, 2017
27de751
layout. small fixes
paretoman Aug 28, 2017
4daad38
layout. centered vertically. nav inside iframe.
paretoman Aug 28, 2017
0fa9c93
small fixes
paretoman Aug 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions css/slides.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ div.target {
}

#main {
left: 500px;
max-width: 700px;
margin-left: 500px;
position:relative;
right: 20px;
}

#main div.target {
Expand Down Expand Up @@ -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%;
}

Expand All @@ -63,4 +63,4 @@ div.target {
height: 400px;
margin-top: -400px;
visibility: hidden;
}
}
29 changes: 20 additions & 9 deletions js/slides.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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")
}
}
}

Expand Down
35 changes: 10 additions & 25 deletions newer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,6 @@
<img src="img/logo.png"/>
</div>

<section id="main">
<div id="content">

<!-- - - - - - - - -

Expand All @@ -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>
Expand All @@ -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">
Expand Down Expand Up @@ -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>

Expand Down
7 changes: 4 additions & 3 deletions play/css/election.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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{
Expand Down
45 changes: 42 additions & 3 deletions play/css/fixedbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
#center {
margin-left: 120px;
}

#right{
margin-left: 0px;
}

#reset, #save{
background: #fff;
color: #888;
Expand All @@ -19,13 +27,13 @@
#reset{
position:absolute;
top: 330px;
left: 0px;
left: 120px;
}

#save{
position:absolute;
top: 330px;
left: 110px;
left: 230px;
}

#description_container{
Expand Down Expand Up @@ -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;
}


16 changes: 16 additions & 0 deletions play/css/sandbox.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
22 changes: 21 additions & 1 deletion sandbox/fixedbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down