Skip to content

Instantly share code, notes, and snippets.

@anna-is-cute

anna-is-cute/Classy.html

Last active January 2, 2016 18:48
Show Gist options
  • Save anna-is-cute/8345642 to your computer and use it in GitHub Desktop.
Save anna-is-cute/8345642 to your computer and use it in GitHub Desktop.
Download ZIP
Classy
Raw
Classy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Time to Class Up</title>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
<style>
iframe {
width: 100%;
height: 450px;
border: 1px solid #888888;
}
h2 {
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Class Up <small>Welcome back.</small></h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>
<span onclick="toggleDisplay('rain', this);" class="pull-left glyphicon glyphicon-resize-small"></span>
<span onclick="toggleFrame('rain');">Rain</span>
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<iframe id="rain" src="http://raining.fm"></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>
<span onclick="toggleDisplay('jazz', this);" class="pull-left glyphicon glyphicon-resize-small"></span>
<span onclick="toggleFrame('jazz');">Jazz</span>
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<iframe id="jazz" src="http://www.listenonrepeat.com/watch/?v=HMnrl0tmd3k"></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>
<span onclick="toggleDisplay('fire', this);" class="pull-left glyphicon glyphicon-resize-small"></span>
<span onclick="toggleFrame('fire');">Fire</span>
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<iframe id="fire" src="http://www.listenonrepeat.com/watch/?v=DIx3aMRDUL4"></iframe>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<h2>
<span onclick="toggleDisplay('buzz', this);" class="pull-left glyphicon glyphicon-resize-small"></span>
<span onclick="toggleFrame('buzz');">Buzz</span>
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<iframe id="buzz" src="http://www.coffitivity.com"></iframe>
</div>
</div>
</div>
<script>
function toggleDisplay(name, span) {
var thing = document.getElementById(name);
if (thing.style.display !== "none") { // hiding
thing.style.display = "none";
span.classList.add("glyphicon-resize-full");
span.classList.remove("glyphicon-resize-small");
} else { // showing
thing.style.display = "inline";
span.classList.add("glyphicon-resize-small");
span.classList.remove("glyphicon-resize-full");
}
}
var things = new Object();
function toggleFrame(iframeName) {
var iframe = document.getElementById(iframeName);
if (iframe.getAttribute("src") === "") {
iframe.setAttribute("src", things[iframe.getAttribute("id")]);
iframe.style.display = "inline";
} else {
things[iframe.getAttribute("id")] = iframe.getAttribute("src");
iframe.setAttribute("src", "");
iframe.style.display = "none";
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment