|
|
Line 1: |
Line 1: |
- | <!-- *** What falls between these lines is the Alert Box! You can remove it from your pages once you have read and understood the alert *** -->
| |
| | | |
- | {{:Team:TU_Delft/header}}
| |
- | <html>
| |
- | <div id="menu_wrap">
| |
- | </html>
| |
- | {{:Team:TU_Delft/menu|contentpage={{{contentpage|home}}} }}
| |
- | <html>
| |
- | </div>
| |
- | <div id="content_wrap">
| |
- | <div id="content_table">
| |
- | <div id="top_row"> </div>
| |
- | <div class="main_row">
| |
- | <div id="main_td">
| |
- |
| |
- | <style>
| |
- | #panel_mask {
| |
- | width: 925px;
| |
- | overflow:hidden;
| |
- | margin:0 auto;
| |
- | }
| |
- | .page_panel {
| |
- | float:left;
| |
- | width: 925px;
| |
- | 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:TU_Delft/pages/home}}<html>
| |
- | </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 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()
| |
- | {
| |
- | 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>
| |
- |
| |
- | </html>
| |