Team:McMaster-Ontario

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:McMaster-Ontario/header}}
+
{{:Team:McMaster-Ontario/header}} <!-- Removes Styling -->
<!--
<!--
{{:Team:McMaster-Ontario/menu}}
{{:Team:McMaster-Ontario/menu}}
Line 7: Line 7:
<html>
<html>
-
    <head>
 
-
        <title>jQuery Anchor Slide</title>
 
-
        <!-- import jQuery -->
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
-
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
+
<script>
 +
jQuery(document).ready(function($) {
 +
 +
$(".scroll").click(function(event){
 +
event.preventDefault();
 +
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
 +
});
 +
});
 +
</script>
-
        <!-- import the plugin -->
 
-
        <script src="jquery.anchor.js"></script>
 
-
        <!-- use the plugin :) -->
 
-
        <script>
 
-
            $(document).ready(function() {
 
-
                $("a.anchor").anchorAnimate({offset:50})
 
-
            });
 
-
        </script>
 
-
    </head>
 
-
    <body>
+
<div style = "position:fixed;top:50">
-
 
+
<a href = "#alpha" class = "scroll">Alpha</a>
-
        <ul>
+
<a href = "#beta" class = "scroll">Beta</a>
-
            <li><a href="#anchor01" class="anchor">Anchor 01</a></li>
+
<a href = "#gamma" class = "scroll">Gamma</a>
-
            <li><a href="#anchor02" class="anchor">Anchor 02</a></li>
+
</div>
-
            <li><a href="#anchor03" class="anchor">Anchor 03</a></li>
+
<div id = "alpha" style = "height: 500px;">
-
            <li><a href="#anchor04" class="anchor">Anchor 04</a></li>
+
One
-
            <li><a href="#anchor05" class="anchor">Anchor 05</a></li>
+
</div>
-
        </ul>
+
<div id = "beta" style = "height: 500px;">
-
 
+
Two
-
 
+
</div>
-
        <a id="anchor01">Anchor 01</a>
+
<div id = "gamma" style = "height: 500px;">
-
        <p>
+
Three
-
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis dui, accumsan non faucibus ac, lacinia sed elit. Mauris nibh turpis, faucibus vitae lacinia vel, pulvinar nec leo. Mauris eget nibh sapien. Cras tempus, risus vitae pellentesque euismod, tellus quam faucibus metus, quis pellentesque ligula tortor vitae tortor. Sed id lorem felis. Vivamus at erat urna. Phasellus libero mauris, gravida in rhoncus eu, porta iaculis mauris. Cras commodo odio lacus, vitae interdum libero. Nulla ac quam vitae ipsum varius congue. Quisque commodo libero id nisl euismod sagittis. Duis faucibus malesuada nunc vel porttitor.
+
</div>
-
 
+
-
            Maecenas vel eros id felis tempus fringilla sed vitae ligula. Aliquam facilisis ultrices ligula, vitae sagittis erat tincidunt sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus erat sem, mattis eget volutpat quis, porttitor id orci. Vestibulum ut nisl pulvinar metus commodo ultricies. Donec dui lacus, laoreet quis scelerisque quis, ornare vitae felis. Duis interdum lectus eu nulla posuere vitae scelerisque dolor sagittis. Ut porta tempor fringilla.
+
-
 
+
-
            Cras convallis libero ligula, nec mattis ante. Praesent malesuada, mauris sit amet cursus hendrerit, augue ante tempus tortor, et accumsan enim mauris in tortor. Sed malesuada consequat magna sed scelerisque. Ut quam nisl, sagittis quis lobortis ut, vehicula ac ipsum. Sed eu purus ac ligula consequat commodo at et ante. Nulla tristique condimentum leo nec molestie. Cras lacus neque, commodo eu rhoncus ut, facilisis eget eros. Vivamus vitae urna nec massa sollicitudin gravida non et ante.
+
-
 
+
-
            Praesent ullamcorper, sapien eget rutrum blandit, elit augue egestas magna, et eleifend leo sapien nec ante. Proin lacinia consequat enim, sed ultricies neque convallis eu. Suspendisse accumsan tellus ac nunc consequat vel porttitor justo commodo. Sed dui augue, viverra ac euismod nec, feugiat feugiat nisi. Proin iaculis dignissim aliquet. Maecenas dolor justo, accumsan quis condimentum ut, consectetur a erat. Pellentesque placerat, eros et vehicula convallis, enim metus ornare velit, sed faucibus diam velit ut eros. Donec congue odio eget dolor accumsan vel sagittis tortor vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
-
        </p>
+
-
 
+
-
        <a id="anchor02">Anchor 02</a>
+
-
        <p>
