Team:Heidelberg/Templates/Footer-Nav

From 2013.igem.org

(Difference between revisions)
m
m
 
(35 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
<style type="text/css">
-
<!--<script src="https://2013.igem.org/Team:Heidelberg/Templates/bootstrapjs?action=raw&ctype=text/javascript"></script>-->
+
/* Image map styles */
-
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script>
+
.imageMap {width:100%; position:relative;}
 +
.imageMap img {display:block; width:100%; border-radius:20px;}
 +
.imageMap .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
 +
.imageMap a {display:block; position:absolute; z-index:100; opacity:0.2; filter: alpha(opacity=20); /*border:1px solid transparent; border-radius:10px;*/}
 +
.imageMap a.p1 {height: 28%;left: 14.3%;top: 37%;transform: rotate(40deg);-ms-transform:rotate(40deg); /* IE 9 */
 +
-webkit-transform:rotate(40deg); /* Safari and Chrome */ width: 4.3%;}
 +
.imageMap a.p2 {height: 28%;left: 19.1%;top: 38.5%;transform: rotate(-18deg);-ms-transform:rotate(-18deg); /* IE 9 */
 +
-webkit-transform:rotate(-18deg); /* Safari and Chrome */width: 4.3%;}
 +
.imageMap a.p3 {height: 28.5%;left: 23.8%;top: 37%;transform: rotate(32deg);-ms-transform:rotate(32deg); /* IE 9 */
 +
-webkit-transform:rotate(32deg); /* Safari and Chrome */width: 4.3%;}
 +
.imageMap a.p4 {height: 46%;left: 30.4%;top: 20%;transform: rotate(18deg);-ms-transform:rotate(18deg); /* IE 9 */
 +
-webkit-transform:rotate(18deg); /* Safari and Chrome */width: 6.3%;}
 +
.imageMap a.p5 {height: 28%;left: 36.2%;top: 39.5%;transform: rotate(-8deg);-ms-transform:rotate(-8deg); /* IE 9 */
 +
-webkit-transform:rotate(-8deg); /* Safari and Chrome */width: 4.3%;}
 +
.imageMap a.p6 {height: 38%;left: 42%;top: 27%;transform: rotate(23deg);-ms-transform:rotate(23deg); /* IE 9 */
 +
-webkit-transform:rotate(23deg); /* Safari and Chrome */width: 5.6%;}
 +
.imageMap a.p7 {height: 46%;left: 48.8%;top: 20%;transform: rotate(-27deg);-ms-transform:rotate(-27deg); /* IE 9 */
 +
-webkit-transform:rotate(-27deg); /* Safari and Chrome */width: 6.3%;}
 +
.imageMap a.p8 {height: 57%;left: 56.3%;top: 8%;transform: rotate(23.5deg);-ms-transform:rotate(23.5deg); /* IE 9 */
 +
-webkit-transform:rotate(23.5deg); /* Safari and Chrome */width: 8%;}
 +
.imageMap a.p9 {height: 28%;left: 64.2%;top: 37%;transform: rotate(-45deg);-ms-transform:rotate(-45deg); /* IE 9 */
 +
-webkit-transform:rotate(-45deg); /* Safari and Chrome */width: 4%;}
 +
.imageMap a.p10 {height: 28.5%;left: 68.8%;top: 38%;transform: rotate(22deg);-ms-transform:rotate(22deg); /* IE 9 */
 +
-webkit-transform:rotate(22deg); /* Safari and Chrome */width: 4.1%;}
 +
.imageMap a.p11 {height: 46%;left: 73%;top: 20%;transform: rotate(-18deg);-ms-transform:rotate(-18deg); /* IE 9 */
 +
-webkit-transform:rotate(-18deg); /* Safari and Chrome */width: 6.3%;}
 +
.imageMap a.p12{height: 41%;left: 81.7%;top: 25%;transform: rotate(24.5deg);-ms-transform:rotate(24.5deg); /* IE 9 */
 +
-webkit-transform:rotate(24.5deg); /* Safari and Chrome */width: 5.6%;}
 +
.imageMap a.p13{height: 29%;left: 87.8%;top: 36.5%;transform: rotate(40deg);-ms-transform:rotate(40deg); /* IE 9 */
 +
-webkit-transform:rotate(40deg); /* Safari and Chrome */width: 4%;}
 +
.imageMap a.p14{height: 29%;left: 92.4%;top: 38%;transform: rotate(-16deg);-ms-transform:rotate(-16deg); /* IE 9 */
 +
-webkit-transform:rotate(-16deg); /* Safari and Chrome */width: 4%;}
 +
                .imageMap a.p15 {height: 28%;left: 21.3%;top: 11.7%;transform: rotate(26deg);-ms-transform:rotate(26deg); /* IE 9 */
 +
-webkit-transform:rotate(26deg); /* Safari and Chrome */width: 4.3%;}
 +
                .imageMap a.p16 {height: 28%;left: 66.5%;top: 10.5%;transform: rotate(-10deg);-ms-transform:rotate(-10deg); /* IE 9 */
 +
-webkit-transform:rotate(-10deg); /* Safari and Chrome */width: 4.3%;}
 +
               
 +
.imageMap a + p {position:absolute; left:0%; top:102%; width:100%; color:#000; display:none;}
 +
 
 +
.imageMap:hover .hotspots {visibility:visible;}
 +
.imageMap p strong {display:block; padding:0; margin:0; font: bold 25px/30px 'times new roman',serif; color:#000;}
 +
.imageMap p {padding:0; margin:0; font: normal 18px/22px 'times new roman',serif; color:#444;}
 +
 
 +
.imageMap b {display:block; position:absolute; background:url(trans.gif); z-index:200; opacity:0.2; filter: alpha(opacity=20); padding:1px;
 +
-webkit-transition:0.75s;
 +
-moz-transition:0.75s;
 +
-o-transition:0.75s;
 +
transition:0.75s;
 +
}
 +
.imageMap b.b1 {left:11%; top:5%; width:25%; height:34%;}
 +
.imageMap b.b2 {left:76%; top:13%; width:21%; height:30%;}
 +
.imageMap b.b3 {left:5%; top:44%; width:22%; height:42%;}
 +
.imageMap b.b4 {left:28%; top:41%; width:26.5%; height:43%;}
 +
.imageMap b.b5 {left:55%; top:64%; width:15%; height:26%;}
 +
.imageMap b.b6 {left:72%; top:53%; width:25%; height:35%;}
 +
 
 +
.imageMap .hotspots div:hover b {width:0; padding:0;}
 +
.imageMap .hotspots div:hover p {display:block;}
 +
.imageMap .hotspots div:hover a {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30);}
 +
</style>
 +
<div class="row">
 +
<div class="col-md-12">
 +
<div class="imageMap" aria-haspopup="true">
 +
<img src="https://static.igem.org/mediawiki/2013/f/fd/Heidelberg_bottom_sponsors2.png" width="100%">
 +
<center>Thanks to <object style="width:20px; top:0px" data="https://static.igem.org/mediawiki/2013/0/07/Heidelberg_boot.png"></object></center>
 +
<div class="hotspots">
 +
<div title="Roth">
 +
<a class="p1" aria-haspopup="false" rel="nofollow" href="http://www.carlroth.de"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="IDT">
 +
<a class="p2" aria-haspopup="false" rel="nofollow" href="http://www.idt-biologika.de"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="D-ein Shirt">
 +
<a class="p3" aria-haspopup="false" rel="nofollow" href="http://www.d-ein-shirt.de"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="Universiy of Heidelberg">
 +
<a class="p4" aria-haspopup="false" rel="nofollow" href="http://www.uni-heidelberg.de"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="Bio Cat">
 +
<a class="p5" aria-haspopup="false" rel="nofollow" href="http://www.biocat.com"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="Boehringer Ingelheim">
 +
<a class="p6" aria-haspopup="false" rel="nofollow" href="http://www.boehringer-ingelheim.com"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="dkfz.">
 +
<a class="p7" aria-haspopup="false" rel="nofollow" href="http://www.dkfz.de"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="Klaus Tschira Stiftung">
 +
<a class="p8" aria-haspopup="false" rel="nofollow" href="http://www.klaus-tschira-stiftung.de"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="NEB">
 +
<a class="p9" aria-haspopup="false" rel="nofollow" href="http://www.neb.com"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="JCS">
 +
<a class="p10" aria-haspopup="false" rel="nofollow" href="http://www.schessner.com"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="BioQuant">
 +
<a class="p11" aria-haspopup="false" rel="nofollow" href="http://www.bioquant.uni-heidelberg.de"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="Lange und Pflanz">
 +
<a class="p12" aria-haspopup="false" rel="nofollow" href="http://www.lpsp.de"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="Eurofins MWG">
 +
<a class="p13" aria-haspopup="false" rel="nofollow" href="http://www.eurofins.com"></a>
 +
</div>
 +
</div>
 +
<div class="hotspots">
 +
<div title="Sigma Aldrich">
 +
<a class="p14" aria-haspopup="false" rel="nofollow" href="http://sigmaaldrich.com"></a>
 +
</div>
 +
</div>
 +
                        <div class="hotspots">
 +
<div title="Era SynBio">
 +
<a class="p15" aria-haspopup="false" rel="nofollow" href="http://www.erasynbio.eu/"></a>
 +
</div>
 +
</div>
 +
                        <div class="hotspots">
 +
<div title="Golschmied Haas">
 +
<a class="p16" aria-haspopup="false" rel="nofollow" href=""></a>
 +
</div>
 +
</div>
 +
                       
 +
</div>
 +
</div>
 +
    </div>
 +
<div>
 +
<script src="https://2013.igem.org/Team:Heidelberg/Templates/jquery-js?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2013.igem.org/Team:Heidelberg/Templates/bootstrapjs?action=raw&ctype=text/javascript"></script>
<script src="https://2013.igem.org/Team:Heidelberg/Templates/holderjs?action=raw&ctype=text/javascript"></script>
<script src="https://2013.igem.org/Team:Heidelberg/Templates/holderjs?action=raw&ctype=text/javascript"></script>
<script src="https://2013.igem.org/Team:Heidelberg/Templates/easing-js?action=raw&ctype=text/javascript"></script>
<script src="https://2013.igem.org/Team:Heidelberg/Templates/easing-js?action=raw&ctype=text/javascript"></script>
Line 8: Line 159:
<script type="text/javascript">
<script type="text/javascript">
$(function() {
$(function() {
 +
    /*var items = $('.item');
 +
    for (var i = 0; i < items.length; ++i) {
 +
        var dd = $(items[i]).find('ul');
 +
        if (dd.length) {
 +
            dd.css("left", ($(items[i]).innerWidth() - dd.outerWidth()) * 0.5);
 +
        }
 +
    }*/
     $('#nav > div').hover(
     $('#nav > div').hover(
     function () {
     function () {
         var $this = $(this);
         var $this = $(this);
-
         $this.find('img').stop().animate({
+
        var offsetLeft = $this.data("offsetL") + "px";
-
             'width'    :'250px',
+
         $this.find('img.circle').stop().animate({
-
             'height'    :'250px',
+
             'width'    :'320px',
-
            'top'      :'0 px',
+
             'height'    :'320px',
-
            'left'      :'0 px',
+
//                      'top'      :'0 px',
 +
                'left'      :offsetLeft,
             'opacity'  :'3.0',
             'opacity'  :'3.0',
         },200,'easeOutBack',function(){
         },200,'easeOutBack',function(){
-
             $(this).parent().find('ul').fadeIn(100);
+
             $(this).parent().parent().find('ul').fadeIn(100);
-
         });
+
         }).css('z-index', '1');
-
        $this.find('img').css('z-index', '1');
+
         $this.find('a:first,h2,ul').addClass('active');
         $this.find('a:first,h2,ul').addClass('active');
     },
     },
Line 26: Line 184:
         var $this = $(this);
         var $this = $(this);
         $this.find('ul').fadeOut(500);
         $this.find('ul').fadeOut(500);
-
         $this.find('img').stop().animate({
+
         $this.find('img.circle').stop().animate({
             'width'    :'52px',
             'width'    :'52px',
             'height'    :'52px',
             'height'    :'52px',
-
            'top'      :'0px',
+
//                        'top'      :'0px',
-
            'left'      :'0px',
+
                'left'      :'0px',
             'opacity'  :'0',
             'opacity'  :'0',
         },1000,'easeOutBack');
         },1000,'easeOutBack');
Line 44: Line 202:
});
});
</script>
</script>
 +
<!-- MathJax (LaTeX for the web) -->
 +
 +
<!-- This part is only if you want to use $...$ delimiters -->
 +
<script type="text/x-mathjax-config">
 +
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}, TeX: {equationNumbers: { autoNumber: "AMS" }}});
 +
</script>
 +
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</html>
</html>

Latest revision as of 00:36, 29 October 2013

Thanks to

Retrieved from "http://2013.igem.org/Team:Heidelberg/Templates/Footer-Nav"