Team:NCTU Formosa/source/head
From 2013.igem.org
(Difference between revisions)
(62 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<meta name="copyright" content="Contents belong to NCTU Formosa; Website designed by Calvin Hue." /> | <meta name="copyright" content="Contents belong to NCTU Formosa; Website designed by Calvin Hue." /> | ||
- | |||
<meta name="keywords" content="iGEM, NCTU_Formosa, NCTU, Formosa" /> | <meta name="keywords" content="iGEM, NCTU_Formosa, NCTU, Formosa" /> | ||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:500,400,300|Lobster+Two:700|Quicksand:700" rel="stylesheet" type="text/css"> | <link href="http://fonts.googleapis.com/css?family=Open+Sans:500,400,300|Lobster+Two:700|Quicksand:700" rel="stylesheet" type="text/css"> | ||
+ | <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"> | ||
+ | <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> | ||
<link href='https://2013.igem.org/Team:NCTU Formosa/css/reset?action=raw&ctype=text/css' rel="stylesheet"> | <link href='https://2013.igem.org/Team:NCTU Formosa/css/reset?action=raw&ctype=text/css' rel="stylesheet"> | ||
<link href='https://2013.igem.org/Team:NCTU Formosa/css/style?action=raw&ctype=text/css' rel="stylesheet"> | <link href='https://2013.igem.org/Team:NCTU Formosa/css/style?action=raw&ctype=text/css' rel="stylesheet"> | ||
- | < | + | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> |
+ | <link rel="stylesheet" media="only screen and (min-width: 750px)" href="https://2013.igem.org/Team:NCTU Formosa/css/style850u?action=raw&ctype=text/css"> | ||
+ | <link rel="stylesheet" media="only screen and (max-width: 750px)" href="https://2013.igem.org/Team:NCTU Formosa/css/style850b?action=raw&ctype=text/css"> | ||
+ | <link rel="stylesheet" media="only screen and (max-width: 850px)" href="https://2013.igem.org/Team:NCTU Formosa/css/style750u?action=raw&ctype=text/css"> | ||
+ | <link rel="stylesheet" media="only screen and (max-width: 600px)" href="https://2013.igem.org/Team:NCTU_Formosa/css/style320b?action=raw&ctype=text/css"> | ||
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | ||
<script src="https://2013.igem.org/Team:Team:NCTU_Formosa/js/modernizr.custom?action=raw&ctype=text/javascript"></script> | <script src="https://2013.igem.org/Team:Team:NCTU_Formosa/js/modernizr.custom?action=raw&ctype=text/javascript"></script> | ||
<script> | <script> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
$(function() { | $(function() { | ||
- | |||
- | |||
- | |||
- | |||
var lastId, | var lastId, | ||
topMenu = $("#toc"), | topMenu = $("#toc"), | ||
topMenuHeight = 35, | topMenuHeight = 35, | ||
- | |||
menuItems = topMenu.find("a"), | menuItems = topMenu.find("a"), | ||
- | |||
scrollItems = menuItems.map(function(){ | scrollItems = menuItems.map(function(){ | ||
var item = $($(this).attr("href")); | var item = $($(this).attr("href")); | ||
Line 47: | Line 38: | ||
.parent().removeClass("active") | .parent().removeClass("active") | ||
.end().filter("[href=" + href +"]").parent().addClass("active"); | .end().filter("[href=" + href +"]").parent().addClass("active"); | ||
+ | menuItems | ||
+ | .closest(".toclevel-1").removeClass("active") | ||
+ | .end().filter("[href=" + href +"]").closest(".toclevel-1").addClass("active"); | ||
+ | menuItems | ||
+ | .closest(".toclevel-2").removeClass("active") | ||
+ | .end().filter("[href=" + href +"]").closest(".toclevel-2").addClass("active"); | ||
setTimeout(function(){ noScrollAction = false; }, 10); | setTimeout(function(){ noScrollAction = false; }, 10); | ||
} | } | ||
Line 52: | Line 49: | ||
e.preventDefault(); | e.preventDefault(); | ||
}); | }); | ||
- | |||
- | |||
$(window).scroll(function(){ | $(window).scroll(function(){ | ||
if(!noScrollAction){ | if(!noScrollAction){ | ||
- | |||
var fromTop = $(this).scrollTop()+topMenuHeight; | var fromTop = $(this).scrollTop()+topMenuHeight; | ||
- | |||
- | |||
var cur = scrollItems.map(function(){ | var cur = scrollItems.map(function(){ | ||
if ($(this).offset().top < fromTop) | if ($(this).offset().top < fromTop) | ||
return this; | return this; | ||
}); | }); | ||
- | |||
cur = cur[cur.length-1]; | cur = cur[cur.length-1]; | ||
var chk=0; | var chk=0; | ||
Line 72: | Line 63: | ||
if (lastId !== id) { | if (lastId !== id) { | ||
lastId = id; | lastId = id; | ||
- | |||
menuItems | menuItems | ||
.parent().removeClass("active") | .parent().removeClass("active") | ||
.end().filter("[href=#"+id+"]").parent().addClass("active"); | .end().filter("[href=#"+id+"]").parent().addClass("active"); | ||
+ | menuItems | ||
+ | .closest(".toclevel-1").removeClass("active") | ||
+ | .end().filter("[href=#"+id+"]").closest(".toclevel-1").addClass("active"); | ||
+ | menuItems | ||
+ | .closest(".toclevel-2").removeClass("active") | ||
+ | .end().filter("[href=#"+id+"]").closest(".toclevel-2").addClass("active"); | ||
} | } | ||
} | } | ||
Line 81: | Line 77: | ||
}) | }) | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
+ | if ($(document).scrollTop() > 409) { | ||
+ | $('#toc').stop().css({ | ||
+ | position: 'fixed', | ||
+ | left: '15px' | ||
+ | }).animate({'top': '111px'}, 500); | ||
+ | } | ||
+ | var long = false, | ||
+ | dheight = $(document).height(), | ||
+ | wheight = $(window).height(); | ||
+ | if($('#toc').height()+100>wheight) { long=true; } | ||
var away = false; | var away = false; | ||
- | |||
- | |||
$(document).scroll(function() { | $(document).scroll(function() { | ||
- | if ($(document).scrollTop() > | + | if ($(document).scrollTop() > dheight/2) { |
if (!away) { | if (!away) { | ||
if (long){ | if (long){ | ||
away = true; | away = true; | ||
$('#toc').stop().css({ | $('#toc').stop().css({ | ||
- | position: 'fixed' | + | position: 'fixed', |
- | }).animate({'top': | + | left: '15px' |
+ | }).animate({'top': -22-$('#toc').height()+wheight+'px'}, 500); | ||
}} | }} | ||
} else { | } else { | ||
away = false; | away = false; | ||
- | if ($(document).scrollTop() < | + | if ($(document).scrollTop() < 431){ |
$('#toc').stop().css({ | $('#toc').stop().css({ | ||
- | position: 'absolute' | + | position: 'absolute', |
- | }).animate({'top': '0px'}, 500) | + | left: '-265px' |
+ | }).animate({'top': '0px'}, 500); | ||
} | } | ||
else { | else { | ||
$('#toc').stop().css({ | $('#toc').stop().css({ | ||
- | position: 'fixed' | + | position: 'fixed', |
- | }).animate({'top': ' | + | left: '15px' |
+ | }).animate({'top': '111px'}, 500); | ||
} | } | ||
} | } | ||
}); | }); | ||
+ | $(window).resize(function() { | ||
+ | dheight = $(document).height(); | ||
+ | wheight = $(window).height(); | ||
+ | if($('#toc').height()+100>wheight) { long=true; } else {long=false;} | ||
+ | if($(window).width()<943) { | ||
+ | $('.changeFontText').css({opacity: '0.01'}); | ||
+ | $('.changeFontArrow').css({opacity: '0.01'}); | ||
+ | } else { | ||
+ | |||
+ | $('.changeFontText').css({opacity: '1'}); | ||
+ | $('.changeFontArrow').css({opacity: '1'}); | ||
+ | } | ||
+ | }); | ||
+ | var originalFontSize = $('.card').css('font-size'); | ||
+ | $(".resetFont").click(function(){ | ||
+ | $('.card').css('font-size', originalFontSize); | ||
+ | return false; | ||
+ | }); | ||
+ | $(".increaseFont").click(function(){ | ||
+ | var currentFontSize = $('.card').css('font-size'); | ||
+ | var currentFontSizeNum = parseFloat(currentFontSize, 10); | ||
+ | var newFontSize = currentFontSizeNum*1.2; | ||
+ | $('.card').css('font-size', newFontSize); | ||
+ | return false; | ||
+ | }); | ||
+ | $(".decreaseFont").click(function(){ | ||
+ | var currentFontSize = $('.card').css('font-size'); | ||
+ | var currentFontSizeNum = parseFloat(currentFontSize, 10); | ||
+ | var newFontSize = currentFontSizeNum*0.8; | ||
+ | $('.card').css('font-size', newFontSize); | ||
+ | return false; | ||
+ | }); | ||
+ | $("#back-top").hide(); | ||
+ | $(function () { | ||
+ | $(window).scroll(function () { | ||
+ | if ($(this).scrollTop() > 100) { | ||
+ | $('#back-top').fadeIn(); | ||
+ | } else { | ||
+ | $('#back-top').fadeOut(); | ||
+ | } | ||
+ | }); | ||
+ | $('#back-top a').click(function () { | ||
+ | $('body,html').animate({ | ||
+ | scrollTop: 0 | ||
+ | }, 500); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
}); | }); | ||
</script> | </script> |
Latest revision as of 13:28, 15 September 2014