+
-
            Nulla leo nibh, hendrerit sed cursus id, ornare vel nisi. Sed in enim nulla, mollis lacinia nibh. Aenean molestie libero vel augue aliquet id luctus odio cursus. Fusce sed malesuada dolor. Duis auctor arcu ultrices enim interdum eleifend. Suspendisse eros elit, iaculis non pellentesque in, egestas et arcu. Quisque viverra pharetra nunc id scelerisque. Curabitur porttitor faucibus dictum. Suspendisse varius tellus sed nulla consectetur non vulputate leo scelerisque. Donec vel luctus neque. Sed suscipit neque sed massa fermentum scelerisque. Maecenas a enim quam, ac tincidunt mauris. Sed euismod, augue vestibulum ullamcorper blandit, nisi velit bibendum nunc, at commodo neque massa eget dui.
+
-
 
+
-
            Pellentesque hendrerit bibendum convallis. Nullam facilisis libero id felis ultricies sollicitudin cursus metus pretium. Duis elit enim, blandit eleifend feugiat aliquam, blandit ac velit. Vivamus sed enim lectus, eu tempor leo. Aenean elementum, nunc id pulvinar convallis, neque elit volutpat erat, eu condimentum turpis dui id urna. Quisque ornare ullamcorper purus, sed semper nisi imperdiet eget. Praesent vitae quam eget magna ullamcorper elementum. Cras quis metus sed nunc pulvinar rutrum nec vel elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque elementum urna et nunc commodo pretium. Aenean in nibh non neque laoreet consectetur in vitae eros. Vivamus tincidunt quam eget arcu sodales a aliquet nunc pretium.
+
-
 
+
-
            Fusce hendrerit, augue ut sagittis cursus, metus nisi porta velit, imperdiet feugiat lectus lectus sed nunc. Quisque eu leo vitae lorem rutrum lacinia. Nullam vitae orci augue. Sed in neque quis tortor aliquet placerat id sed dui. Nulla facilisi. Phasellus laoreet pharetra sapien, eu pharetra elit interdum at. Sed fermentum molestie elit, vitae vulputate diam commodo ac. Morbi eu turpis id metus adipiscing pharetra adipiscing ut leo. Sed pretium justo non ipsum adipiscing porta. Quisque sagittis dictum tellus, id feugiat turpis dictum vel. Maecenas fermentum varius tincidunt. Sed tincidunt, elit sed condimentum convallis, velit magna consectetur velit, at tempor massa est non justo.
+
-
 
+
-
            Praesent a purus mauris, quis porta magna. Sed non dui ut nisl suscipit ullamcorper quis id arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam pulvinar faucibus felis quis aliquet. Etiam fermentum orci at augue faucibus non pretium lacus condimentum. Aliquam erat volutpat. Duis fringilla bibendum justo, quis ornare arcu fermentum at. Praesent iaculis, justo vitae auctor sodales, sem tortor molestie tortor, eget vestibulum orci risus at purus. Fusce felis tellus, lobortis sed mollis id, venenatis vel tortor. Phasellus et accumsan urna.
+
-
        </p>
+
-
 
+
-
        <a id="anchor03">Anchor 03</a>
+
-
        <p>
+
-
            Mauris lacinia augue non ligula tincidunt et commodo libero pulvinar. Mauris sit amet dui bibendum magna congue viverra non tempor tellus. Etiam porttitor elit sed turpis vulputate non condimentum nisl ultrices. Nunc eu metus vel nisl scelerisque sagittis vel a nibh. Aenean erat nunc, scelerisque non scelerisque quis, hendrerit sit amet neque. Fusce sit amet nisi quis ante luctus blandit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Donec at magna a mi condimentum ultricies. Integer a purus eros. Sed mattis, dui at blandit imperdiet, risus tortor volutpat odio, sed euismod orci elit a augue. Nam pellentesque, ipsum vitae tempor sagittis, leo tortor tempus ipsum, et accumsan enim lacus vel elit.
+
-
 
+
-
            In sollicitudin porta commodo. In ultrices fringilla erat sed posuere. Vestibulum fermentum ultricies magna a rhoncus. Duis tincidunt arcu quis metus pharetra lacinia. Duis sem nisl, hendrerit sollicitudin pharetra et, lobortis eu metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris suscipit viverra dictum. Duis non dui lectus. Morbi hendrerit congue interdum. Quisque vestibulum iaculis erat, eu auctor est vehicula ut. Quisque interdum urna non purus molestie laoreet aliquet nisl adipiscing. Sed sed sem augue. Etiam sed nibh gravida justo aliquet fermentum.
+
-
 
