Team:Heidelberg/DesignTest

From 2013.igem.org

(Difference between revisions)
m
 
(48 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:Heidelberg/Templates/StartPage|DesignTest|Navi_left_Team|1}}
+
__NOTOC__
-
{{:Team:Heidelberg/Templates/Gelpicture|9em|wiki/images/f/ff/IGem_Team_Heidelberg_Logo.gif|bli|bla|blub}}
+
<html>
<html>
 +
<!-- Warning! Although the jQuery loaded is declared in the framework code as "latest" it is version 1.4.2!
 +
Hence we need to load it ourselves
 +
-->
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 +
<link rel="stylesheet" href="https://2013.igem.org/Team:Heidelberg/Stylesheet?action=raw&ctype=text/css" type="text/css" />
-
<head>
+
<link rel="stylesheet" href="https://2013.igem.org/Team:Heidelberg/Stylesheet/Slider?action=raw&ctype=text/css" type="text/css" />
-
<link rel="stylesheet" href="https://2013.igem.org/Team:Heidelberg/Stylesheet/Slider?action=raw&ctype=text/css" type="text/css">
+
 
-
+
<script type="text/javascript">
-
<script src="https://2013.igem.org/Team:Heidelberg/JS?action=raw&ctype=text/javascript"></script>
+
<!--
 +
 
 +
      var cssCalcExpression = (function() {
 +
 
 +
    var vendorPrefixes = new Array('-o-','-moz-','-webkit-', ''),
 +
    retrievedValue,
 +
    prefix;
 +
 
 +
  while (vendorPrefixes.length > 0)
 +
  {
 +
  prefix = vendorPrefixes.pop();
 +
  retrievedValue = $(
 +
  "<span style='display:none;width:"  
 +
  + prefix
 +
  + "calc(10px)'></span>" ).appendTo( "body" ).css('width' );
 +
  if (retrievedValue === '10px') {
 +
return function(expression, defaultValue) {
 +
return prefix + 'calc(' + expression + ')';
 +
};
 +
 
 +
}
 +
  }
 +
 
 +
  return function(expression, defaultValue) {
 +
return defaultValue ? defaultValue : '';
 +
};
 +
}());
 +
 
 +
 
 +
window.onresize = function() {
 +
rotateMenu("menu-team", getMenuAngle(2.2));
 +
rotateMenu("menu-project", getMenuAngle(1.2));
 +
rotateMenu("menu-notebook", getMenuAngle(0.2));
 +
rotateMenu("menu-parts", getMenuAngle(0));
 +
rotateMenu("menu-modelling", getMenuAngle(0.2), -1);
 +
rotateMenu("menu-human", getMenuAngle(1.2), -1);
 +
rotateMenu("menu-safety", getMenuAngle(2.2), -1);
 +
}
 +
 
 +
//NEW. Merged existing window.onload() with slider initialization
 +
 
 +
