|
|
| (One intermediate revision not shown) |
| 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 *** -->
| |
| | | | |
| - |
| |
| - | <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>
| |
"
