Team:Wisconsin-Madison/Safety
From 2010.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | + | __NOTOC__ | |
- | + | ||
- | + | ||
{{:Team:UW_Madison/header}} | {{:Team:UW_Madison/header}} | ||
+ | <html> | ||
+ | <div id="menu_wrap"> | ||
+ | </html> | ||
{{:Team:UW_Madison/menu|contentpage={{{contentpage|home}}} }} | {{:Team:UW_Madison/menu|contentpage={{{contentpage|home}}} }} | ||
- | {{:Team:UW_Madison/pages/home}} | + | <html> |
- | {{:Team:UW_Madison/pages/ | + | </div> |
- | {{:Team:UW_Madison/pages/ | + | <div id="content_wrap"> |
- | {{:Team:UW_Madison/pages/ | + | <div id="content_table"> |
- | {{:Team:UW_Madison/pages/ | + | <div id="top_row"> </div> |
- | {{:Team:UW_Madison/pages/ | + | <div class="main_row"> |
- | {{:Team:UW_Madison/pages/sponsors}} | + | <div id="main_td"> |
- | + | ||
- | {{:Team:UW_Madison/footer} | + | <style> |
+ | #panel_mask { | ||
+ | width: 650px; | ||
+ | overflow:hidden; | ||
+ | margin:0 auto; | ||
+ | } | ||
+ | .page_panel { | ||
+ | float:left; | ||
+ | width: 650px; | ||
+ | padding-right:10px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <div id="panel_mask"> | ||
+ | <!-- to load pages that are not in the main sliding pages --> | ||
+ | <div id="subpage_panel" style="display:hidden;"></div> | ||
+ | <div id="panel"> | ||
+ | <!-- CONTENT STARTS HERE /--> | ||
+ | |||
+ | <div id="page_home" class="page_panel"> | ||
+ | </html>{{:Team:UW_Madison/pages/home}}<html> | ||
+ | </div> | ||
+ | |||
+ | <div id="page_blog" class="page_panel"> | ||
+ | </html>{{:Team:UW_Madison/pages/blog}}<html> | ||
+ | </div> | ||
+ | |||
+ | <div id="page_competition" class="page_panel"> | ||
+ | </html>{{:Team:UW_Madison/pages/competition}}<html> | ||
+ | </div> | ||
+ | |||
+ | <div id="page_background" class="page_panel"> | ||
+ | </html>{{:Team:UW_Madison/pages/background}}<html> | ||
+ | </div> | ||
+ | |||
+ | <div id="page_project" class="page_panel"> | ||
+ | </html>{{:Team:UW_Madison/pages/project}}<html> | ||
+ | </div> | ||
+ | |||
+ | <div id="page_education" class="page_panel"> | ||
+ | </html>{{:Team:UW_Madison/pages/education}}<html> | ||
+ | </div> | ||
+ | |||
+ | <div id="page_sponsors" class="page_panel"> | ||
+ | </html>{{:Team:UW_Madison/pages/sponsors}}<html> | ||
+ | </div> | ||
+ | |||
+ | <div id="page_press" class="page_panel"> | ||
+ | </html>{{:Team:UW_Madison/pages/press}}<html> | ||
+ | </div> | ||
+ | <!-- CONTENT ENDS HERE /--> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="bottom_row"> </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="footer_wrap"></html> | ||
+ | {{:Team:UW_Madison/footer}} | ||
+ | <html></div> | ||
+ | </div> | ||
+ | |||
+ | <!-- CODE SECTION --> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | |||
+ | function isUndefined(x) { var u; return x === u; } | ||
+ | |||
+ | var activePage = "</html>{{{contentpage|home}}}<html>"; | ||
+ | var pageCache = {}; | ||
+ | |||
+ | function setupTabButton(page) { | ||
+ | var btn= $(".menu_button_" + page); | ||
+ | btn.click(function(event) { | ||
+ | $.address.value(page); | ||
+ | return false; | ||
+ | }); | ||
+ | |||
+ | // 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"); | ||
+ | } | ||
+ | |||
+ | // rewrite links to load with AJAX within the frame | ||
+ | function rewriteLinks(elem) { | ||
+ | // TODO: replace full links too (with "http://..")? | ||
+ | $("a[href^=/Team:UW_Madison/]", elem).each(function() | ||
+ | { | ||
+ | this.href = this.href.replace("Team:UW_Madison/", wgPageName+ "#/"); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | var pages = [ "home", "project", "parts", "notebook", "safety", "team", "sponsors" ]; | ||
+ | |||
+ | function updatePageMaskHeight() | ||
+ | { | ||
+ | var maxHeight = 0; | ||
+ | for(var i=0; i<pages.length;i++) { | ||
+ | var page=pages[i]; | ||
+ | |||
+ | var pgHeight = $("#page_"+page).height(); | ||
+ | if(pgHeight > maxHeight) maxHeight = pgHeight; | ||
+ | } | ||
+ | |||
+ | // $('#panel_mask').height(maxHeight); | ||
+ | // $('.page_panel').height(maxHeight); | ||
+ | $("#panel_mask").height(2000); | ||
+ | } | ||
+ | |||
+ | // this runs when page is loaded | ||
+ | $(function() { | ||
+ | for(var i=0; i<pages.length;i++) { | ||
+ | var page=pages[i]; | ||
+ | setupTabButton(page); | ||
+ | |||
+ | if(wgUserName != null) { | ||
+ | var editurl = wgServer+"/Team:UW_Madison/pages/"+page+"?action=edit"; | ||
+ | $("#page_" + page + ">*:first").before($("<a href=\""+editurl+ "\">Edit " + page + "</a>")); | ||
+ | } | ||
+ | } | ||
+ | $(".page_panel").each(function() { rewriteLinks(this); }); | ||
+ | updatePageMaskHeight(); | ||
+ | |||
+ | //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same) | ||
+ | $('#panel .page_panel').width($('#panel_mask').width()); | ||
+ | |||
+ | //Calculate the total width - sum of all sub-panels width | ||
+ | //Width is generated according to the width of #mask * total of sub-panels | ||
+ | $('#panel').width(parseInt($('#panel_mask').width() * $('#panel div').length)); | ||
+ | |||
+ | // instead of button click handler, all actions pass through the address bar so history works too | ||
+ | $.address.change(function(event) { | ||
+ | var page = event.value.substring(1); | ||
+ | if(page=='') page = activePage; | ||
+ | |||
+ | $(".menu_button_" + activePage).removeClass("menu_button_" + activePage + "_sel"); | ||
+ | activePage = page; | ||
+ | |||
+ | if($.inArray(page, pages) < 0) { | ||
+ | // hide tab content, and load new page | ||
+ | var url = wgServer+"/Team:UW_Madison/"+page+"?action=render"; | ||
+ | |||
+ | $("#panel").fadeOut(200); | ||
+ | |||
+ | $.get(url, function(data) { | ||
+ | $("#subpage_panel").html(data).fadeIn(200); | ||
+ | rewriteLinks($("#subpage_panel")); | ||
+ | }); | ||
+ | } else { | ||
+ | $("#subpage_panel").fadeOut(200, function() { | ||
+ | $("#panel").fadeIn(200); | ||
+ | }); | ||
+ | |||
+ | // remove old page if any, show tab content | ||
+ | $(".menu_button_" + activePage).addClass("menu_button_" + activePage + "_sel"); | ||
+ | |||
+ | //Get the height of the sub-panel | ||
+ | var panelheight = $("#page_" + page).height(); | ||
+ | |||
+ | //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor | ||
+ | $('#panel_mask').scrollTo("#page_" + page, 400); | ||
+ | |||
+ | //Resize the height | ||
+ | // $('#panel_mask').animate({ 'height': panelheight }, { duration: 50 }); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | </html> |
Revision as of 08:04, 3 July 2010
This is the home page.
Here is where sponsors will go.