Team:WHU-China/templates/standardpage header

From 2013.igem.org

(Difference between revisions)
Line 71: Line 71:
@-moz-document url-prefix(){.iframe_gd{margin-top:-5px;}}   
@-moz-document url-prefix(){.iframe_gd{margin-top:-5px;}}   
</style>
</style>
 +
<script type="text/javascript">
 +
$(function(){
 +
//event configs
 +
var menuEvents={timeoutId:0,timeId2:null,mouseover:false,haschild:false,currentLiTarget:null};
 +
//(sub menu's)containter element
 +
var container=document.getElementById('menu-sub-container');
 +
//event proxy : the child nodes of the container element are changes all the time
 +
//              so that i bind the event on the (sub menu's)container element
 +
container.onmouseover=function(e){
 +
var even=e||window.event;
 +
var target=even.srcElement||even.target;
 +
while(target && target.id!="menu-sub-container" && target.tagName.toLowerCase()!="body"){
 +
//find son element of the (sub menu's)container
 +
if(target.parentNode.className.indexOf("menu-sub-list-row")!=-1){
 +
//contrast with the last target that we saved
 +
if(target!=menuEvents.currentLiTarget){
 +
menuEvents.currentLiTarget=target;
 +
$('#menu-sub-container .hover').removeClass('hover');
 +
$(target).addClass('hover');
 +
}
 +
break;
 +
}
 +
target=target.parentNode;
 +
}
 +
};
 +
//events about level1 menus
 +
$('.toplist').hover(function(e){
 +
menuEvents.mouseover=true;
 +
var that=this;
 +
//has child
 +
if($('.sec',that).length>0){
 +
clearTimeout(menuEvents.timeoutId);
 +
menuEvents.timeoutId=null;
 +
menuEvents.haschild=true;
 +
//no child
 +
}else{
 +
menuEvents.haschild=false;
 +
}
 +
//set a delay to show sub menus
 +
menuEvents.timeoutId2=setTimeout(function(){
 +
if(menuEvents.mouseover==true&&$('.sec',that).length>0){
 +
document.getElementById('menu-sub-container-inner').innerHTML=$('.sec',that)[0].innerHTML;
 +
$('#menu-sub-container').animate({height:$('#menu-sub-container-inner').height()+10},400);
 +
}
 +
},150);
 +
},function(e){
 +
menuEvents.mouseover=false;
 +
clearTimeout(menuEvents.timeoutId2);
 +
menuEvents.timeoutId2=null;
 +
//set a delay to hide sub menus
 +
menuEvents.timeoutId=setTimeout(function(){
 +
if(menuEvents.haschild===false || menuEvents.mouseover===false){
 +
$('#menu-sub-container').animate({height:0},400);
 +
}
 +
},300);
 +
});
 +
$('.topla').hover(function(){
 +
$(this).addClass('hover');
 +
},function(){
 +
$(this).removeClass('hover');
 +
})/*.click(function(){
 +
$(this).removeClass('hover');
 +
});*/
 +
//events about (sub menu's)container
 +
$('#menu-sub-container').hover(function(e){
 +
clearTimeout(menuEvents.timeoutId);
 +
menuEvents.timeoutId=null;
 +
},function(e){
 +
menuEvents.timeoutId=setTimeout(function(){
 +
$('#menu-sub-container').animate({height:0},400);
 +
},300);
 +
});
 +
});
 +
 +
</script>
<div id="header-inner">
<div id="header-inner">

Revision as of 01:48, 10 September 2013

Retrieved from "http://2013.igem.org/Team:WHU-China/templates/standardpage_header"