Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

313 lines (294 sloc) 10.054 kb
<!DOCTYPE html>
<html lang="en" class="csstransforms csstransforms3d csstransitions">
<head>
<title>
Hacking the Gender Gap Timeline
</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap.min.css" type="text/css">
<!-- My files -->
<link rel="stylesheet" href="assets/style.css" type="text/css">
<script type="text/javascript" src="data.js"></script>
<!-- jQuery -->
<!-- jQuery for offline use -->
<!--<script type="text/javascript" src="jquery-1.7.1.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Bootstrap JS -->
<!-- NB: has to be loaded *after* jQuery -->
<script type="text/javascript" src="assets/bootstrap.min.js"></script>
<!-- Isotope -->
<!-- Isotope for offline use -->
<!--<script src="jquery.isotope.js" type="text/javascript"></script>-->
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<!-- to get iframe to work on Hactory website -->
<style type="text/css">
.container {
width: 900px;
}
</style>
</head>
<body>
<!-- to get iframe to work on Hactory website -->
<!-- <div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Hacking the Gender Gap: Timeline</a>
<ul class="nav pull-right">
<li><a href="http://www.thehacktory.org/">The Hacktory</a></li>
</ul>
</div>
</div>
</div> -->
<div class="container">
<!-- sorting button -->
<div class="row-fluid">
<div class="span12">
<div id="sort-by" class="btn-group pull-right">
<a href="#year" class="btn">Order by Year</a>
<a href="#age" class="btn">Order by Age</a>
</div>
</div>
</div>
<!-- event filters -->
<div class="row-fluid">
<div class="span12">
<div id="event_filters" class="btn-group pull-right">
<button class="btn btn-small active show-all" href="#" data-filter="">Show all events</button>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<!-- main content -->
<div class="row-fluid">
<!-- tag filters -->
<div class="span2">
<div id="tag_filters" class="nav nav-tabs nav-stacked pull-left">
<button class="btn active show-all" href="#" data-filter="">Show all tags</button>
</div>
</div>
<!-- positive experiences column -->
<div id="pos_ex" class="experiences column span5">
<h3 class="well well-small">
Positive Experiences
</h3>
<div class="row-fluid">
<div id="c1" class="container isotope span12"></div>
</div>
</div>
<!-- negative experiences column -->
<div id="neg_ex" class="experiences column span5">
<h3 class="well well-small">
Negative Experiences
</h3>
<div class="row-fluid">
<div id="c2" class="container isotope span12"></div>
</div>
</div>
</div>
</div>
</div>
</div><script type="text/javascript">
// variables for Isotope containers for positive and negative experiences
var $c1 = $('#c1');
var $c2 = $('#c2');
// set up 'Positive Experiences' column
$c1.isotope({
itemSelector: '.timepoint',
layoutMode: 'straightDown',
filter: '*'
});
// set up 'Negative Experiences' column
$c2.isotope({
itemSelector: '.timepoint',
layoutMode: 'straightDown',
filter: '*'
});
// set up sorting for Pos Exp column...
$c1.isotope({
getSortData : {
year : function ( $elem ) {
return parseInt($elem.find('.year').text());
},
age : function ( $elem ) {
return parseInt($elem.find('.age').text());
}
}
});
// set up sorting for Neg Exp column...
$c2.isotope({
getSortData : {
year : function ( $elem ) {
return parseInt($elem.find('.year').text());
},
age : function ( $elem ) {
return parseInt($elem.find('.age').text());
}
}
});
// do sort
$('#sort-by a').click(function(){
// get href attribute, minus the '#'
var sortName = $(this).attr('href').slice(1);
$c1.isotope({ sortBy : sortName });
$c2.isotope({ sortBy : sortName });
// manually control active state of button because there seems to be a conflict between bootstrap.js
// and the version of Modernizr loaded by Isotope
if (!($(this).hasClass('active'))) {
$('#sort-by a').removeClass('active');
$(this).addClass('active');
}
return false;
});
// parse JSON data and add divs for each experience into DOM
var tags = {};
var evnts = {};
var selectedTag = "";
var selectedEvent = "";
var newPosItems;
var newNegItems;
// load experiences .json file
// $.getJSON() is async, so data munging must take place within callback
$.getJSON('data.json', function(result, status) {
data = result["Experiences"];
$.each(data, function(i) {
pol = data[i].Polarity;
age = data[i].Age;
if (age.length === 0) {
age = "unknown";
}
gender = data[i].Gender;
txt = data[i].TimelineText;
// save tags with commas for use in tooltip; replace with '(none)' if none
tagsWithCommas = data[i].Tag;
if (tagsWithCommas.length === 0) {
tagsWithCommas = "(none)";
}
// remove commas from tag list
tag = data[i].Tag.replace(/,/g, '');
tmpTags = tag.split(' ');
// cycle through tags to add any not encountered yet to tags Object (= JavaScript approximation of Set datatype)
// tags Object is used for generating tag filter buttons dynamically
for(j = 0; j < tmpTags.length; j++) {
if (!(tmpTags[j] in tags)) {
if(tmpTags[j] != "") {
tags[tmpTags[j]] = true;
}
}
};
// cycle through tags to add any not encountered yet to evnts Object
// evnts Object is used for generating event filter buttons dynamically
evnt = data[i].Event.replace(/ /g, '_');
if (!(evnt in evnts)) {
evnts[evnt] = true;
}
media = data[i].Media;
// extract year from timestamps
rawYr = data[i].EventDate;
rawYr2 = rawYr.replace('1/1/', '');
yr = rawYr2.replace(' 0:00:00', '');
var yrStr = "";
var ageStr = "";
// replace empty years and ages with 'unknown' for experience 'card' chips in the corners
if (yr.length === 0) {
yrStr = "unknown";
}
else {
yrStr = yr;
}
if (age === "unknown") {
ageStr = age;
}
else {
ageStr = "Age " + age;
}
if (pol === "positive") {
// create a 'card' for a positive experience
newPosItems = newPosItems + '\
<div class="row-fluid">\
<div class="experience alert alert-success span12 timepoint positive ' + tag + ' ' + evnt +'">\
<div class="row-fluid">\
<div class="span1">\
<i class="tooltips icon-tags" data-toggle="tooltip" title="' + tagsWithCommas.replace('_', ' ') + '"></i><br/>\
<i class="tooltips icon-info-sign" data-toggle="tooltip" title="' + evnt.replace('_', ' ') + '"></i>\
</div>\
<div class="span9 experience-main">\
<p>' + txt + '</p>\
</div>\
</div>\
<span class="year">' + yrStr + '</span>\
<span class="ageStr">' + ageStr + '</span><span class="age" style="display:none;">' + age + '</span>\
</div>\
</div>';
}
else {
// create a 'card' for a negative experience
newNegItems = newNegItems + '\
<div class="row-fluid">\
<div class="experience alert alert-error span12 timepoint negaitve ' + tag + ' ' + evnt +'">\
<div class="row-fluid">\
<div class="span1">\
<i class="tooltips icon-tags" data-toggle="tooltip" title="' + tagsWithCommas.replace('_', ' ') + '"></i><br/>\
<i class="tooltips icon-info-sign" data-toggle="tooltip" title="' + evnt.replace('_', ' ') + '"></i>\
</div>\
<div class="span9 experience-main">\
<p>' + txt + '</p>\
</div>\
</div>\
<span class="year">' + yrStr + '</span>\
<span class="ageStr">' + ageStr + '</span><span class="age" style="display:none;">' + age + '</span>\
</div>\
</div>';
}
});
// setting up tag filters
for (i in tags) {
$('#tag_filters').append("<button class='btn btn-small' href='#' data-filter='." + i + "'>" + i.replace('_', ' ') + "</button>");
};
//setting up event filters
for (i in evnts) {
$('#event_filters').append("<button class='btn btn-small href='#' data-filter='." + i + "'>" + i.replace('_', ' ') + "</button>");
};
// handle tag selections, with clicking an active tag serving to toggle back to all tags
$('#tag_filters button').click(function() {
selectedTag = $(this).attr('data-filter');
// toggle back to all tags shown
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#tag_filters .show-all').addClass('active');
selectedTag = "";
}
else {
$('#tag_filters button').removeClass('active');
$(this).addClass('active');
}
$c1.isotope({filter: selectedTag + selectedEvent});
$c2.isotope({filter: selectedTag + selectedEvent});
return false;
});
// handle event selections, with clicking an active tag serving to toggle back to all tags
$('#event_filters button').click(function() {
selectedEvent = $(this).attr('data-filter');
// toggle back to all events shown
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$('#event_filters .show-all').addClass('active');
selectedEvent = "";
}
else {
$('#event_filters button').removeClass('active');
$(this).addClass('active');
}
$c1.isotope({filter: selectedTag + selectedEvent});
$c2.isotope({filter: selectedTag + selectedEvent});
return false;
});
// add experience 'cards' to Isotope container
$('#c1').isotope( 'insert', $(newPosItems) );
$('#c2').isotope( 'insert', $(newNegItems) );
// add tooltips for tags and event
$('.tooltips').tooltip({trigger: "hover"});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.