+
-
            Nullam commodo leo magna. Vestibulum mollis tincidunt nisl eget rhoncus. Fusce dui leo, luctus id commodo vel, tempor ut metus. Phasellus blandit euismod enim, sed aliquet mi cursus cursus. In est velit, porttitor ac fringilla non, vehicula nec turpis. Cras et sapien elit. Duis blandit, turpis et vestibulum lobortis, est risus tristique urna, sit amet scelerisque arcu leo a diam. Etiam aliquet sapien a quam ornare et sagittis felis consequat. Donec ac lectus ut massa tincidunt vehicula. Fusce feugiat porta vehicula. Mauris iaculis libero ac ipsum tempor sit amet gravida dui congue. Donec condimentum, sem vel lacinia ullamcorper, quam justo interdum enim, non tincidunt ante purus vitae dui. Aenean ac tellus eget est luctus interdum vel sit amet eros. Pellentesque lacinia, lectus id semper suscipit, nisl tellus commodo neque, sed venenatis dolor massa sed velit. Ut vehicula tempus sagittis.
+
-
 
+
-
            In risus velit, pulvinar in fringilla eget, elementum accumsan nunc. Proin nisl felis, laoreet a imperdiet vitae, volutpat et arcu. Etiam imperdiet orci ut nibh viverra gravida. Morbi hendrerit ante eget sapien ultrices iaculis. Phasellus sed cursus sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit hendrerit luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ac purus ac tortor consequat scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida tincidunt laoreet. Suspendisse dolor elit, pretium a tempus vel, imperdiet vitae velit.
+
-
        </p>
+
-
 
+
-
        <a id="anchor04">Anchor 04</a>
+
-
        <p>
+
-
            Proin odio turpis, convallis nec convallis at, hendrerit ut turpis. Curabitur sit amet ipsum non arcu hendrerit mollis at id risus. In hendrerit leo ut lacus varius posuere. Ut consequat diam vitae elit facilisis varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nunc eros, tempor vitae facilisis eu, sagittis sed orci. Nullam volutpat, mauris ut tempor ornare, lorem felis laoreet sapien, sit amet aliquet nisi risus vel felis. Proin in erat justo. Pellentesque sit amet volutpat enim. Morbi ut libero lorem, ut dapibus odio. Proin eget lorem nunc, et feugiat ipsum. Nunc tincidunt ornare urna, in commodo tellus mollis eget. Praesent dignissim orci ut sapien hendrerit ut eleifend magna tempor.
+
-
 
+
-
            Nam pretium suscipit sapien malesuada luctus. Aliquam laoreet magna quis dolor malesuada dignissim. Mauris ante nulla, vehicula sed egestas eu, molestie vel urna. Curabitur dui magna, tincidunt in vehicula sit amet, molestie vitae quam. Cras eleifend, tellus vel pharetra consequat, elit ipsum convallis tellus, in dictum velit lectus et velit. Proin iaculis suscipit sodales. Cras vitae dui erat, ut aliquam augue. Proin eget est leo. Fusce enim nunc, mollis et venenatis sed, molestie eget nulla. Donec elementum pretium urna sed gravida. In eu tellus ligula, quis suscipit erat. Ut ac placerat risus. Vivamus id urna elit, ut aliquam eros. Fusce fermentum auctor vulputate. Cras nec lacus in velit rhoncus volutpat non quis turpis. Duis auctor viverra nulla.
+
-
        </p>
+
-
 
+
-
        <a id="anchor05">Anchor 05</a>
+
-
        <p>
+
-
            Donec consequat ligula sit amet purus luctus aliquam id ultrices orci. Maecenas non augue elementum tortor porttitor euismod non nec elit. Proin dui mauris, luctus in convallis ut, adipiscing at urna. Donec egestas, tortor ut cursus vehicula, quam metus placerat lectus, sed scelerisque leo turpis a mi. Donec ut turpis ligula. Cras at augue odio. Integer erat velit, consequat a tincidunt ac, imperdiet ut eros. Vestibulum cursus cursus bibendum. Donec aliquet eros in augue mattis tincidunt. Aenean metus purus, euismod sit amet aliquam vitae, pellentesque a turpis.
+
-
 
+
-
            Maecenas sed nibh velit. Integer dictum, dui quis varius feugiat, urna purus suscipit nisi, ac dignissim velit erat quis libero. Sed vitae ipsum nec metus consectetur posuere. Nulla varius sapien id nisl pretium sit amet ornare lacus lacinia. Donec mattis viverra risus, vel pretium nisl dapibus sit amet. Pellentesque sed neque quis nulla dignissim interdum at bibendum nibh. Sed tempor gravida nisi a ultrices. Aenean eu interdum dui. Suspendisse nec massa nibh. Praesent porttitor vulputate tempor. Sed lectus mi, rhoncus quis rutrum sit amet, lobortis id eros. Vestibulum dapibus urna at sem lobortis sed faucibus purus laoreet. Morbi tempor tortor id augue auctor ut pretium nisl mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam adipiscing mollis risus, eget hendrerit neque feugiat eu. Curabitur faucibus convallis posuere.