(function() {
 +
 
 +
 
 +
                //alert("jQuery Version: " + jQuery.fn.jquery);
 +
 
 +
 
 +
 
 +
$(window).load(function() {
 +
 
 +
 
 +
(function(){
 +
try {
 +
var drop_lists = document.getElementsByClassName("drop-navi-left");
 +
for (var i = 0; i < drop_lists.length; i++) {
 +
var item = drop_lists[i];
 +
while (item.tagName !== "UL") {
 +
var item = item.nextSibling;
 +
}
 +
item.style.display = "none";
 +
}
 +
 +
var navbar = document.getElementById("navigation-bar");
 +
if (navbar) {
 +
var navi_links = navbar.getElementsByTagName("A");
 +
for (var i = 0; i < navi_links.length; i++) {
 +
if (document.documentURI.indexOf(navi_links[i].href) !== -1) {
 +
navi_links[i].style.color = "#FFCC00";
 +
var element = navi_links[i];
 +
while (element.parentNode.tagName !== "DIV") {
 +
var element = element.parentNode;
 +
if (element.tagName == "LI") element.style.display = "list-item";
 +
else element.style.display = "block";
 +
}
 +
var element = navi_links[i].parentNode;
 +
if (element.className == "drop-navi-left") {
 +
while (element.tagName !== "UL") {
 +
var element = element.nextSibling;
 +
}
 +
element.style.display = "block";
 +
}
 +
break;
 +
}
 +
}
 +
 
 +
}
 +
 +
 
 +
}
 +
catch (e) {
 +
//alert(e);
 +
}
 +
 
 +
})();
 +
 +
 
 +
 
 +
var $flexslider = $('.flexslider');
 +
 +
//only do when there is any slider on the page
 +
if ($flexslider) {
 +
 
 +
 
 +
(function() {
 +
var linkelem;
-
<!-- Place in the <head>, after the three links -->
+
//load the slider specific CSS
-
<script type="text/javascript" charset="utf-8">
+
/*linkelem = document.createElement('link');
 +
linkelem.setAttribute("rel", "stylesheet");
 +
linkelem.setAttribute("type", "text/css");
 +
linkelem.setAttribute("href", "https://2013.igem.org/Team:Heidelberg/Stylesheet/Slider?action=raw&ctype=text/css");
 +
document.getElementsByTagName("head")[0].appendChild(linkelem);*/
 +
//add favorite icon if specified
 +
var faviconURL =""; //favicon.ico
 +
if (faviconURL){
 +
linkelem = document.createElement('link');
 +
linkelem.setAttribute("rel", "shortcur icon");
 +
linkelem.setAttribute("type", "image/x-icon");
 +
linkelem.setAttribute("href", faviconURL);
 +
document.getElementsByTagName("head")[0].appendChild(linkelem);
 +
}
 +
 +
 +
})();
 +
 +
//load the slider specific javascript code
 +
$.getScript("https://2013.igem.org/Team:Heidelberg/JS?action=raw&ctype=text/javascript", function(data, textStatus, jqxhr) {
 +
 +
//alert(textStatus);
 +
    $flexslider.flexslider({
 +
      animation: "slide",
 +
      animationLoop: true,
 +
      itemWidth: 110,
 +
      itemMargin: 0,
 +
      minItems: 1,
 +
      maxItems: 3
 +
    });
 +
 +
    });
 +
}
-
(function() {
 
-
debugger;
 
-
  // store the slider in a local variable
 
-
  var $window = $(window),
 
-
      flexslider;
 
-
 
-
  // tiny helper function to add breakpoints
 
-
  function getGridSize() {
 
-
    return (window.innerWidth < 600) ? 2 :
 
-
          (window.innerWidth < 900) ? 3 : 4;
 
-
  }
 
-
 
 
-
 
-
  $window.load(function() {
 
-
    $('.flexslider').flexslider({
 
-
      animation: "slide",
 
-
      animationLoop: true,
 
-
      itemWidth: 300,
 
-
      itemMargin: 0,
 
-
      minItems: 1,//getGridSize(), // use function to pull in initial value
 
-
      maxItems: 3,//getGridSize(), // use function to pull in initial value
 
-
 
-
pauseOnHover: true,
 
-
slideshowSpeed: 3000,
 
-
animationSpeed: 700
 
-
   
 
-
});
 
  });
  });
 
 
-
  // check grid size on resize event
+
   
-
  $window.resize(function() {
+
-
    var gridSize = getGridSize();
+
-
+
-
    flexslider.vars.minItems = gridSize;
+
-
    flexslider.vars.maxItems = gridSize;
+
-
  });
+
}());
}());
-
</script>
+
//from here on same as before
 +
 +
function start_tour() {
 +
var tour_navi = document.getElementById("tour-navi");
 +
if (tour_navi.style.display !== "block") {
 +
tour_navi.style.display = "block";
 +
}
 +
}
 +
function stop_tour() {
 +
var tour_navi = document.getElementById("tour-navi");
 +
if (tour_navi.style.display !== "none") {
 +
tour_navi.style.display = "none";
 +
}
 +
}
 +
function expand_left_navi(drop_list) {
 +
var list = drop_list;
 +
while (list.tagName !== "UL") {
 +
var list = list.nextSibling;
 +
}
 +
var visible = list.style.display;
 +
var drop_lists = document.getElementsByClassName("drop-navi-left");
 +
for (var i = 0; i < drop_lists.length; i++) {
 +
var item = drop_lists[i];
 +
while (item.tagName !== "UL") {
 +
var item = item.nextSibling;
 +
}
 +
item.style.display = "none";
 +
}
 +
if (visible == "none") {
 +
list.style.display = "block";
 +
} else {
 +
list.style.display = "none";
 +
}
 +
}
 +
function getMenuAngle(position) {
 +
var menu = document.getElementById("main-menu");
 +
if (menu){
 +
var width = menu.offsetWidth;
 +
var a = 0.5 * width;
 +
var b = menu.offsetHeight;
 +
var wpos = width * position * 0.1;
 +
var t = Math.acos(wpos / a);
 +
var beta = Math.atan(a / b * Math.tan(t));
 +
var angle = Math.PI * 0.5 - beta;
 +
var y = b - b * Math.sin(t);
 +
return Array(angle,y);
 +
}
 +
else return Array(1,1);
 +
}
 +
function rotateMenu(id, angle, factor) {
 +
if (factor !== undefined)
 +
    angle[0] *= factor;
 +
var root = document.getElementById(id);
 +
root.style.position = "relative";
 +
root.style.top = cssCalcExpression("5.3em - " + angle[1] + "px", "5.3em"); // 100px from #main-menu
 +
var children = root.children;
 +
for (var i = 0; i < children.length; ++i) {
 +
                        if (children[i].nodeName == "A") {
 +
                            children[i].style.transform = "rotate(" + angle[0] + "rad)";
 +
                            break;
 +
}
 +
}
 +
}
 +
-->
 +
