|
|
Line 1: |
Line 1: |
| __NOTOC__ | | __NOTOC__ |
- | {{:Team:TU_Delft/header}} | + | {{:Team:TU_Delft/header2}} |
| <html> | | <html> |
| + | |
| <div id="menu_wrap"> | | <div id="menu_wrap"> |
| + | |
| </html> | | </html> |
- | {{:Team:TU_Delft/menu|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"> |
| | | |
Line 18: |
Line 26: |
| overflow:hidden; | | overflow:hidden; |
| margin:0 auto; | | margin:0 auto; |
| + | min-height: 500px; |
| } | | } |
| .page_panel { | | .page_panel { |
Line 27: |
Line 36: |
| | | |
| <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">
| |
- | </html>{{:Team:TU_Delft/pages/competition}}<html>
| |
- | </div>
| |
- |
| |
- | <div id="page_background" class="page_panel">
| |
- | </html>{{:Team:TU_Delft/pages/background}}<html>
| |
- | </div>
| |
- |
| |
- | <div id="page_project" class="page_panel">
| |
- | </html>{{:Team:TU_Delft/pages/project}}<html>
| |
- | </div>
| |
- |
| |
- | <div id="page_education" class="page_panel">
| |
- | </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>
| |
- | <div id="bottom_row"> </div>
| |
| </div> | | </div> |
| </div> | | </div> |
- | <div id="footer_wrap"></html>
| + | </div> |
- | {{:Team:TU_Delft/footer}}
| + | |
- | <html></div>
| + | |
- | </div> | + | |
| | | |
- | <!-- CODE SECTION --> | + | <div id="bottom_row"> </div> |
| | | |
- | <script type="text/javascript"> | + | </div> |
| | | |
- | function isUndefined(x) { var u; return x === u; }
| + | <div id="footer_wrap"> |
| | | |
- | var activePage = "</html>{{{contentpage|home}}}<html>";
| + | </html> |
- | var pageCache = {};
| + | {{:Team:TU_Delft/footer}} |
| + | <html> |
| | | |
- | function setupTabButton(page) {
| + | </div> |
- | 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()
| + | |
- | {
| + | |
- | this.href = this.href.replace("Team:TU_Delft/", wgPageName+ "#/");
| + | |
- | });
| + | |
- | }
| + | |
- | | + | |
- | var pages = [ "home", "blog", "competition", "background", "project", "press", "education", "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(8000);
| + | |
- | }
| + | |
- | | + | |
- | // this runs when page is loaded
| + | |
- | $(function() {
| + | |
- | for(var i=0; i<pages.length;i++) {
| + | |
- | var page=pages[i];
| + | |
- | setupTabButton(page);
| + | |
- | | + | |
- | }
| + | |
- | $(".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.path.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").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>
| + | |
| | | |
| + | </div> |
| </html> | | </html> |