Team:Virginia/Notebook

From 2014.igem.org

(Difference between revisions)
(Replaced content with "<html> <head> </head> <body> <iframe src="http://files.flipsnack.com/iframe/embed.html?hash=fdc9eni5&wmode=window&bgcolor=EEEEEE&t=1413149910" width="640" height="385" seam...")
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
 
-
<style>
 
-
/* ---------- Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui ---------- */
 
-
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
 
-
table { border-collapse:collapse; border-spacing:0 }
 
-
fieldset, img { border:0 }
 
-
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
 
-
ol, ul, li { list-style:none }
 
-
caption, th { text-align:left }
 
-
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
 
-
q:before, q:after { content:''}
 
-
strong { font-weight:bold }
+
</head>
-
em { font-style:italic }
+
-
a img { border:none } /* Gets rid of IE's blue borders */
+
-
sup { font-size: 50%; }
 
-
 
-
a, a:hover { text-decoration: none; }
 
-
 
-
 
-
body {
 
-
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 
-
    font-weight: 100%;
 
-
    font-size: 12px;
 
-
    line-height: 1.4em;
 
-
    color: #3d3e41;
 
-
    margin: 50px 0; /* Temporary margin to push down the form */
 
-
}
 
-
 
-
#tabs {
 
-
font-size: 90%;
 
-
margin: 20px 0;
 
-
width: 520px;
 
-
margin: 0 auto;
 
-
 
-
}
 
-
#tabs ul {
 
-
float: left;
 
-
background: #E3FEFA;
 
-
width: 100%;
 
-
padding-top: 4px;
 
-
}
 
-
#tabs li {
 
-
margin-left: 8px;
 
-
list-style: none;
 
-
}
 
-
* html #tabs li {
 
-
display: inline; /* ie6 double float margin bug */
 
-
}
 
-
#tabs li,
 
-
#tabs li a {
 
-
float: left;
 
-
}
 
-
#tabs ul li a {
 
-
text-decoration: none;
 
-
padding: 8px;
 
-
color: #0073BF;
 
-
font-weight: bold;
 
-
}
 
-
#tabs ul li.active {
 
-
background: #CEE1EF url(img/nav-right.gif) no-repeat right top;
 
-
}
 
-
#tabs ul li.active a {
 
-
background: url(img/nav-left.gif) no-repeat left top;
 
-
color: #333333;
 
-
}
 
-
#tabs div {
 
-
background: #CEE1EF;
 
-
clear: both;
 
-
padding: 20px;
 
-
min-height: 200px;
 
-
}
 
-
#tabs div h3 {
 
-
text-transform: uppercase;
 
-
margin-bottom: 10px;
 
-
letter-spacing: 1px;
 
-
 
-
#tabs div p {
 
-
line-height: 150%;
 
-
}
 
-
</style>
 
-
</head>
 
<body>
<body>
-
<div id="tabs">
+
<iframe src="http://files.flipsnack.com/iframe/embed.html?hash=fdc9eni5&wmode=window&bgcolor=EEEEEE&t=1413149910" width="640" height="385" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
-
 
+
-
    <div id="tab-1">
+
-
        <h3>Tab 1</h3>
+
-
        <p>Some content</p>
+
-
        <iframe width="420" height="150" src="http://www.youtube.com/embed/0FWL8ljUSv0" frameborder="0" allowfullscreen></iframe>
+
-
    </div>
+
-
 
+
-
    <div id="tab-2">
+
-
        <h3>Tab 2</h3>
+
-
        <p>Some content</p>
+
-
        <iframe width="512" height="376" src="http://video.pbs.org/viralplayer/2365298526" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" seamless></iframe>
+
-
    </div>
+
-
 
+
-
    <div id="tab-3">
+
-
        <h3>Tab 3</h3>
+
-
        <p>Some content</p>
+
-
        <iframe width="420" height="150" src="http://www.youtube.com/embed/0FWL8ljUSv0" frameborder="0" allowfullscreen></iframe>
+
-
    </div>
+
-
 
+
-
    <div id="tab-4">
+
-
        <h3>Tab 4</h3>
+
-
        <p>Some content</p>
+
-
        <iframe width="420" height="150" src="http://www.youtube.com/embed/0FWL8ljUSv0" frameborder="0" allowfullscreen></iframe>
+
-
    </div>
+
-
 
+
-
<ul>
+
-
    <li><a href="#tab-1">Tab One</a></li>
+
-
    <li><a href="#tab-2">Tab Two</a></li>
+
-
    <li><a href="#tab-3">Tab Three</a></li>
+
-
    <li><a href="#tab-4">Tab Four</a></li>
+
-
</ul>
+
-
 
+
-
</div> <!-- end tabs -->
+
-
 
+
-
<script>
+
-
$(document).ready(function() {
+
-
 
+
-
    var $tabs = $('#tabs div');
+
-
    $tabs.hide();
+
-
    var index = Math.floor($tabs.length * Math.random());
+
-
    $tabs.eq(index).show();
+
-
    $('#tabs ul li').eq(index).addClass('active');
+
-
    $('#tabs ul li a').click(function() { //When any link is clicked
+
-
        $('#tabs ul li').removeClass('active'); // Remove active class from all links
+
-
        $(this).parent().addClass('active'); //Set clicked link class to active
+
-
        var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
+
-
        $('#tabs div').hide(); // Hide all divs
+
-
        $(currentTab).show(); // Show div with id equal to variable currentTab
+
-
        return false;
+
-
    });
+
-
});
+
-
</script>
+
</body>
</body>
</html>
</html>

Revision as of 22:40, 12 October 2014