|
|
| (5 intermediate revisions not shown) |
| Line 2: |
Line 2: |
| | <style> | | <style> |
| | | | |
| | + | a:hover { |
| | + | text-decoration: none; |
| | + | } |
| | + | |
| | + | #navlist { |
| | + | margin: 0; |
| | + | padding: 0; |
| | + | margin-left: 8px; |
| | + | } |
| | + | |
| | + | #navlist li { |
| | + | display: block; |
| | + | list-style-type: none; |
| | + | float:left; |
| | + | padding: 0; |
| | + | margin: 0; |
| | + | } |
| | + | |
| | + | .menu_button { |
| | + | display:block; |
| | + | color: #fff; |
| | + | border: none; |
| | + | background-repeat: none; |
| | + | height:45px; |
| | + | cursor: pointer; |
| | + | } |
| | | | |
| | .menu_button_home { | | .menu_button_home { |
| Line 71: |
Line 97: |
| | </ul> | | </ul> |
| | <style> | | <style> |
| - | .button_pointer { cursor:pointer; }
| |
| | .button_hover { background-color: #aaa; } | | .button_hover { background-color: #aaa; } |
| | </style> | | </style> |
| | | | |
| - | <script type="text/javascript">
| |
| - |
| |
| - | function isUndefined(x) { var u; return x === u; }
| |
| - |
| |
| - | var activePage = "</html>{{{contentpage|home}}}<html>";
| |
| - |
| |
| - | var pageCache = {};
| |
| - |
| |
| - | function getPageURL(page) {
| |
| - | return "https://2010.igem.org/Team:TU_Delft/pages/" + page + "?action=render";
| |
| - | }
| |
| - |
| |
| - | function setupPage(page) {
| |
| - | var btn= $(".menu_button_" + page);
| |
| - | var pageURL = getPageURL(page);
| |
| - | btn.click(function(event) {
| |
| - | var cpw = $("#content_page_wrap");
| |
| - | cpw.fadeOut(200);
| |
| - | event.preventDefault();
| |
| - |
| |
| - | if (isUndefined(pageCache[page])) {
| |
| - |
| |
| - | $.get(pageURL, function(data) {
| |
| - | pageCache[page]=data;
| |
| - | cpw.fadeIn(200);
| |
| - | cpw.html(data);
| |
| - | });
| |
| - | }
| |
| - | else {
| |
| - | cpw.fadeIn(200);
| |
| - | cpw.html(pageCache[page]);
| |
| - | }
| |
| - |
| |
| - | $(".menu_button_" + activePage).removeClass("menu_button_"+activePage+"_sel");
| |
| - | activePage = page;
| |
| - | $(".menu_button_" + activePage).addClass("menu_button_"+activePage+"_sel");
| |
| - |
| |
| - | });
| |
| - |
| |
| - | // setup hovering
| |
| - | var btnCssClassSelected = "menu_button_" + page + "_sel";
| |
| - | btn.hover(function() {
| |
| - | if (page != activePage)
| |
| - | btn.addClass(btnCssClassSelected);
| |
| - | }, function() {
| |
| - | if (page != activePage)
| |
| - | btn.removeClass(btnCssClassSelected);
| |
| - | });
| |
| - |
| |
| - | btn.addClass("button_pointer");
| |
| - | if (page == activePage)
| |
| - | btn.addClass("menu_button_"+activePage+"_sel");
| |
| - | }
| |
| - |
| |
| - | // this runs when page is loaded
| |
| - | $(function() {
| |
| - | var pages = [ "home", "blog", "competition", "background", "project", "education", "sponsors", "press" ];
| |
| - | for(var i in pages) {
| |
| - | var page = pages[i];
| |
| - | setupPage(pages[i]);
| |
| - | $.get(getPageURL(page), function(data) {
| |
| - | pageCache[page] = data;
| |
| - | });
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | </script>
| |
| | </html> | | </html> |
"
