Team:Hong Kong HKUST/astrid

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
 +
<head>
 +
<style>
 +
      .pull-right{
 +
      float: right}
 +
 
 +
  .thumbnail {
 +
    border: 1px solid #ddd;
 +
    border-radius: 4px;
 +
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
 +
    display: block;
 +
    line-height: 20px;
 +
    padding: 4px;
 +
    transition: all 0.2s ease-in-out 0s;
 +
}
 +
    img {
 +
    vertical-align: middle;}
 +
 +
element.style {
 +
    text-align: justify;
 +
    width: 450px;
 +
}
 +
.pull-left {
 +
    float: left;}
 +
.tabs a{
.tabs a{
   cursor: pointer;
   cursor: pointer;
Line 17: Line 42:
   padding: 5px;
   padding: 5px;
}
}
 +
</style>
-
;(function($){
+
<link rel="stylesheet" href="https://2014.igem.org/wiki/index.php?title=Template:Team:Hong_Kong_HKUST/indexpage.css&action=raw&ctype=text/css" type="text/css" >
-
  $.fn.html5jTabs = function(options){
+
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
-
    return this.each(function(index, value){
+
-
      var obj = $(this),
+
-
      objFirst = obj.eq(index),
+
-
      objNotFirst = obj.not(objFirst);
+
-
     
+
-
      $("#" +  objNotFirst.attr("data-toggle")).hide();
+
-
      $(this).eq(index).addClass("active");
+
-
     
+
-
      obj.click(function(evt){
+
-
       
+
-
        toggler = "#" + obj.attr("data-toggle");
+
-
        togglerRest = $(toggler).parent().find("div");
+
-
       
+
-
        togglerRest.hide().removeClass("active");
+
-
        $(toggler).show().addClass("active");
+
-
       
+
-
        $(this).parent("div").find("a").removeClass("active");
+
-
$(this).addClass("active");
+
-
        return false;
+
-
      });
+
-
    });
+
-
  };
+
-
}(jQuery));
+
-
$(function() {
+
<script>
-
  $(".tabs a").html5jTabs();
+
$(document).ready(function(){
-
});
+
  $(window).scroll(function(){
 +
var scrollTop = $(window).scrollTop();
 +
if (scrollTop > 49) {
 +
$('#menu').addClass('fixed');
 +
} else {
 +
$('#menu').removeClass('fixed');
 +
}
 +
  });
 +
});
 +
 
 +
</script>
 +
 +
<script>
 +
var on = true;
 +
var myVar = setInterval(function(){ if(on) {slides()}on=true;},3000);
 +
 
 +
function slides(i) {
 +
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
 +
  document.getElementsByClassName("slide_pic")[2].style.width="100%";
 +
  var slide = document.getElementsByClassName("slide_pic")[0];
 +
  document.getElementById("slide").appendChild(slide);
 +
  if(i) {
 +
  on = false;
 +
  }
 +
}
 +
function back_slide(i) {
 +
  document.getElementsByClassName("slide_pic")[1].style.width="0px";
 +
  document.getElementsByClassName("slide_pic")[0].style.width="100%";
 +
  var slide = document.getElementsByClassName("slide_pic")[4];
 +
  var slide2 = document.getElementsByClassName("slide_pic")[0];
 +
  document.getElementById("slide").insertBefore(slide,slide2);
 +
  if(i) {
 +
  on = false;
 +
  }
 +
}
 +
</script>
 +
</head>
 +
 
 +
<body>
 +
<div id='nav_container'>
 +
<nav>
 +
 +
<ul id="menu">
 +
<li><a href="#">Home</a></li>
 +
        <li><a href="#">Team</a>
 +
        <!-- First Tier Drop Down -->
 +
        <ul>
 +
            <li><a href="#">Members</a></li>
 +
            <li><a href="#">Advisers</a></li>
 +
            <li><a href="#">Instructor</a></li>
 +
        </ul>       
 +
        </li>
 +
        <li><a href="#">Project</a>
 +
        <!-- First Tier Drop Down -->
 +
        <ul>
 +
            <li><a href="#">Main Project</a>
 +
