Team:SYSU-China/js/project.js

From 2014.igem.org

(Difference between revisions)
(Created page with "$(function() { var subList = []; $(".sidebar li").each(function() { $(this).hoverDelay({ hoverDuring: 200, outDuring: 400, hoverEvent: function() { if...")
 
(46 intermediate revisions not shown)
Line 1: Line 1:
$(function() {
$(function() {
-
var subList = [];
+
var navicon = ["Project", "Judging", "HumanPractice", "Team"];
 +
var urlHash = ["Project/Background", "Judging/Safetyform", "HumanPractice/iGEMCC", "Team/Ourteam"];
 +
var colors = ["#b5c90f", "#ed8f6b", "#7aa59e", "#ed9d60"];
-
$(".sidebar li").each(function() {
+
function navigationSet() {
 +
var icon1 = ["https://static.igem.org/mediawiki/2014/f/fb/Bg31.png",
 +
"https://static.igem.org/mediawiki/2014/7/79/Bg34.png",
 +
"https://static.igem.org/mediawiki/2014/e/e2/Bg33.png",
 +
"https://static.igem.org/mediawiki/2014/0/09/Bg35.png"];
 +
var icon2 = ["https://static.igem.org/mediawiki/2014/5/5b/Sysuchina_bg31.png",
 +
"https://static.igem.org/mediawiki/2014/5/5e/Sysuchina_bg34.png",
 +
"https://static.igem.org/mediawiki/2014/7/74/Sysuchina_bg33.png",
 +
"https://static.igem.org/mediawiki/2014/2/27/Sysuchina_bg35.png"];
 +
$(".dl-menu").each(function(i) {
 +
$(this).css("background-color", colors[i]);
 +
$(this).children().each(function() {
 +
$($(this).children()[1]).css("background-color", colors[i]);
 +
});
 +
});
 +
$(".navibar img").each(function(index) {
 +
$(this).hover(function() {
 +
var newSrc = $(this).attr("src").replace(icon2[index], icon1[index]);
 +
$(this).attr("src", newSrc);
 +
//$(this).css({"width" : "45px", "height" : "45px"});
 +
}, function() {
 +
var newSrc = $(this).attr("src").replace(icon1[index], icon2[index]);
 +
$(this).attr("src", newSrc);
 +
//$(this).css({"width" : "40px", "height" : "40px"});
 +
}).trigger("mousehover");
-
$(this).hoverDelay({
+
$(this).click(function() {
-
hoverDuring: 200,
+
gotoTop(1);
-
            outDuring: 400,
+
var hrefhash = urlHash[index];
-
hoverEvent: function() {
+
$.locationHash(hrefhash);
-
if($(this).find("ul").length != 0) {
+
});
-
$(this).find("ul").each(function() {
+
-
$(this).show(300);
+
-
});
+
-
}
+
-
},
+
-
outEvent: function() {
+
-
if($(this).find("ul").length != 0) {
+
-
$(this).find("ul").each(function() {
+
-
subList.push(this);
+
-
//$(this).hide(500);
+
-
});
+
-
}
+
-
}
+
});
});
-
});
+
}
-
$(".sidebar").each(function() {
+
function fixscroll() {
-
$(this).hoverDelay({
+
//获取要定位元素距离浏览器顶部的距离
-
hoverDuring: 200,
+
var navH = $($(".navibar")[0]).position().top;
-
            outDuring: 400,
+
var nav2H = $($(".navigation2")[0]).position().top;
-
hoverEvent: function() {},
+
-
outEvent: function() {
+
-
if (subList.length != 0) {
+
-
$(subList).each(function() {
+
-
$(this).hide(500);
+
-
});
+
-
subList.clear();
+
-
}
+
 +
//滚动条事件
 +
$(window).scroll(function(){
 +
//获取滚动条的滑动距离
 +
var scroH = $(document).scrollTop();
 +
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
 +
if(scroH >= navH){
 +
$(".navibar").css({"position":"fixed","top":"0"});
 +
} else if(scroH < navH){
 +
$(".navibar").css({"position":"absolute", "top" : "204px"});
}
}
-
});
 
-
});
 
-
 
+
if(scroH >= nav2H){
-
 
+
$(".navigation2").css({"position":"fixed","top": "60px"});  
-
var navicon = ["project", "judge", "humanpractice", "notebook", "team"];
+
} else if(scroH < nav2H){  
-
$(".navibar img").each(function(index) {
+
$(".navigation2").css({"position":"absolute", "top" : "264px"});  
-
$(this).hover(function() {
+
}
-
var newSrc = $(this).attr("src").replace("/sysuchina_bg", "/bg");
+
});
-
$(this).attr("src", newSrc);
+
}
-
//$(this).css({"width" : "45px", "height" : "45px"});
+
-
}, function() {
+
-
var newSrc = $(this).attr("src").replace("bg3/bg", "bg3/sysuchina_bg");
+
-
$(this).attr("src", newSrc);
+
-
//$(this).css({"width" : "40px", "height" : "40px"});
+
-
}).trigger("mousehover");
+
-
 
+
-
$(this).click(function() {
+
-
$('.single-item div').each(function() {
+
-
$(this).hide();
+
-
});
+
-
$($('.single-item div')[index]).show();
+
-
 
+
-
$(".sidebar").each(function() {
+
-
$(this).hide();
+
-
});
+
-
 
+
-
$($(".sidebar")[index]).show();
+
-
 
+
-
gotoTop(1);
+
-
});
+
-
//setHash()
+
-
});
+
-
 
+
-
function fixscroll() {
+
-
//获取要定位元素距离浏览器顶部的距离
+
-
var navH = $($(".navibar")[0]).position().top;
+
-
//滚动条事件
+
-
$(window).scroll(function(){
+
-
//获取滚动条的滑动距离
+
-
var scroH = $(document).scrollTop();
+
-
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
+
-
if(scroH >= navH){
+
-
$(".navibar").css({"position":"fixed","top":0});  
+
-
} else if(scroH < navH){  
+
-
$(".navibar").css({"position":"relative", "marginTop" : "-2px"});  
+
-
}  
+
-
});
+
-
}
+
Line 101: Line 74:
}
}
 +
function requestFile() {
 +
var lochash = $.locationHash();
 +
$.get(
 +
"https://2014.igem.org/Team:SYSU-China/file/" + lochash + ".html?action=raw",
-
 
-
function routeTree() {
 
-
//alert("routeTree");
 
-
 
-
$(".sidebar li").each(function() {
 
-
 
-
$(this).click(function(ev) {
 
-
var first = "";
 
-
var second = "";
 
-
if ($(this).parent().hasClass("subsidebar")) {
 
-
first = $(this).parent().parent().attr("name");
 
-
second = $(this).attr("name");
 
-
//alert(second);
 
-
$("#route").html("");
 
-
$("#route").html("<a>" + first.replace("_", " ") + "</a>" + " > " + "<a>" + second.replace("_", " ") + "</a>");
 
-
flag = true;
 
-
stopBubble(ev);
 
-
} else {
 
-
second = $(this).attr("name");
 
-
$("#route").html("");
 
-
$("#route").html("<a>" + second.replace("_", " ") + "</a>");
 
-
}
 
-
//requestFile(second);
 
-
setHash(0, second);
 
-
//routeClick();
 
-
gotoTop(1);
 
-
});
 
-
 
-
});
 
-
}
 
-
 
-
function requestFile(currenturl) {
 
-
alert("requestFile");
 
-
var itemName = "";
 
-
var file = "default"; // each item's main page
 
-
 
-
if (currenturl.length == 1) {
 
-
itemName = currenturl[0];
 
-
} else {
 
-
file = currenturl[1];
 
-
itemName = currenturl[0];
 
-
}
 
-
//$.locationHash(file);
 
-
$.get(
 
-
"igem.php",
 
-
{item: itemName, filename: file + ".html"} ,
 
function(data){
function(data){
-
//alert(data);
+
var realdata =  data.substring(data.indexOf("<!--SYSUCHINA-->"),data.indexOf("<!--SYSUCHINA!-->"));
-
$($(".content")[0]).html(data + "<img src=\"images/ZY/sysuchina_top.png\" alt=\"top\" id=\"top\">");
+
                setTimeout(function() {
-
top();
+
                $($(".content")[0]).html(realdata);
-
},
+
                }, 100);
-
"html"
+
}
);
);
 +
                gotoTop(1);
}
}
-
function routeClick() {
 
-
$("#route a").each(function(i) {
 
-
$(this).click(function() {
 
-
if ($("#route a").length == 2 && i ==0) {
 
-
$("#route").html("<a>" + $($("#route a")[0]).html() + "</a>");
 
-
$($("#route a")[0]).click(routeClick);
 
-
}
 
-
var filename = $(this).html().replace(/^\s+|\s+$/g, "");
 
-
//requestFile(filename.replace(" ", "_"));
 
-
setHash(1, second);
 
-
gotoTop(1);
 
-
});
 
-
});
 
-
}
 
-
 
-
function ini() {
 
-
$('.single-item div').each(function(i) {
 
-
if (i != 0) {
 
-
$(this).hide();
 
-
}
 
-
});
 
-
 
-
$(".subsidebar").each(function(i) {
 
-
$(this).hide();
 
-
});
 
-
 
-
$(".sidebar").each(function(i) {
 
-
if (i != 0) {
 
-
$(this).hide();
 
-
}
 
-
});
 
-
 
-
$("#tipImg").hide();
 
-
 
-
var currentHash = $.locationHash();
 
-
 
-
//getPage();
 
-
routeTree();
 
-
routeClick();
 
-
top();
 
-
jQueryHash();
 
-
//Tips();
 
-
setTimeout(fixscroll, 10);
 
-
setTimeout(Tips, 50);
 
-
}
 
function gotoTop(speed) {
function gotoTop(speed) {
$('body,html').animate({scrollTop:0},speed);   
$('body,html').animate({scrollTop:0},speed);   
Line 207: Line 94:
function top() {
function top() {
-
$("#top").click(function() {
+
$("#gotop").click(function() {
-
gotoTop();
+
gotoTop(100);
 +
 
});
});
}
}
Line 214: Line 102:
function jQueryHash() { // hash change listener
function jQueryHash() { // hash change listener
$(window).hashchange(function() {
$(window).hashchange(function() {
-
var currentHash = $.locationHash();
+
/*change page position*/
-
var currenturl = hashUrl();
+
/*change file*/
-
requestFile(currenturl);
+
requestFile();
-
//requestFile(currentHash);
+
$('.single-item div').each(function() {
-
//alert($.locationHash());
+
$(this).hide();
 +
});
 +
/*change top image*/
 +
var hash = $.locationHash();
 +
var hashlist = hash = hash.split('/');
 +
var hashnum = hashlist.length;
 +
var index = navicon.indexOf(hashlist[0]);
 +
if (hash != "" && hashnum == 0) {
 +
hashlist.push(hash);
 +
hashnum  = 1;
 +
}
 +
if (hashnum == 0) {
 +
$($('.single-item div')[0]).show();
 +
} else {
 +
if (index != -1)
 +
$($('.single-item div')[index]).show();
 +
}
 +
$(".dl-menu").each(function() {
 +
$(this).hide();
 +
});
 +
$($(".dl-menu")[index]).show();
 +
$($("#sidenav button")[0]).css("background-color", colors[index]);
});
});
}
}
Line 263: Line 172:
}
}
-
function hashUrl() { // return the list of current item and page
+
function linkHome() {
-
//alert("hashurl");
+
$(".single-item img").each(function() {
-
var currenthash = $.locationHash();
+
$(this).click(function() {
-
currenthash = currenthash.trim();
+
location.href = "https://2014.igem.org/Team:SYSU-China";
-
if (currenthash == "") {
+
});
-
return [];
+
});
-
}
+
}
-
var currenthash = currenthash.substring(1, currenthash.length); // drop '!'
+
function imgbox() {
-
var hashlist = currenthash.split('/');
+
$(".fancybox").fancybox();
-
var len = 0;
+
-
var url = "";
+
-
 
+
-
for (key in hashlist) {
+
-
len++;
+
-
}
+
-
if (len == 0) {
+
-
return [];
+
-
+
-
} else if (len == 2) {
+
-
return [hashlist[1]]; // the value of item
+
-
+
-
} else {
+
-
return [hashlist[1], hashlist[3]]; // the value of item and page
+
-
+
-
}
+
-
+
}
}
-
function setHash(index, val) {//index == 0 or 1
+
function flexnavi() {
-
var currenturl = hashUrl();
+
$(".flexnav").flexNav();
-
var newhash;
+
-
if (currenturl.length == 1) {
+
-
newhash = "!item/" + val;
+
-
} else if (val == 0){
+
-
newhash = "!item/" + val + "/page/" + currenturl[1];
+
-
} else {
+
-
newhash = "!item/" + currenturl[0] + "/page/" + val;
+
-
}
+
-
$.locationHash(newhash);
+
-
//alert(newhash);
+
}
}
-
function GT(o){T=o.offsetTop;if(o.offsetParent!=null)T+=GT(o.offsetParent);return T;}
+
var Navhover = [false, false, false, false, false];
 +
function navigation() {
 +
$(".navibar img").each(function(index) {
 +
$(this).hover( function() {
 +
$($(".firstNav")[index]).show();
-
function GL(o){L =o.offsetLeft;if(o.offsetParent!=null)L+=GL(o.offsetParent);return L;}
+
}, function() {
-
function getX(evt) {
+
setTimeout(function(){
-
return evt.pageX;
+
if (!Navhover[index]) {
 +
//$($(".firstNav")[index]).trigger("mouseleave");
 +
$($(".firstNav")[index]).hide();
 +
Navhover[index] = false;
 +
}
 +
}, 50);
 +
});
 +
    });
 +
 
 +
    $(".firstNav").each(function(index) {
 +
    $(this).hover(function() {
 +
    Navhover[index] = true;
 +
    }, function() {
 +
    Navhover[index] = false;
 +
    $($(".firstNav")[index]).hide();
 +
    }).trigger("mousehover");
 +
    });
 +
 
 +
    $(".firstNav").each(function() {
 +
$(this).hide();
 +
});
 +
 +
$(window).resize(function() {
 +
    //document.location.reload();
 +
});
 +
    }
 +
/*
 +
function modal() {
 +
$('#myModal').reveal({
 +
    animation: 'fadeAndPop',                  //fade, fadeAndPop, none
 +
    animationspeed: 300,                      //how fast animtions are
 +
    closeonbackgroundclick: true,              //if you click background will modal close?
 +
    dismissmodalclass: 'close-reveal-modal',    //the class of a button or element that will close an open modal
 +
});
}
}
 +
*/
 +
function sidenav() {
 +
$( '#dl-menu' ).dlmenu();
 +
$($("#dl-menu button")[0]).trigger("click");
 +
}
 +
 +
 +
function ini() {
 +
//alert("sd");
 +
$(".dl-menu").each(function() {
 +
$(this).hide();
 +
});
 +
$($(".dl-menu")[0]).show();
-
function getY(evt) {
+
$("#tipImg").hide();
-
return evt.pageY;
+
-
}
+
-
function mousePosition(ev) {
+
$($(".dl-menu")[0]).show();
-
if (ev.pageX || ev.pageY) {
+
-
return { x: ev.pageX, y: ev.pageY };  
+
-
}
+
-
}
+
 +
var currentHash = $.locationHash();
-
ini();
+
//getPage();
 +
//routeTree();
 +
navigationSet();
 +
 +
jQueryHash();
 +
flexnavi();
 +
//Tips();
 +
setTimeout(fixscroll, 10);
 +
setTimeout(Tips, 50);
 +
linkHome();
 +
//imgbox();
 +
navigation();
 +
//modal();
 +
sidenav();
 +
                top();
 +
 +
}
 +
 +
 +
ini();
});
});

