"
Team:UPenn
From 2013.igem.org
(Difference between revisions)
m |
m |
||
| Line 21: | Line 21: | ||
$('html, body').animate({ | $('html, body').animate({ | ||
scrollTop: $(".one").offset().top, | scrollTop: $(".one").offset().top, | ||
| - | |||
}, '2400'); | }, '2400'); | ||
}); | }); | ||
| Line 28: | Line 27: | ||
$('html, body').animate({ | $('html, body').animate({ | ||
scrollTop: $(".two").offset().top, | scrollTop: $(".two").offset().top, | ||
| - | |||
}, '2400'); | }, '2400'); | ||
}); | }); | ||
| Line 35: | Line 33: | ||
$('html, body').animate({ | $('html, body').animate({ | ||
scrollTop: $(".three").offset().top, | scrollTop: $(".three").offset().top, | ||
| - | |||
}, '2400'); | }, '2400'); | ||
}); | }); | ||
| - | }); | + | |
| + | |||
| + | /* //function to check if elem is in view | ||
| + | function isScrolledIntoView(elem) | ||
| + | { | ||
| + | var docViewTop = $(window).scrollTop(); | ||
| + | var docViewBottom = docViewTop + $(window).height(); | ||
| + | |||
| + | var elemTop = $(elem).offset().top; | ||
| + | var elemBottom = elemTop + $(elem).height(); | ||
| + | |||
| + | return ((elemBottom <= docViewBottom) || (elemTop >= docViewTop)); | ||
| + | } | ||
| + | |||
| + | //check which element is in view and highlight corresponding circle | ||
| + | $(window).scroll(function() { | ||
| + | if (isScrolledIntoView(".one")) { | ||
| + | $("#one").css("background-color", "black"); | ||
| + | } | ||
| + | else { | ||
| + | $("#one").css("background-color", "white"); | ||
| + | } | ||
| + | });*/ | ||
| + | |||
| + | $(window).scroll(function() { | ||
| + | |||
| + | // Determine which section is in view and activate respective navigation link | ||
| + | $('.circle-inner').each(function() { | ||
| + | var scrollTo = $(this).data('goto'); | ||
| + | if ($window.scrollTop() >= scrollTo && $window.scrollTop() < scrollTo + viewportHeight) { | ||
| + | $(this).css('background-color', '#528B8B') | ||
| + | } else { | ||
| + | $(this).css('background-color', 'white'); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | }); | ||
| + | }); | ||
| Line 64: | Line 98: | ||
#slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 10px; color: #555555; font-size: 14px; font-weight: bold; display: block; } | #slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 10px; color: #555555; font-size: 14px; font-weight: bold; display: block; } | ||
#slider-code .active { color: #fff; background-color: #555555; } | #slider-code .active { color: #fff; background-color: #555555; } | ||
| + | |||
| + | |||
| + | |||
| + | @font-face | ||
| + | { | ||
| + | font-family: bebas; | ||
| + | src: url('https://googledrive.com/host/0B4ZBZOYYKBzEdC1mMURfM2FlRkk'); | ||
| + | } | ||
| + | |||
.outer { | .outer { | ||
| Line 70: | Line 113: | ||
float: center; | float: center; | ||
height: 100%; | height: 100%; | ||
| - | background-color: # | + | background-color: #FFFFFF; |
} | } | ||
| Line 110: | Line 153: | ||
#navigation { | #navigation { | ||
position: fixed; | position: fixed; | ||
| - | right: | + | right: 0px; |
top: 100px; | top: 100px; | ||
list-style-type: none; | list-style-type: none; | ||
| Line 117: | Line 160: | ||
#navigation li { | #navigation li { | ||
| + | z-index:9999; | ||
height: 20px; | height: 20px; | ||
margin: 30px; | margin: 30px; | ||
| Line 126: | Line 170: | ||
-o-border-radius: 100%; | -o-border-radius: 100%; | ||
border-radius: 100%; | border-radius: 100%; | ||
| - | opacity: | + | opacity: 1; |
} | } | ||
| Line 172: | Line 216: | ||
.wrapper { | .wrapper { | ||
background-color: rgb(230,230,230); | background-color: rgb(230,230,230); | ||
| - | opacity: | + | opacity: 1; |
height: 500px; | height: 500px; | ||
width: 90%; | width: 90%; | ||
float: center; | float: center; | ||
| - | |||
margin: 50px; | margin: 50px; | ||
| Line 198: | Line 241: | ||
} | } | ||
| + | .nav { | ||
| + | padding: 0px; | ||
| + | background-color: white; | ||
| + | } | ||
| + | .nav li { | ||
| + | display: inline; | ||
| + | margin: 0px 30px 30px 0px; | ||
| + | font-family: bebas, Verdana, sans-serif; | ||
| + | } | ||
#tabs li { | #tabs li { | ||
| Line 237: | Line 289: | ||
| - | <div class="space"></div> | + | <div class="space"> |
| + | <ul class="nav"> | ||
| + | <li>Home</li> | ||
| + | <li>Team</li> | ||
| + | <li>Official Team Profile</li> | ||
| + | <li>Project</li> | ||
| + | <li>Parts</li> | ||
| + | <li>Modeling</li> | ||
| + | <li>Notebook</li> | ||
| + | <li>Safety</li> | ||
| + | |||
| + | </ul> | ||
| + | |||
| + | |||
| + | |||
| + | </div> | ||
<ul id="navigation"> | <ul id="navigation"> | ||
Revision as of 14:25, 24 June 2013