<ul>
 +
                <li><a href="#">Overview</a></li>
 +
                <li><a href="#">Module one </a></li>
 +
                <li><a href="#">Module two</a></li>
 +
<li><a href="#">Data</a></li>
 +
<li><a href="#">Characterization</a></li>
 +
            </ul></li>
 +
            <li><a href="#">Side Project</a>
 +
<ul>
 +
                <li><a href="#">Overview</a></li>
 +
                <li><a href="#">Parts</a></li>
 +
                <li><a href="#">Catalogue</a></li>
 +
<li><a href="#">Feature pages</a></li>
 +
            </ul></li>
 +
       
 +
        </ul>
 +
        </li>
 +
        <li><a href="#">Human Practice</a>
 +
<ul>
 +
                <li><a href="#">Overview</a></li>
 +
                <li><a href="#">Start up kit</a>
 +
<ul>
 +
<li><a href="#">Interview</a></li>
 +
<li><a href="#">Report</a></li>
 +
<li><a href="#">Database</a></li>
 +
</ul></li>
 +
                <li><a href="#">Talks</a></li>
 +
<li><a href="#">Outreach</a></li>
 +
            </ul></li>
 +
        <li><a href="#">wetlab</a>
 +
<ul>
 +
<li><a href="#">Protocol</a></li>
 +
<li><a href="#">Notebook</a></li>
 +
<li><a href="#">Safety</a></li>
 +
</ul></li>
 +
        <li><a href="#">Achievement</a>
 +
<ul>
 +
<li><a href="#">Medal Requirement</a></li>
 +
<li><a href="#">Deliverable</a></li>
 +
</ul></li>
 +
</ul>
 +
 +
</nav>
 +
</div>
 +
<h1> </h1>
 +
<!-- ================ do not touch any thing above this, dont even think about it =========================-->
 +
 +
 
 +
<div id="content_container">
 +
<div class= "banner_area">
 +
<img src= 'banner_mod.png' />
 +
 
 +
</div>
<!DOCTYPE html>
<!DOCTYPE html>
Line 54: Line 166:
<meta charset=utf-8 />
<meta charset=utf-8 />
<title>HTML5 jQuery Tabs</title>
<title>HTML5 jQuery Tabs</title>
-
</head>
 
<body>
<body>
   <div class="tabs">
   <div class="tabs">
Line 91: Line 202:
    
    
</div>
</div>
 +
</body>
 +
</html>
 +
</body>
</body>
</html>
</html>

Revision as of 13:42, 23 September 2014

HTML5 jQuery Tabs
Tab1 Tab2 Tab3 Tab4 Tab5
Tab1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget sollicitudin nibh. Duis semper, diam sed iaculis dictum, libero erat molestie dui, ac suscipit felis leo sed ipsum.

Tab2

Donec pellentesque sapien neque, ac lobortis erat facilisis quis. Praesent faucibus arcu eros. Proin id tortor euismod, vulputate neque id, placerat nunc.

Tab3

Duis justo mi, egestas euismod placerat a, eleifend vitae lacus. Integer non odio nec libero lacinia vulputate. Phasellus ante lectus, congue vel volutpat vitae, dictum quis est.

Tab4

Nulla varius sit amet augue vel consequat. Aenean faucibus vehicula interdum. Integer eleifend, lectus eget vulputate feugiat, nibh nulla congue ipsum, eu mattis tortor nulla vitae diam. Maecenas rutrum risus non libero ullamcorper, nec vehicula sapien tincidunt.

Tab5

Suspendisse vulputate ornare dui, sed luctus est mattis nec. Curabitur ut dolor eleifend, vulputate purus et, ullamcorper tortor. In posuere ultricies lectus. Vestibulum vitae odio ut est sagittis porta.

</body> </html>

Retrieved from "http://2014.igem.org/Team:Hong_Kong_HKUST/astrid"