Latest revision as of 01:43, 18 October 2014

$(function() { var navicon = ["Project", "Judging", "HumanPractice", "Team"]; var urlHash = ["Project/Background", "Judging/Safetyform", "HumanPractice/iGEMCC", "Team/Ourteam"]; var colors = ["#b5c90f", "#ed8f6b", "#7aa59e", "#ed9d60"];

function navigationSet() { var icon1 = ["Bg31.png", "Bg34.png", "Bg33.png", "Bg35.png"]; var icon2 = ["Sysuchina_bg31.png", "Sysuchina_bg34.png", "Sysuchina_bg33.png", "Sysuchina_bg35.png"]; $(".dl-menu").each(function(i) { $(this).css("background-color", colors[i]); $(this).children().each(function() { $($(this).children()[1]).css("background-color", colors[i]); }); }); $(".navibar img").each(function(index) { $(this).hover(function() { var newSrc = $(this).attr("src").replace(icon2[index], icon1[index]); $(this).attr("src", newSrc); //$(this).css({"width" : "45px", "height" : "45px"}); }, function() { var newSrc = $(this).attr("src").replace(icon1[index], icon2[index]); $(this).attr("src", newSrc); //$(this).css({"width" : "40px", "height" : "40px"}); }).trigger("mousehover");

$(this).click(function() { gotoTop(1); var hrefhash = urlHash[index]; $.locationHash(hrefhash); }); }); }

function fixscroll() { //获取要定位元素距离浏览器顶部的距离 var navH = $($(".navibar")[0]).position().top; var nav2H = $($(".navigation2")[0]).position().top;

//滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(document).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定 if(scroH >= navH){ $(".navibar").css({"position":"fixed","top":"0"}); } else if(scroH < navH){ $(".navibar").css({"position":"absolute", "top" : "204px"}); }

if(scroH >= nav2H){ $(".navigation2").css({"position":"fixed","top": "60px"}); } else if(scroH < nav2H){ $(".navigation2").css({"position":"absolute", "top" : "264px"}); } }); }


function stopBubble(e) { // 如果提供了事件对象，则这是一个非IE浏览器 

   	if ( e && e.stopPropagation ) {
       // 因此它支持W3C的stopPropagation()方法 
       	e.stopPropagation();
   	} else { 
      	// 否则，我们需要使用IE的方式来取消事件冒泡
       	window.event.cancelBubble = true;

} }

function requestFile() { var lochash = $.locationHash(); $.get( "https://2014.igem.org/Team:SYSU-China/file/" + lochash + ".html?action=raw",

function(data){ var realdata = data.substring(data.indexOf(""),data.indexOf("")); 

               setTimeout(function() {

$($(".content")[0]).html(realdata); 

               }, 100);

} ); 

               gotoTop(1);

}

function gotoTop(speed) { $('body,html').animate({scrollTop:0},speed); }

function top() { $("#gotop").click(function() { gotoTop(100);

}); }

function jQueryHash() { // hash change listener $(window).hashchange(function() { /*change page position*/ /*change file*/ requestFile(); $('.single-item div').each(function() { $(this).hide(); }); /*change top image*/ var hash = $.locationHash(); var hashlist = hash = hash.split('/'); var hashnum = hashlist.length; var index = navicon.indexOf(hashlist[0]); if (hash != "" && hashnum == 0) { hashlist.push(hash); hashnum = 1; } if (hashnum == 0) { $($('.single-item div')[0]).show(); } else { if (index != -1) $($('.single-item div')[index]).show(); } $(".dl-menu").each(function() { $(this).hide(); }); $($(".dl-menu")[index]).show(); $($("#sidenav button")[0]).css("background-color", colors[index]); }); }

var showTip = false;

function Tips() { $("#tip em").each(function(i, v) { $(this).hoverDelay({ hoverDuring: 200, outDuring: 200, hoverEvent: function() { var tooltipPosTop = $(this).position().top- $("#tipImg").outerHeight(); //alert(tooltipPosTop); var tooltipPosLeft = $(this).position().left; var tooltipPosLeft = tooltipPosLeft - (($("#tipImg").outerWidth()/2) - $(this).outerWidth()/2);

$("#tipImg").css({ 'left': tooltipPosLeft + "px", 'top': tooltipPosTop+"px" }).animate({'opacity':'1', 'marginTop':'0'}, 500); $("#tipImg").show(); }, outEvent: function() { showTip = true;

setTimeout(function() { if (showTip) { $("#tipImg").fadeOut(100); showTip = false;// do nothing } }, 200); } }); });

$("#tipImg").hoverDelay({ hoverDuring: 200, outDuring: 200, hoverEvent: function() { showTip = false; }, outEvent: function() { $("#tipImg").fadeOut(100); } }); }

function linkHome() { $(".single-item img").each(function() { $(this).click(function() { location.href = "https://2014.igem.org/Team:SYSU-China"; }); }); } function imgbox() { $(".fancybox").fancybox(); }

function flexnavi() { $(".flexnav").flexNav(); }

var Navhover = [false, false, false, false, false]; function navigation() { $(".navibar img").each(function(index) { $(this).hover( function() { $($(".firstNav")[index]).show();

}, function() {

setTimeout(function(){ if (!Navhover[index]) { //$($(".firstNav")[index]).trigger("mouseleave"); $($(".firstNav")[index]).hide(); Navhover[index] = false; } }, 50); }); 

   	});

   	$(".firstNav").each(function(index) {
   		$(this).hover(function() {
   			Navhover[index] = true;
   		}, function() {
   			Navhover[index] = false;
   			$($(".firstNav")[index]).hide();
   		}).trigger("mousehover");
   	});

   	$(".firstNav").each(function() {

$(this).hide(); });

$(window).resize(function() { 

   		//document.location.reload();

}); 

   }

/* function modal() { $('#myModal').reveal({ 

   		animation: 'fadeAndPop',                   //fade, fadeAndPop, none
   		animationspeed: 300,                       //how fast animtions are
   		closeonbackgroundclick: true,              //if you click background will modal close?
   		dismissmodalclass: 'close-reveal-modal',    //the class of a button or element that will close an open modal

}); }

  • /

function sidenav() { $( '#dl-menu' ).dlmenu(); $($("#dl-menu button")[0]).trigger("click"); }


function ini() { //alert("sd"); $(".dl-menu").each(function() { $(this).hide(); }); $($(".dl-menu")[0]).show();

$("#tipImg").hide();

$($(".dl-menu")[0]).show();

var currentHash = $.locationHash();

//getPage(); //routeTree(); navigationSet();


jQueryHash(); flexnavi(); //Tips(); setTimeout(fixscroll, 10); setTimeout(Tips, 50); linkHome(); //imgbox(); navigation(); //modal(); sidenav(); 

               top();

}


ini();

});

Retrieved from "http://2014.igem.org/Team:SYSU-China/js/project.js"