Team:Hong Kong HKUST/preteam

From 2014.igem.org

(Difference between revisions)

Revision as of 03:49, 28 September 2014

HTML5 jQuery Tabs

HKUST

The Hong Kong University of Science and Technology is an international research university. Founded in 1991, HKUST is an international research university with strong ties to global thought leaders, whilst having wide-ranging connections with Mainland China. It promotes interdisciplinary studies, dedicated to educating well-rounded students to acquire a strong entrepreneurial spirit and innovative thinking at the necessary foundation and skills for the changing world. The University is housed in a hillside and waterfront complex overlooking the Clear Water Bay peninsula, less than 30 minutes' driving time from Central Hong Kong.

You can follow our activity in the most common social networks:

If you want to contact us, become a sponsor or you liked the idea, please address us using the button below:
Contact us

Student

Advisers

Hello!

@@ Line 26: / Line 26: @@
 </style>
 	<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" >
 	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
-	<script>
+<script>
 	$(document).ready(function(){
 	  $(window).scroll(function(){
@@ Line 41: / Line 45: @@
 	</script>
 	<script>
 		var on = true;
@@ Line 139: / Line 148: @@
 		</div>
-	<table style="width:50%">
-   <tr>
+<!DOCTYPE html>
-     <td>HKUST</td>
+<html>
-     <td>Students</td>
+<head>
-     <td>Advisors</td>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-   </tr>
+<meta charset=utf-8 />
-  </table>
+<title>HTML5 jQuery Tabs</title>
+<style id="jsbin-css">
+.tabs a{
+   cursor: pointer;
+  padding: 4px;
+  background: #fff;
+  color: #000;
+  border: 1px solid #fff;
+  border-bottom: 1px;
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+  margin-right: 3px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.tabs a:hover, .tabs a.active{
+  background: #666;
+  color: #fff;
+}
+.tabContent{
+  background:#fff;
+  border: 1px solid #fff;
+  margin: 1px 0;
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+</style>
+</head>
+<body>
+  <div class="tabs">
+     <a data-toggle="tab1">HKUST</a>
+     <a data-toggle="tab2">Students</a>
+     <a data-toggle="tab3">Advisers</a>
+   </div>
+<div class="tabContent">
-  <div class="pull-left" style="width:450px;text-align:justify;">
+<div id="tab1">
-<p></p>
+<table>
-<h2>
+<col width="50%">
-<span id="HKUST" class="mw-headline"> HKUST </span>
+<col width="50%">
-</h2>
-<p> </p>
-<div class="divider" style="border-bottom:1px solid #777;margin-bottom:25px"></div>
+<tr><td colspan=2>
+    <h2>HKUST</h2></td></tr>
+<tr><td>
+    <p style="font-size:16px"; align="justify">
 The Hong Kong University of Science and Technology is an international research university. Founded
 in 1991, HKUST is an international research university with strong ties to global thought leaders,
 whilst having wide-ranging connections with Mainland China. It promotes interdisciplinary studies,
 dedicated to educating well-rounded students to acquire a strong entrepreneurial spirit and innovative
-thinking â€“ the necessary foundation and skills for the changing world. The University is housed in a
+thinking at the necessary foundation and skills for the changing world. The University is housed in a
 hillside and waterfront complex overlooking the Clear Water Bay peninsula, less than 30 minutes' driving
 time from Central Hong Kong.
@@ Line 166: / Line 214: @@
 You can follow our activity in the most common social networks:
 <br>
-<div style="text-align:center;margin-top:3px;">
 <a href="">
 <img title="Facebook" alt="Facebook" src="https://static.igem.org/mediawiki/2013/9/91/1380788391_facebook_square.png">
@@ Line 179: / Line 226: @@
 <img title="Instagram" alt="Instagram" src="https://static.igem.org/mediawiki/2013/5/5f/1380788401_instagram_square_color.png">
 </a>
-</div>
+<br>
 <br>
 If you want to contact us, become a sponsor or you liked the idea, please address us using the button below:
 <br>
-<div style="text-align:center;padding:15px">
 <a class="btn btn-primary btn-large" href="mailto:vlc.biocampus.igem@gmail.com?subject='Contact from iGEM'">Contact us</a>
-</div>
-</div>
-<img class="thumbnail pull-right" style="width:450px" alt="The team" src="https://www.ab.ust.hk/hro/PubDoc/careers/common/photos/hkust.jpg">
-</div>
+ </p></td>
+<td valign="top"><img class="thumbnail pull-right" style="width:400px" alt="The team" src="https://www.ab.ust.hk/hro/PubDoc/careers/common/photos/hkust.jpg"></td>
+</tr></table>
+  </div>
+  <div id="tab2">
+    Student
+  </div>
+  <div id="tab3">
+    <table width="100%" height="171" border="10" align="center" cellpadding="0" cellspacing="0"  class="curvedEdges">
+<tr><td>Advisers<br><br>Hello!</td></tr>
+</table>
+  </div>
 </div>
-</div>
+<script id="jsbin-javascript">
+;(function($){
+  $.fn.html5jTabs = function(options){
+    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));
-	</body>
+$(function() {
+  $(".tabs a").html5jTabs();
+});
+</script>
+</body>
 </html>