NHD Website

by Drew Christensen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
  <div class="jumbotron text-center" id="top">
    <b><i>Star Trek</i></b>:
    <br> Taking a Stand Against
    <br> Racism, Sexism, and Militarism
  </div>
  <button id="prev" class="btn btn-default">
    <span class="glyphicon glyphicon-menu-left"></span> Previous
  </button>
  <button id="next" class="btn btn-default">
    Next <span class="glyphicon glyphicon-menu-right"></span>
  </button>
  <ul class="nav nav-tabs" role="tablist">
    <li><a href="#thesis" id="hometab">Thesis</a></li>
    <li><a href="#about">About The Show</a></li>
    <li><a href="#racism">Racism</a></li>
    <li><a href="#sexism">Sexism</a></li>
    <li><a href="#military">Militarism</a></li>
  </ul>
  <div class="dropdown nav" id="navdropdown">
    <a class="dropdown-toggle" type="button" data-toggle="dropdown">
    Menu
    <div class="caret"></div>
    &thinsp;
    </a>
    <ul class="dropdown-menu">
      <li><a href="#thesis">Thesis</a></li>
      <li><a href="#about">About the Show</a></li>
      <li><a href="#racism">Racism</a></li>
      <li><a href="#sexism">Sexism</a></li>
      <li><a href="#military">Militarism</a></li>
    </ul>
  </div>
  <div class="tab-content">
    <div class="tab-pane active" id="thesis">
      <h2>
        Thesis
      </h2>
      <ul class="image-list">
        <li>
          <div>
            The first show of its kind on American television, Star Trek: The Original Series (TOS) took a stand against the sexist and racist standards of the time. Originally aired from 1966-1969, the show featured the country’s first televised interracial kiss
            and depicted women in powerful positions that they had never been seen in before. Women were seen in Star Trek as equals, some even giving orders and leading missions. The unification of...

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  font-family: "Verdana", sans-serif;
}

.jumbotron {
  font-size: 2em;
  font-family: "Georgia", serif;
}

.jumbotron b i {
  font-family: "Georgia", serif;
  font-size: 1.5em;
  letter-spacing: 0.1em;
}

.nav {
  font-size: 1.3em;
}

a.dropdown-toggle {
  text-decoration: none;
  color: #000;
  background-color: #fff;
  border-radius: 0.5em;
  padding: 0.5em 0.4em 0.5em 1em;
}

a.dropdown-toggle:hover {
  background-color: #ddd;
}

div.dropdown#navdropdown {
  display: none;
  position: relative;
}

.nav-tabs > li {
  float: none;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.nav-tabs {
  text-align: center;
}

div.tab-pane {
  font-size: 1em;
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
  text-align: justify;
}

ul.nav > li > a {
  padding: 0.3em 0.5em 0.5em 0.5em;
  border-radius: 0.5em 0.5em 0em 0em;
}

h2 {
  margin: 5px 0px 15px 0px;
  text-align: center;
}

@media (max-width: 55em) {
  div.dropdown#navdropdown {
    display: block;
    position: relative;
    margin: auto;
    width: 100px;
  }
  .nav-tabs {
    display: none;
  }
}

button#next {
  float: right;
}

button#prev {
  float: left;
}

a#top {
  float: center;
}

.header {
  position: absolute;
  right: 0;
  left: 0;
  background-color: #efefef;
  padding: 0.5em;
  text-align: center;
}

.footer {
  position: absolute;
  background-color: #efefef;
  padding: 0.5em;
  text-align: center;
  bottom: 0;
  width: 100%;
}

.wrapper {
  min-height: 100%;
  position: relative;
}

.tab-content {
  padding-bottom: 80px;
}

ul.image-list {
  list-style-type: none;
  padding-left: 0;
}

ul.image-list>li {
  display: table-row;
  border-collapse: separate;
  border-spacing: 10px;
}

ul.image-list>li>img {
  display: table-cell;
  vertical-align: top;
  margin: 10px;
}

iframe {
  display: block;
  margin: auto;
}

ul.image-list>li>div {
  display: table-cell;
  vertical-align: top;
  margin: 10px;
  padding:...

JavaScript

var list = ["#thesis", "#about", "#racism", "#sexism", "#military"];
var current = 0;
$("ul.nav li").addClass("nav-item");
$("ul.nav li a").addClass("nav-link");
$("ul.nav li a").attr("data-toggle", "tab");
$("ul.nav li a").attr("role", "tab");
$("ul.nav li a").click(function(e) {
  e.preventDefault();
  $(this).tab("show");
  current = list.indexOf($(this).attr("href"));
});

function activateTab(tab) {
  $('.nav-tabs a[href="' + list[tab] + '"]').tab('show');
  current = tab;
};

function next() {
  current++;
  if (current > list.length - 1) {
    current = list.length - 1;
  }
  activateTab(current);
}

function prev() {
  current--;
  if (current < 0) {
    current = 0;
  }
  activateTab(current);
}
$("button#next").click(function() {
  next();
});
$("button#prev").click(function() {
  prev();
});
$("ul.dropdown-menu li a").click(function(e) {
  e.preventDefault();
  activateTab(list.indexOf($(this).attr("href")));
});
$("#hometab").tab("show");