</script>
-
<style>
+
<div id="top-matter">
-
body {
+
<!-- Get top menu navigation going and enter -->
-
 
+
</html>
-
margin: 0 0 0 0;
+
{{:Team:Heidelberg/Templates/TopNavigation}}
-
padding: 3px 3px 3px 3px;
+
<html>
-
font-family: Arial;
+
</p></div> <!-- end headline -->
-
}
+
</div> <!-- end top-matter -->
-
+
-
.flexslider {
+
-
+
-
padding: 10px 10px 10px 10px;
+
 +
<div id="main" class="center-vert">
-
}
+
<div id="navigation-bar" class="content-hori">
-
+
<!-- Put automatically generated toc here -->
-
#carousel {
+
</html>
 +
{{:Team:Heidelberg/Templates/{{{2}}}}}
 +
<html>
-
margin-left: 10%;
+
</div> <!-- end navigation-bar -->
-
margin-right: 10%;
+
 
-
}
+
<div id="main-content" class="content-hori">
 +
<div id="tour-navi">
 +
<ul>
 +
<li id="tour-rev"><a href="#">&nbsp;</a></li>
 +
<li class="tour-text">back</li>
 +
<li id="tour-pause"><a href="#" onclick="stop_tour();return false">&nbsp;</a></li>
 +
<li class="tour-text">pause</li>
 +
<li id="tour-fwd"><a href="#">&nbsp;</a></li>
 +
<li class="tour-text">forward</li>
 +
</ul>
 +
</div>
 +
<!--<a href="#top" id="goto-top">Go to top</a>-->
 +
<p> <!--test-->
 +
</html>
 +
 
 +
 
 +
<!--ende Start Page Section weiter mit Content Section-->
 +
 
 +
 
 +
 
 +
<html>
-
#goldbar{
 
-
height: 1.2em;
 
-
background-color: #ffcc00;
 
-
margin-bottom:0.5em;
 
-
}
 
-
#top{
 
-
text-align: center;
 
-
background-color: #292929;
 
-
height:5em;
 
-
margin-bottom:0.3em;
 
-
color: white;
 
-
}
 
-
 
-
</style>
 
-
</head>
 
-
<!-- Place somewhere in the <body> of your page -->
+
<!-- start Slider -->
<div id="carousel" class="flexslider">
<div id="carousel" class="flexslider">
  <ul class="slides">
  <ul class="slides">
Line 100: Line 275:
    <li>
    <li>
      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol1.png" />
      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol1.png" />
 +
    </li>
    </li>
    <li>
    <li>
-
      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol2.png" />
+
      <img src="https://static.igem.org/mediawiki/2013/c/c4/Heidelberg_menu_symbol2.png" />
    </li>
    </li>
    <li>
    <li>
 +
      <img src="https://static.igem.org/mediawiki/2013/8/83/Heidelberg_menu_symbol4.png" />
 +
    </li>
 +
  <li>
      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol3.png" />
      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol3.png" />
-
    </li>
+
-
<li>
+
-
      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol1.png" />
+
    </li>
    </li>
    <li>
    <li>
-
      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol2.png" />
+
      <img src="https://static.igem.org/mediawiki/2013/c/c4/Heidelberg_menu_symbol5.png" />
    </li>
    </li>
    <li>
    <li>
-
      <img src="https://static.igem.org/mediawiki/2013/a/a4/Heidelberg_menu_symbol3.png" />
+
      <img src="https://static.igem.org/mediawiki/2013/8/83/Heidelberg_menu_symbol6.png" />
    </li>
    </li>
-
   
 
  </ul>
  </ul>
</div>
</div>
 +
<!-- End of Slider-->
 +
Find all templates used on <a href="https://2013.igem.org/Team:Heidelberg/Templates">the templates page</a> with coresponding explanations.<br />
Find all templates used on <a href="https://2013.igem.org/Team:Heidelberg/Templates">the templates page</a> with coresponding explanations.<br />
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Line 147: Line 325:
<h5>Philosophers Stone</h5>
<h5>Philosophers Stone</h5>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  
 +
<object data="https://2013.igem.org/wiki/index.php?title=Team:Heidelberg/DesignTest/Circle.svg&action=render&oldid=259395" type="image/svg+xml">
 +
    <param name="src" value="https://2013.igem.org/wiki/index.php?title=Team:Heidelberg/DesignTest/Circle.svg&action=render&oldid=259395">
 +
    Ihr Browser kann das Objekt leider nicht anzeigen!
 +
</object>
</td>
</td>
</tr>
</tr>
Line 271: Line 453:
</html>
</html>
 +
{{:Team:Heidelberg/Templates/EndPage}}
{{:Team:Heidelberg/Templates/EndPage}}

Latest revision as of 15:51, 1 October 2013

PHILOSOPHER'S STONE

igem-2013

{{:Team:Heidelberg/Templates/{{{2}}}}}



Find all templates used on the templates page with coresponding explanations.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Philosophers Stone

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Philosophers Stone
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Ihr Browser kann das Objekt leider nicht anzeigen!
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING
THIS COULD BE YOUR HEADING

Retrieved from "http://2013.igem.org/Team:Heidelberg/DesignTest"