Difference between revisions of "Team:DTU-Denmark/achievements"

Line 4: Line 4:
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
−
    <title>Bootstrap Example</title>
+
  <title>Bootstrap Example</title>
−
    <meta charset="utf-8">
+
  <meta charset="utf-8">
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
    <!--<style>
+
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
−
    .body {
+
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
−
        position: relative;
+
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
  <style>
 +
  body {
 +
      position: relative;
 +
  }
 +
  .affix {
 +
      top: 20px;
 +
  }
 +
  div.col-sm-9 div {
 +
      height: 250px;
 +
      font-size: 28px;
 +
  }
 +
  #overview {color: #fff; background-color: #1E88E5;}
 +
  #medal-requirements {color: #fff; background-color: #673ab7;}
 +
  #bronze {color: #fff; background-color: #ff9800;}
 +
  #silver {color: #fff; background-color: #00bcd4;}
 +
  #gold {color: #fff; background-color: #009688;}
 +
 
 +
  @media screen and (max-width: 810px) {
 +
    #overview, #medal-requirements, #bronze, #silver, #gold {
 +
        margin-left: 150px;
 
     }
 
     }
−
       
+
  }
−
    .affix {
+
  </style>
−
        top: 20px;
+
</head>
−
    }
+
<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
−
   
+
−
    div.col-sm-9 div {
+
−
        height: 250px;
+
−
        font-size: 28px;
+
−
    }
+
−
   
+
−
    #overview {color: #fff; background-color: #1E88E5;}
+
−
    #medal-requirements {color: #fff; background-color: #673ab7;}
+
−
    #bronze {color: #fff; background-color: #ff9800;}
+
−
    #silver {color: #fff; background-color: #00bcd4;}
+
−
    #gold {color: #fff; background-color: #009688;}
+
−
   
+
−
    @media screen and (max-width: 810px) {
+
−
        #overview, #medal-requirements, #bronze, #silver, #gold {
+
−
            margin-left: 150px;
+
−
        }
+
−
    }
+
−
    </style>-->
+
−
 
+
−
    <script>
+
−
        /* activate sidebar */
+
−
        $('#sidebar').affix({
+
−
          offset: {
+
−
            top: 235
+
−
          }
+
−
        });
+
  
−
        /* activate scrollspy menu */
+
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:220px;">
−
        var $body   = $(document.body);
+
  <h1>Scrollspy & Affix Example</h1>
−
        var navHeight = $('.navbar').outerHeight(true) + 10;
+
  <h3>Fixed vertical sidenav on scroll</h3>
 +
   <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
 +
  <p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p>
 +
</div>
 +
<br>
  
−
         $body.scrollspy({
+
<div class="container">
−
            target: '#rightCol',
+
<div class="row"> <!--Must sorround both content and sidebar-->
−
             offset: navHeight
+
    <div class="col-md-9">
−
         });
+
      <div id="overview">
 +
         <h1>Overview</h1>
 +
        <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
 +
      </div>
 +
     
 +
      <div id="medal-requirements">
 +
        <h1>Medal requirements</h1>
 +
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
      </div>
 +
      <div id="bronze">
 +
        <h1>Bronze</h1>
 +
        <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
 +
              
 +
         Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
  
−
         /* smooth scrolling sections */
+
         Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p>
−
        $('a[href*=#]:not([href=#])').click(function() {
+
      </div>
−
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
+
      <div id="silver">
−
              var target = $(this.hash);
+
        <h1>Silver</h1>
−
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
−
              if (target.length) {
+
 
−
                $('html,body').animate({
+
            Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
−
                  scrollTop: target.offset().top - 50
+
−
                }, 1000);
+
−
                return false;
+
−
              }
+
−
            }
+
−
        });       
+
−
    </script>
+
−
</head>
+
−
<div class="container"></div>
+
−
<div id="masthead">
+
−
  <div class="container">
+
−
      <div class="row">
+
−
          <div class="col-md-7">
+
−
            <h1>Achievements
+
−
                <p class="lead">in short</p>
+
−
            </h1>
+
−
          </div>
+
−
          <div class="col-md-5">
+
−
            <div class="well well-lg">
+
−
                <div class="row">
+
−
                    <div class="col-sm-6">
+
−
                  <img src="//placehold.it/180x100" class="img-responsive">
+
−
                    </div>
+
−
                    <div class="col-sm-6">
+
−
                  Some text here
+
−
                    </div>
+
−
                </div>
+
−
               
+
−
            </div>
+
−
             
+
−
          </div>
+
−
         
+
−
      </div>
+
−
  </div> <!-- /container -->
+
−
</div> <!-- /masthead -->
+
  
−
<!-- main -->
+
             Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p>
−
<div class="container">
+
      </div>
−
    <div class="row">
+
      <div id="gold">
−
        <!-- left -->
+
        <h1>Gold</h1>
−
        <div class="col-md-9">
+
             <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
−
             <h2 id="overview">Overview</h2>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
             <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <hr>
+
 
              
 
              
−
             <h2 id="medal-requirements">Medal Requirements</h2>
+
             Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
 
−
            <hr>
+
             Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p>
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
      </div>
−
            <hr>
+
    </div>
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
   
−
            <hr>
+
    <nav class="col-md-3 sm-hidden" id="myScrollspy">
−
             <hr>
+
         <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="300">
−
           
+
−
            <h2 class="bronze">Bronze</h2>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <hr>
+
−
           
+
−
            <h2 class="silver">Silver</h2>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <hr>
+
−
           
+
−
            <h2 class="gold">Gold</h2>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.</p>
+
−
            <hr>
+
−
            <div class="row">
+
−
                <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
+
−
                <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
+
−
                <div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
+
−
            </div>
+
−
            <hr>
+
−
            <hr>
+
−
           
+
−
           
+
−
        </div> <!-- /left -->
+
−
       
+
−
        <!-- right -->
+
−
        <div class="col-md-3" id="rightCol">
+
−
         <ul class="nav nav-stacked" id="sidebar">
+
 
             <li><a href="#overview">OVERVIEW</a></li>
 
             <li><a href="#overview">OVERVIEW</a></li>
−
             <li><a href="#medal-requirements">MEDAL REQUIREMENTS</a></li>
+
             <li><a href="#medal-requirements">OVERVIEW</a></li>
 
             <li><a href="#bronze">BRONZE</a></li>
 
             <li><a href="#bronze">BRONZE</a></li>
 
             <li><a href="#silver">SILVER</a></li>
 
             <li><a href="#silver">SILVER</a></li>
 
             <li><a href="#gold">GOLD</a></li>
 
             <li><a href="#gold">GOLD</a></li>
 
         </ul>
 
         </ul>
−
      </div> <!-- /right -->
+
    </nav>
−
       
+
</div>
−
    </div> <!-- /row -->
+
</div>
−
</div> <!-- /container -->
+
 
 +
</body>
 
</html>
 
</html>

Revision as of 12:46, 13 August 2016

New HTML template for the wiki


Bootstrap Example

Scrollspy & Affix Example

Fixed vertical sidenav on scroll

Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".

The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.


Overview

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.

Medal requirements

Try to scroll this section and look at the navigation list while scrolling!

Bronze

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea. Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.

Silver

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea. Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.

Gold

Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea. Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.