+
-
 
+
-
            Fusce mollis cursus suscipit. Praesent eget justo lectus, vel lacinia libero. Vivamus scelerisque velit ut dolor bibendum scelerisque. Duis non tortor vel turpis auctor malesuada eget nec erat. Integer mattis tortor ut magna cursus at rhoncus nisl varius. Cras condimentum nisi vitae mi dictum sit amet sagittis ligula suscipit. Sed rhoncus felis quam. Aliquam erat volutpat. Aenean commodo libero id leo tristique feugiat. Proin pulvinar tellus in tellus condimentum tincidunt. Fusce viverra eros vitae nunc venenatis rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque est eros, scelerisque at facilisis a, rutrum at mi.
+
-
 
+
-
            Nulla tempor bibendum augue, vitae venenatis magna consequat imperdiet. Aenean ligula ligula, fermentum eget rhoncus dignissim, tincidunt sollicitudin nunc. Integer posuere ornare sapien, quis cursus nunc semper quis. Praesent interdum, nunc quis commodo semper, risus diam elementum dolor, et ullamcorper nunc libero in tortor. Nam et enim libero. Nunc ut metus enim, ac dignissim neque. Proin rhoncus magna in mi condimentum sollicitudin. Pellentesque velit magna, aliquam ac suscipit vitae, condimentum a erat. Suspendisse id scelerisque neque. Nam vel dui vel ligula convallis iaculis. Praesent adipiscing sagittis eros, id venenatis dui bibendum ut. Etiam posuere aliquet dapibus. Nulla leo mauris, accumsan sit amet porta et, pretium sit amet magna. Etiam bibendum bibendum nisi a tincidunt.
+
-
 
+
-
            Proin tristique posuere nibh, vel commodo metus commodo ac. Curabitur lacinia aliquam volutpat. Morbi sem velit, elementum eget sagittis vitae, imperdiet ac nunc. Curabitur hendrerit enim pharetra mauris elementum accumsan. Suspendisse ac ipsum vitae mi vestibulum sodales. Nunc sodales lectus in leo porttitor id rutrum purus tincidunt. Nullam urna odio, tempor vel pharetra a, consectetur id diam. Morbi sed nibh sapien. Praesent dapibus justo sit amet mauris tristique eu aliquam magna commodo. Cras sem dui, rhoncus vitae elementum sed, imperdiet a est.
+
-
 
+
-
            In diam lorem, suscipit a ullamcorper id, viverra a lacus. Donec nec lacus in justo adipiscing tincidunt. Sed volutpat ullamcorper venenatis. Mauris iaculis est vel augue dignissim tempus. Morbi pulvinar tincidunt arcu, vitae hendrerit dolor ultrices a. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc imperdiet, lectus sit amet commodo vestibulum, dolor metus accumsan turpis, id congue orci dolor lobortis tortor.
+
-
        </p>
+
-
    </body>
+
</html>
</html>

Revision as of 14:01, 7 May 2013

/* Converts generic template into empty one.

  Ne touche pas                                 */
  1. content {

border: none; background-color: transparent; width:100%; margin:0; padding:0; }

  1. catlinks {

display: none; }

  1. footer-box {

display: none; height: 0px; }

  1. p-logo {

display: none; }

  1. top-section {

border: none; height: 0px; } .firstHeading { display: none; }

  1. search-controls {

display: none; } input.searchButton:hover { color: #B41111; } input.searchButton { color: #ffffff; } p { margin: 0; padding: 0; } div .visualClear { display: none; }

  1. globalWrapper {

margin: 0; padding: 0px; overflow: hidden; }

  1. menubar ul {

position: fixed; -webkit-transform: translateZ(0); z-index: 1; }

  1. menubar li a {

background: none; } /*End of Line*/



body { background: black; }

  1. navbar {

float: right; line-height: 70px; height: 70px; }

  1. navbar .nav {

list-style: none; display: block; margin: 0; }

  1. content li {

display: block; float: left; line-height: 112px; padding: 0 15px 0 15px; font-weight: 900; font-size: 1.25em; }

  1. content li a:link {

color: grey; }

  1. content li a:visited {

color: grey; }

  1. content li a:hover {

color: white; text-decoration: none; }

  1. header {

position: fixed; left: 0; top: 0; height: 112px; width: 100%; background: black; -webkit-transform: translateZ(0); z-index: 1; opacity: 0.9; } p { margin: 0.5em; } div .section { width: 100%; background: black; background-size: 1500px; background-repeat: no-repeat; background-position: top; padding: 50px 0px 50px 0px; } div .content { width: 50%; margin: 0 auto 0 auto; background: rgba(255,255,255,0.8); padding: 50px; }

[This is a space of a header. Possibly a menubar, logo, the whole shebang]

Alpha Beta Gamma
One
Two
Three