|
|
(66 intermediate revisions not shown) |
Line 1: |
Line 1: |
| __NOTOC__ | | __NOTOC__ |
- | {{:Team:TU_Delft/header}} | + | {{:Team:TU_Delft/header2}} |
| <html> | | <html> |
| + | |
| + | <!-- Scripting - START /--> |
| + | <script type="text/javascript" src="http://github.com/cowboy/jquery-hashchange/raw/v1.3/jquery.ba-hashchange.js"></script> |
| + | |
| + | <script type="text/javascript" src="https://2010.igem.org/Team:TU_Delft/files/main_test.js?action=raw&ctype=text/javascript"></script> |
| + | |
| + | <!-- Scripting - END /--> |
| + | |
| <div id="menu_wrap"> | | <div id="menu_wrap"> |
| + | |
| </html> | | </html> |
| {{:Team:TU_Delft/menu2|contentpage={{{contentpage|home}}} }} | | {{:Team:TU_Delft/menu2|contentpage={{{contentpage|home}}} }} |
| <html> | | <html> |
| + | |
| </div> | | </div> |
| + | |
| <div id="content_wrap"> | | <div id="content_wrap"> |
| + | |
| <div id="content_table"> | | <div id="content_table"> |
| + | |
| <div id="top_row"> </div> | | <div id="top_row"> </div> |
| + | |
| <div class="main_row"> | | <div class="main_row"> |
| + | |
| <div id="main_td"> | | <div id="main_td"> |
| | | |
| <style> | | <style> |
| #panel_mask { | | #panel_mask { |
- | width: 650px; | + | width: 925px; |
| overflow:hidden; | | overflow:hidden; |
| margin:0 auto; | | margin:0 auto; |
| + | min-height: 500px; |
| } | | } |
| .page_panel { | | .page_panel { |
| float:left; | | float:left; |
- | width: 650px; | + | width: 925px; |
| padding-right:10px; | | padding-right:10px; |
| } | | } |
Line 27: |
Line 43: |
| | | |
| <div id="panel_mask"> | | <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">
| + | <div id="load"> |
- | </html>{{:Team:TU_Delft/pages/home}}<html>
| + | <div id="loading">LOADING, please wait...</div> |
- | </div>
| + | </div> |
- |
| + | |
- | <div id="page_blog" class="page_panel">
| + | |
- | </html>{{:Team:TU_Delft/pages/blog}}<html>
| + | |
- | </div>
| + | |
| | | |
- | <div id="page_competition" class="page_panel">
| + | </div> |
- | </html>{{:Team:TU_Delft/pages/competition}}<html>
| + | </div> |
- | </div>
| + | </div> |
| | | |
- | <div id="page_background" class="page_panel">
| + | <div id="bottom_row"> </div> |
- | </html>{{:Team:TU_Delft/pages/background}}<html>
| + | |
- | </div>
| + | |
| | | |
- | <div id="page_project" class="page_panel">
| + | </div> |
- | </html>{{:Team:TU_Delft/pages/project}}<html>
| + | |
- | </div>
| + | |
| | | |
- | <div id="page_education" class="page_panel">
| + | <div id="footer_wrap"> |
- | </html>{{:Team:TU_Delft/pages/education}}<html>
| + | |
- | </div>
| + | |
- |
| + | |
- | <div id="page_sponsors" class="page_panel">
| + | |
- | </html>{{:Team:TU_Delft/pages/sponsors}}<html>
| + | |
- | </div>
| + | |
- |
| + | |
- | <div id="page_press" class="page_panel">
| + | |
- | </html>{{:Team:TU_Delft/pages/press}}<html>
| + | |
- | </div>
| + | |
- | <!-- CONTENT ENDS HERE /-->
| + | |
- | </div>
| + | |
- | </div>
| + | |
| | | |
- | </div>
| |
- | <div id="left_td">
| |
| </html> | | </html> |
- | {{:Team:TU_Delft/left}} | + | {{:Team:TU_Delft/footer}} |
| <html> | | <html> |
- | </div>
| + | |
- | </div>
| + | |
- | <div id="bottom_row"> </div>
| + | |
| </div> | | </div> |
| + | |
| </div> | | </div> |
- | <div id="footer_wrap"></html>
| |
- | {{:Team:TU_Delft/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:TU_Delft/]", elem).each(function()
| |
- | {
| |
- | alert(this.href);
| |
- | this.href = this.href.replace("Team:TU_Delft/", wgPageName+ "#/");
| |
- | });
| |
- | }
| |
- |
| |
- | // this runs when page is loaded
| |
- | $(function() {
| |
- | var pages = [ "home", "blog", "project", "team", "contact", "education", "sponsors", "gallery" ];
| |
- | var maxHeight = 0;
| |
- | for(var i=0; i<pages.length;i++) {
| |
- | var page=pages[i];
| |
- | setupTabButton(page);
| |
- |
| |
- | if(wgUserName != null) {
| |
- | var editurl = wgServer+"/Team:TU_Delft/pages/"+page+"?action=edit";
| |
- | $("#page_" + page + ">*:first").before($("<a href=\""+editurl+ "\">Edit " + page + "</a>"));
| |
- | }
| |
- |
| |
- | var pgHeight = $("#page_"+page).height();
| |
- | if(pgHeight > maxHeight) maxHeight = pgHeight;
| |
- | }
| |
- | rewriteLinks($("#panel"));
| |
- |
| |
- | $(".page_panel").height(maxHeight).each(function() { rewriteLinks(this); });
| |
- | // $('#panel_mask').height(maxHeight);
| |
- |
| |
- | //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));
| |
- |
| |
- | //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
| |
- | $('#panel div').width($('#panel_mask').width());
| |
- |
| |
- | // 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:TU_Delft/"+page+"?action=render";
| |
- |
| |
- | $("#panel").hide(200);
| |
- |
| |
- | $.get(url, function(data) {
| |
- | $("#subpage_panel").html(data).show(200);
| |
- | rewriteLinks($("#subpage_panel"));
| |
- | });
| |
- | } else {
| |
- | $("#subpage_panel").hide(200, function() {
| |
- | $("#panel").show(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> | | </html> |