Difference between revisions of "Template:Fudan-CHINA"

Line 5: Line 5:
 
 
 
 
−
<!--get jQuery------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--get jQuery and wiki settings
 +
0m0;11------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<style>
 +
#home_logo, #sideMenu,#top,.logo_2018,#firstHeading { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_under{display: none;}
 +
</style>
 +
 
 +
 
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&amp;action=raw&amp;ctype=text/javascript">
 
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&amp;action=raw&amp;ctype=text/javascript">
 
//jQuery
 
//jQuery
Line 14: Line 24:
 
</script>
 
</script>
 
 
−
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&amp;action=raw&amp;ctype=text/javascript">
+
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&amp;action=raw&amp;ctlype=text/javascript">
 
//jQuery_AnimateColors
 
//jQuery_AnimateColors
 
</script>
 
</script>
 +
 
 
−
<script>
+
 
−
$("#firstHeading").remove();
+
−
$(".logo_2018").remove();
+
−
</script>
+
−
+
−
<style>
+
−
#home_logo, #sideMenu,#top { display:none; }
+
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
−
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
#top_menu_under{display: none;}
+
−
</style>
+
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
Line 227: Line 227:
 
myBgVideo.addEventListener('canplaythrough',function(){
 
myBgVideo.addEventListener('canplaythrough',function(){
 
setTimeout(function(){ $('body').addClass('loaded');
 
setTimeout(function(){ $('body').addClass('loaded');
−
         $('#loader-wrapper .load_title').remove(); }, 3000);
+
         $('#loader-wrapper .load_title').remove(); }, 100);
 
});
 
});
 
});
 
});
Line 241: Line 241:
 
 
 
 
 +
 +
 +
 +
 +
 +
 +
<!--make the menu hidden------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<script>
 +
$(document).ready(function(){
 +
  $('#sideMenu').remove();
 +
  let trigger = document.createElement('div');
 +
$(trigger).attr('id','menu-trigger');
 +
let menu = document.getElementById('top_menu_14');
 +
  $(trigger).mouseenter(function(){
 +
$(menu).css('top','0');
 +
  });
 +
  $(trigger).mouseleave(function(){
 +
    $(menu).css('top','-20px');
 +
  });
 +
  document.body.appendChild(trigger);
 +
});
 +
</script>
 +
 +
 +
 +
<style>
 +
 +
#top_menu_14{
 +
  top: -20px; padding-bottom: 2px; transition: top 0.3s;
 +
}
 +
#top_menu_14:hover {
 +
    top: 0 !important;
 +
}
 +
#menu-trigger{
 +
  width:100%;
 +
  height:16px;
 +
  position:fixed;
 +
  left:0;
 +
  top:0;
 +
  z-index:10;
 +
}
 +
#HQ_page ul.navigation-bar > li > ul.sub-menu > li{
 +
  min-width: 100px;
 +
}
 +
#HQ_page ul.navigation-bar > li > ul > li.long{
 +
  min-width: 160px;
 +
}
 +
</style>
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
 +
 +
 +
 +
<!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<style>
 +
#navUl{
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
overflow: hidden;
 +
position:fixed;
 +
width: 1500px;
 +
}
 +
.navLi:not(.navImg){
 +
float: right;
 +
}
 +
.navA{
 +
display: block;
 +
height: 110px;
 +
padding:0 20px;
 +
color:white;
 +
font-family:_Butler;
 +
font-weight: 400;
 +
font-size: 30px;
 +
text-align: center;
 +
line-height: 110px;
 +
}
 +
.teamName{
 +
font-family:_Zelda;
 +
font-weight: 400;
 +
font-size: 35px;
 +
}
 +
.navA:link{
 +
text-decoration: none;
 +
}
 +
 +
.navA:visited{
 +
color: white;
 +
}
 +
 +
.navA:hover:not(.activeA){
 +
color: rgba(0,189,234,1);
 +
}
 +
.jqhover {
 +
        color:black  !important;
 +
    }
 +
.navA:hover{
 +
text-decoration:none;
 +
}
 +
 +
    .navA:active{
 +
text-decoration:none;
 +
color: white;
 +
}
 +
 +
</style>
 +
 +
 +
 +
<ul id="navUl" style="z-index: 999;">
 +
<li class="navLi navImg" style="display: inline-block;float: left;width: 10px;" href="#8"></li>
 +
<li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA" style="width=80px;height:80px;padding:15px; " src="https://static.igem.org/mediawiki/2018/6/6b/T--Fudan-CHINA--teamBadgeWhite_noCircle.png" /></a></li>
 +
<li class="navLi navImg" style="float: left;position: relative;"><a class="navA activeA teamName" href="https://2018.igem.org/Team:Fudan-CHINA">Fudan-CHINA</a></li>
 +
  <li class="navLi"><a class="navA" href="#7">Team</a></li>
 +
<li class="navLi"><a class="navA" href="#6">Parts</a></li>
 +
<li class="navLi"><a class="navA" href="#5">Practices</a></li>
 +
<li class="navLi"><a class="navA" href="#4">Lab</a></li>
 +
<li class="navLi"><a class="navA" href="#3">Modeling</a></li>
 +
<li class="navLi"><a class="navA" href="#2">Project</a></li>
 +
</ul>
 +
<script>
 +
 +
function navFun(){
 +
var winWidth=$(window).width();
 +
var navWidth=$('#navUl').width();
 +
var winHeight=$(window).height();
 +
$("#navUl").css("left",0.5*(winWidth-navWidth));
 +
$("#navUl").css("top",0.1*winHeight);
 +
};
 +
navFun();
 +
 +
$(window).resize(function(){
 +
navFun();
 +
});
 +
 +
    $(window).scroll(function(){
 +
var winHeight=$(window).height();
 +
        var topDis = $(window).scrollTop();
 +
if(topDis >150){
 +
$("#navUl").stop().animate({top:'0px',backgroundColor:"rgba(4,198,215,1)",boxShadow:"0px 0px 5px"},"fast");
 +
    $(".navA:not(.activeA)").hover(function () {
 +
                $(this).addClass("jqhover");
 +
            }).mouseout(function () {
 +
$(this).removeClass("jqhover");
 +
            });
 +
}
 +
else{
 +
$("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
 +
$(".navA:not(.activeA)").hover(function () {
 +
                $(this).removeClass("jqhover");
 +
            });
 +
};
 +
    });
 +
</script>
 +
 +
 +
 +
 +
 +
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 +
  
  

Revision as of 07:49, 22 September 2018