Team:Virtus-Parva Mexico
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
+ | {{Team:VirtusParva/MainCss}} | ||
+ | |||
+ | |||
<html> | <html> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | < | + | <!-- this section changes the default wiki template to a |
- | + | white full width background --> | |
- | {{ | + | <style type="text/css"> |
+ | #contentSub, #footer-box, #catlinks, #search-controls, #p- | ||
+ | |||
+ | logo, .printfooter, .firstHeading,.visualClear {display: | ||
+ | |||
+ | none;} /*-- hides default wiki settings --*/ | ||
+ | |||
+ | #top-section { /*-- styling for default menu bar (edit, page, | ||
+ | |||
+ | history, etc.) --*/ | ||
+ | |||
+ | border: 0 none; | ||
+ | height: 14px; | ||
+ | z-index: 100; | ||
+ | top: 0; | ||
+ | position: fixed; | ||
+ | width: 975px; | ||
+ | left: 50%; | ||
+ | margin-left: -487px; | ||
+ | } | ||
+ | |||
+ | #globalWrapper, #content { /*-- changes default wiki settings | ||
+ | |||
+ | --*/ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | html, body, .wrapper { /*-- changes default wiki settings -- | ||
+ | |||
+ | */ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | </style> | ||
+ | <style type="text/css"> | ||
+ | nav ul ul { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | nav ul li:hover > ul { | ||
+ | display: block; | ||
+ | } | ||
+ | nav ul { | ||
+ | background: #efefef; | ||
+ | background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); | ||
+ | background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); | ||
+ | background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); | ||
+ | box-shadow: 0px 0px 9px rgba(0,0,0,0.15); | ||
+ | padding: 0 20px; | ||
+ | border-radius: 10px; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | display: inline-table; | ||
+ | } | ||
+ | nav ul:after { | ||
+ | content: ""; clear: both; display: block; | ||
+ | } | ||
+ | nav ul li { | ||
+ | float: left; | ||
+ | } | ||
+ | nav ul li:hover { | ||
+ | background: #4b545f; | ||
+ | background: linear-gradient(top, #4f5964 0%, #5f6975 40%); | ||
+ | background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); | ||
+ | background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); | ||
+ | } | ||
+ | nav ul li:hover a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | nav ul li a { | ||
+ | display: block; padding: 25px 40px; | ||
+ | color: #757575; text-decoration: none; | ||
+ | } | ||
+ | nav ul ul { | ||
+ | background: #5f6975; border-radius: 0px; padding: 0; | ||
+ | position: absolute; top: 100%; | ||
+ | } | ||
+ | nav ul ul li { | ||
+ | float: none; | ||
+ | border-top: 1px solid #6b727c; | ||
+ | border-bottom: 1px solid #575f6a; | ||
+ | position: relative; | ||
+ | } | ||
+ | nav ul ul li a { | ||
+ | padding: 15px 40px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | nav ul ul li a:hover { | ||
+ | background: #4b545f; | ||
+ | } | ||
+ | nav ul ul ul { | ||
+ | position: absolute; left: 100%; top:0; | ||
+ | } | ||
+ | </style> | ||
+ | <!-- here ends the section that changes the default wiki | ||
+ | |||
+ | template to a white full width background --> | ||
- | |||
- | < | + | <!-- beginning of your page --> |
- | + | ||
- | + | ||
<body> | <body> | ||
Line 76: | Line 174: | ||
document.title = 'Team Virtus-Parva | Home | @igem.org'; | document.title = 'Team Virtus-Parva | Home | @igem.org'; | ||
}); | }); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | $(document).ready(function () { | ||
+ | // cache the window object | ||
+ | $window = $(window); | ||
+ | |||
+ | $('section[data-type="background"]').each(function () { | ||
+ | // declare the variable to affect the defined data-type | ||
+ | var $scroll = $(this); | ||
+ | |||
+ | $(window).scroll(function () { | ||
+ | // HTML5 proves useful for helping with creating JS functions! | ||
+ | // also, negative value because we're scrolling upwards | ||
+ | var yPos = -($window.scrollTop() / $scroll.data('speed')); | ||
+ | |||
+ | // background position | ||
+ | var coords = '80% ' + yPos + 'px'; | ||
+ | |||
+ | // move the background | ||
+ | $scroll.css({ backgroundPosition: coords }); | ||
+ | }); // end window scroll | ||
+ | }); // end section function | ||
+ | |||
+ | $("#section-B").hide(); | ||
+ | $("#section-C").hide(); | ||
+ | $("#C-up").hide(); | ||
+ | $("#B-up").hide(); | ||
+ | |||
+ | $("#show-B").click(function () { | ||
+ | $("#section-B").slideToggle(); | ||
+ | $("#B-up").toggle(); | ||
+ | $("#B-down").toggle(); | ||
+ | }); | ||
+ | |||
+ | $("#show-C").click(function () { | ||
+ | $("#section-C").slideToggle(); | ||
+ | $("#C-up").toggle(); | ||
+ | $("#C-down").toggle(); | ||
+ | }); | ||
+ | |||
+ | }); // close out script | ||
+ | |||
+ | |||
+ | |||
+ | $(window).scroll(function () { | ||
+ | |||
+ | if ($(this).scrollTop() >= 240) { | ||
+ | $(".main-menue").css("background-color", "rgb(255, 255, 255)"); | ||
+ | } | ||
+ | |||
+ | if ($(this).scrollTop() < 240) { // this refers to window | ||
+ | $(".main-menue").css("background-color", "transparent"); | ||
+ | } | ||
+ | |||
+ | }); | ||
+ | |||
+ | var windowSize = $(window).height(); | ||
+ | $(".site-wrapper").css("height", windowSize); | ||
+ | |||
+ | |||
+ | // Change iGEM.ORG Wiki Style | ||
+ | $("#top-section").addClass("navbar-fixed-top hidden-xs hidden-sm hidden-md"); | ||
+ | $("#top-section").css("background-color", "white"); | ||
+ | $(".left-menu").css("float", "left"); | ||
+ | $(".right-menu").css("float", "right"); | ||
+ | |||
+ | $(".left-menu ul li").each(function () { | ||
+ | $(this).css("margin-right", "10px"); | ||
+ | }); | ||
+ | |||
+ | $(".right-menu ul li").each(function () { | ||
+ | $(this).css("margin-left", "10px"); | ||
+ | }); | ||
+ | |||
+ | $(".right-menu ul li:last-child").css("margin-right", "10px"); | ||
+ | |||
+ | $("html").css("margin-top", "-10px"); | ||
+ | |||
+ | |||
</script> | </script> | ||
Line 117: | Line 298: | ||
</script> | </script> | ||
</body> | </body> | ||
+ | |||
</html> | </html> | ||
+ | |||
+ | <!-- end of page --> |
Revision as of 21:05, 12 October 2014