Team:RAMNOTIREN CALGARY

From 2014hs.igem.org

(Difference between revisions)
(Blanked the page)
Line 1: Line 1:
-
<html>
 
-
<head>
 
-
<link rel='stylesheet' type='text/css' href="indexcss.css"/>
 
-
 
-
<style>
 
-
h1{
 
-
font-size: 2.5em;
 
-
}
 
-
h2{
 
-
font-size: 25.5px;
 
-
}
 
-
 
-
p {
 
-
text-indent:50px;
 
-
}
 
-
 
-
#box1{
 
-
width: 968px;
 
-
margin-top: -10px;
 
-
background: #E6E6E6; /*threedface*/
 
-
float: left;
 
-
padding-bottom: 20px;
 
-
margin-bottom: 13px;
 
-
}
 
-
 
-
#box1 h2{
 
-
padding: 0px 0px 0px 0px;
 
-
text-align: center;
 
-
font-family: arial, verdana, "lucida sans";
 
-
}
 
-
 
-
#box1 p{
 
-
padding: 0px 50px 0px 350px;
 
-
font-family: arial, verdana, "lucida sans";
 
-
font-size: 15px;
 
-
}
 
-
 
-
#content {
 
-
z-index: 1;
 
-
background-color: transparent;
 
-
border: none;
 
-
padding-bottom: 0;
 
-
margin: 0;
 
-
width: 100%;
 
-
overflow: hidden;
 
-
margin-top: -45px !important;
 
-
height:auto !important; /* real browsers */
 
-
height:100%; /* IE6: treaded as min-height*/
 
-
min-height:100%; /* real browsers */
 
-
}
 
-
 
-
#top-section {
 
-
z-index: 2;
 
-
height: 15px;
 
-
margin: 0px;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
margin-bottom: 0 !important;
 
-
padding:0;
 
-
border: none;
 
-
font-size: 10px;
 
-
}
 
-
 
-
#p-logo {
 
-
height:1px;
 
-
overflow:hidden;
 
-
display: none;
 
-
}
 
-
 
-
#search-controls {
 
-
overflow:hidden;
 
-
display:block;
 
-
background: none;
 
-
position: absolute;
 
-
top: 100px;
 
-
right: 40px;
 
-
}
 
-
 
-
.left-menu {
 
-
width: 500px !important;
 
-
display:block;
 
-
margin-top:-80px;
 
-
border: none;
 
-
text-align: right;
 
-
}
 
-
 
-
.left-menu ul {
 
-
border: none;
 
-
}
 
-
 
-
#menubar.right-menu {
 
-
width:300px;
 
-
display:block;
 
-
float:left;
 
-
margin-top:-80px;
 
-
border: none;
 
-
}
 
-
 
-
.right-menu ul {
 
-
border: none;
 
-
width: 300px;
 
-
}
 
-
 
-
#footer-box {
 
-
background-color: #216085;
 
-
border: none;
 
-
width: 850px;
 
-
height: 30px;
 
-
margin: -10px auto 0 auto;
 
-
padding: 20px 0;
 
-
}
 
-
 
-
#footer {
 
-
border: none;
 
-
width: 850px;
 
-
margin: 0 auto;
 
-
padding: 0;
 
-
}
 
-
 
-
.firstHeading {
 
-
display: block;
 
-
}
 
-
 
-
#f-list a {
 
-
color: #333;
 
-
font-size: 10px;
 
-
}
 
-
 
-
#f-list a:hover {
 
-
color: #666;
 
-
}
 
-
 
-
.printfooter {
 
-
display: none;
 
-
}
 
-
 
-
#footer ul {
 
-
margin: 0;
 
-
padding: 0;
 
-
}
 
-
 
-
#footer ul li {
 
-
margin-top: 0;
 
-
margin-bottom: 0;
 
-
margin-left: 10px;
 
-
margin-right: 10px;
 
-
padding: 0;
 
-
}
 
-
 
-
#search-controls {
 
-
display:none;
 
-
}
 
-
 
-
h3#siteSub {
 
-
display: none;
 
-
}
 
-
 
-
#contentSub {
 
-
display: none;
 
-
}
 
-
 
-
p:first-child {
 
-
display: block;
 
-
}
 
-
 
-
h1{
 
-
border:none;
 
-
width: 100%;
 
-
clear: both;
 
-
}
 
-
 
-
.progress{
 
-
display: none;
 
-
}
 
-
 
-
#notecontainer1{
 
-
position: absolute;
 
-
width: 800px;
 
-
left: 205px;
 
-
top: 393px;
 
-
background-color: #E6E6E6;
 
-
padding: 0px 20px 13px 20px;
 
-
}
 
-
 
-
#notecontainer2{
 
-
position: absolute;
 
-
width: 800px;
 
-
left: 205px;
 
-
top: 1700px;
 
-
background-color: #E6E6E6;
 
-
padding: 0px 20px 13px 20px;
 
-
}
 
-
 
-
#globalWrapper {
 
-
    position: relative;
 
-
    font-size: 127%;
 
-
    width: 850px //100%;
 
-
    margin: 0px;
 
-
    padding: 0px;
 
-
    padding-bottom: 0px;
 
-
    padding-left: 0px;
 
-
    padding-right: 100px;
 
-
#  background:url('http://www.wallsave.com/wallpapers/1280x1024/technology/180359/technology-free-archive-math-science-180359.jpg');
 
-
#  background-repeat: no-repeat;
 
-
#  background-attachment: fixed;
 
-
#  background-size:100% auto;
 
-
}
 
-
 
-
#main-content {
 
-
    position: relative;
 
-
    width:  850px;
 
-
    margin: 0 auto;
 
-
    padding: 5px 5px 5px 5px;;
 
-
    background: transparent;
 
-
    color: black;
 
-
#  border-left: 1px solid #ffffff;
 
-
#  border-right: 1px solid #ffffff;
 
-
#  line-height: 1.5em;
 
-
}
 
-
 
-
 
-
body {
 
-
        display:inherit;
 
-
        background-image: url('http://www.wallsave.com/wallpapers/1280x1024/technology/180359/technology-free-archive-math-science-180359.jpg');
 
-
        background-size: 100%;
 
-
        background-repeat: no-repeat;
 
-
        background-attachment:fixed;
 
-
#      color: black;
 
-
#      font: x-small sans-serif;
 
-
#      margin: 0;
 
-
#      padding: 0;
 
-
#      height:100%;
 
-
}
 
-
 
-
#topmenubar {
 
-
    position: relative;
 
-
    white-space: nowrap;
 
-
    top: -25px;
 
-
    width: 967px;
 
-
    z-index: 5;
 
-
    font-family: arial, verdana, "sans-serif";
 
-
    font-size: 70%;
 
-
    line-height: 2em;
 
-
}
 
-
 
-
.topleft-menu, .topleft-menu a {
 
-
    color: transparent;
 
-
    left: 0px;
 
-
    text-align: left;
 
-
    text-transform: lowercase;
 
-
    text-decoration: none;
 
-
}
 
-
 
-
.topleft-menu:hover {
 
-
    color: white;
 
-
    background-color: #bbbbbb;
 
-
}
 
-
 
-
.topright-menu, .right-menu a {
 
-
    right: 0px;
 
-
    text-align: right;
 
-
    color: white;
 
-
}
 
-
 
-
#topmenubar ul {
 
-
    color: #555555;
 
-
    list-style: none;
 
-
}
 
-
 
-
#topmenubar li {
 
-
    display: inline;
 
-
    position: relative;
 
-
    cursor: pointer;
 
-
    padding-left: 0px;
 
-
    padding-right: 0px;
 
-
}
 
-
 
-
.topleft-menu li a {
 
-
    padding: 0px 6px 0px 0px;
 
-
}
 
-
 
-
.topleft-menu .selected {
 
-
#    color: #bbbbbb;
 
-
}
 
-
 
-
#.left-menu .selected:hover {
 
-
#    color: white;     
 
-
}
 
-
 
-
.topleft-menu:hover a {
 
-
    color: white;
 
-
}
 
-
 
-
/*css for slider*/
 
-
 
-
#slides {
 
-
    position:relative;
 
-
    height:280px;
 
-
    width: 840px
 
-
   
 
-
}
 
-
 
-
#slides IMG {
 
-
        position:absolute;
 
-
        opacity:0.0;
 
-
        top:0px;   
 
-
        left:0px;
 
-
        z-index:1;   
 
-
}
 
-
 
-
#slides .current {
 
-
    z-index:3;
 
-
    opacity:1.0;
 
-
}
 
-
 
-
#slides .previous {
 
-
    z-index:2;
 
-
}
 
-
 
-
.progress {
 
-
 
-
margin-top:-270px;
 
-
margin-left:20px;
 
-
position:absolute;
 
-
 
-
}
 
-
 
-
.progress li{
 
-
border:1px solid rgba(0,0,0,0.9);
 
-
border-radius:3px;
 
-
margin-left: 5px;
 
-
float:left;
 
-
display:block;
 
-
position:relative;
 
-
z-index:10;
 
-
background-color:rgba(255,255,255,0.4);
 
-
  line-height:1.0em;
 
-
}
 
-
 
-
.progress li a{
 
-
    padding-left: 6px;
 
-
    padding-right: 6px;
 
-
    font-size:12px;
 
-
    line-height:1.0em;
 
-
}
 
-
 
-
.progress li a:hover {
 
-
text-decoration:none;
 
-
}
 
-
 
-
.progress .current {
 
-
background-color:white;
 
-
}
 
-
 
-
/*end of css for slider*/
 
-
 
-
#menu, #menu ul {
 
-
    margin: 0;
 
-
    padding: 0px;
 
-
    list-style: none;
 
-
}
 
-
 
-
#menu {
 
-
    width: 968px;
 
-
    margin: 0px auto;
 
-
    border: 1px solid #FFF; /*barely change border color*/
 
-
    background-color: #853399;
 
-
    background-image: linear-gradient(#853399, #6f2981); /*changes the color of the menu bar itself*/
 
-
    border-radius: 100px;
 
-
    /*box-shadow: 0 1px 1px #853399;*/
 
-
}
 
-
 
-
#menu:before,
 
-
#menu:after {
 
-
    content: "";
 
-
    display: table;
 
-
}
 
-
 
-
#menu:after {
 
-
    clear: both;
 
-
}
 
-
 
-
#menu {
 
-
    zoom:1;
 
-
}
 
-
 
-
#menu li {
 
-
    float: left;
 
-
    /*border-right: 1px solid #FFF; changes color of lines separating each category*/
 
-
    /*box-shadow: 1px 0 0 #FFF; */
 
-
    position: relative;
 
-
}
 
-
 
-
#menu a {
 
-
    float: right;
 
-
    padding: 10px 44px;
 
-
    color: #FFF;
 
-
    font: bold 15px Arial, Helvetica;
 
-
    text-decoration: none;
 
-
    text-shadow: 0 1px 0 #000;
 
-
}
 
-
 
-
#menu li:hover > a {
 
-
    color: #ffc750;
 
-
}
 
-
 
-
*html #menu li a:hover { /* IE6 only */
 
-
    color: #fafafa;
 
-
}
 
-
 
-
#menu ul {
 
-
    margin: 20px 0 0 0;
 
-
    _margin: 0; /*IE6 only*/
 
-
    opacity: 0;
 
-
    visibility: hidden;
 
-
    position: absolute;
 
-
    top: 38px;
 
-
    left: 0;
 
-
    z-index: 1;   
 
-
    background: #FFF; 
 
-
    background: linear-gradient(#853399, #6f2981);
 
-
    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
 
-
    border-radius: 3px;
 
-
    transition: all .4s ease-in-out;
 
-
}
 
-
 
-
#menu li:hover > ul {
 
-
    opacity: 1;
 
-
    visibility: visible;
 
-
    margin: 0;
 
-
}
 
-
 
-
#menu ul ul {
 
-
    top: 0;
 
-
    left: 150px;
 
-
    margin: 0 0 0 20px;
 
-
    _margin: 0; /*IE6 only*/
 
-
    box-shadow: -1px 0 0 rgba(255,255,255,.3);     
 
-
}
 
-
 
-
#menu ul li {
 
-
    float: none;
 
-
    display: block;
 
-
    border: 0;
 
-
    _line-height: 0; /*IE6 only*/
 
-
    box-shadow: 0 1px 0 #FFF, 0 1px 0 #FFF;
 
-
}
 
-
 
-
#menu ul li:last-child { 
 
-
    box-shadow: none;   
 
-
}
 
-
 
-
#menu ul a {   
 
-
    padding: 10px;
 
-
    width: 130px;
 
-
    _height: 10px; /*IE6 only*/
 
-
    display: block;
 
-
    white-space: nowrap;
 
-
    float: none;
 
-
    text-transform: none;
 
-
}
 
-
 
-
#menu ul a:hover {
 
-
    background-color: #0186ba;
 
-
    background-image: linear-gradient(#660066, #660066);
 
-
}
 
-
 
-
#title-area{
 
-
    float: right;
 
-
    width: 600px;
 
-
}
 
-
 
-
/*Beginninf of sidebar code. Work on fixing this*/
 
-
#sidebar{
 
-
    position: fixed; /*fixed*/
 
-
    top: 387px; /*393px*/
 
-
    left: 149px; /* -11%47px*/
 
-
    width: 300px;
 
-
    padding: 10px;
 
-
}
 
-
 
-
#sidebar a{
 
-
    text-decoration: none;
 
-
}
 
-
 
-
#sidebar ul{
 
-
    background: #eee;
 
-
    padding: 10px;
 
-
    list-style: none;
 
-
}
 
-
 
-
#sidebar li{
 
-
    margin: 0 0 0 20px;
 
-
}
 
-
 
-
#list{
 
-
    list-style: none;
 
-
    text-decoration: none;
 
-
    float: left;
 
-
    background-color: #0186ba;
 
-
}
 
-
 
-
#list li{
 
-
    text-decoration: none;
 
-
}
 
-
 
-
/*end of sidebar code. Work on setting it left of the page and mking the text body relative and next to the sidebar rather than next to it.*/
 
-
     
 
-
#page-wrap{
 
-
    position: relative;
 
-
 
-
}
 
-
 
-
.buttons {
 
-
    clear: both;
 
-
    position: relative;
 
-
    width: 968px;
 
-
    margin-bottom: 12px;
 
-
}
 
-
 
-
.buttons a, .buttons a div {
 
-
    width: 320px;
 
-
    height: 155px;
 
-
    float: left;
 
-
    margin-bottom: 12px;
 
-
}
 
-
 
-
.buttons div h2 {
 
-
    padding: 20px 20px 0px;
 
-
    position: relative;
 
-
    top: -155px;
 
-
}
 
-
 
-
.buttons div p {
 
-
    padding: 0px 20px;
 
-
    position: relative;
 
-
    top: -155px;
 
-
}
 
-
 
-
#button1 {
 
-
    margin-right: 0px;
 
-
    background: #ffc750;
 
-
}
 
-
 
-
#button6 {
 
-
    margin-right: 0px;
 
-
    background: #40b6c4;
 
-
}
 
-
/*
 
-
#button1:hover #button6:hover {
 
-
    background: #94FF7D;
 
-
}
 
-
*/
 
-
#button2 {
 
-
    margin-right: 0px;
 
-
    background: #ff8541;
 
-
}
 
-
 
-
#button5 {
 
-
        margin-right: 0px;
 
-
        background: #bd4078;
 
-
}
 
-
 
-
/*
 
-
#button2:hover, #button5:hover {
 
-
    background: #7DD7FF;
 
-
}
 
-
*/
 
-
 
-
#button3 {
 
-
    margin: 0px;
 
-
    background: #595959;
 
-
}
 
-
 
-
#button4{
 
-
        margin: 0px;
 
-
        background: #9900CC;
 
-
}
 
-
 
-
/*
 
-
#button3:hover, #button4:hover {
 
-
    background: #FFE44F;
 
-
}
 
-
*/
 
-
 
-
.scrollup {
 
-
    width: 40px;
 
-
    height: 40px;
 
-
    position: fixed;
 
-
    bottom: 50px;
 
-
    right: 30px;
 
-
    display: none;
 
-
    text-indent: -9999px;
 
-
    background: url('arrows.png') no-repeat; /*icon_top.png*/
 
-
    background-color: transparent;
 
-
}
 
-
 
-
#test{
 
-
  position: fixed;
 
-
    bottom: 50px;
 
-
    right: 50px;
 
-
}
 
-
 
-
</style>
 
-
 
-
<script type="text/javascript" src ="https://2014hs.igem.org/common/jquery-latest.min.js"></script>
 
-
 
-
<script type="text/javascript">
 
-
    function slider() {
 
-
        var $current = $('#slides IMG.current');
 
-
 
-
        if ( $current.length == 0 ) $current = $('#slides IMG:last');
 
-
        var $next =  $current.next().length ? $current.next()
 
-
            : $('#slides IMG:first');
 
-
 
-
          $current.addClass('previous');
 
-
        $next.css({opacity: 0.0})
 
-
            .addClass('current')
 
-
            .animate({opacity: 1.0}, 2500, function() {
 
-
                $current.removeClass('current previous');
 
-
    });
 
-
 
-
    var $navicurrent = $('.progress li.current');
 
-
    if($navicurrent.length ==0) $navicurrent = $('.progress li:last');
 
-
    var $navinext = $navicurrent.next().length ? $navicurrent.next() : $('.progress li:first');
 
-
    $navicurrent.addClass('previous');
 
-
    $navicurrent.removeClass('current previous');
 
-
    $navinext.addClass('current').animate({opacity: 1.0}, 2500, function() {
 
-
            });
 
-
 
-
    $('.progress li').click(function(){
 
-
       
 
-
        var $ncurrent = $(this);
 
-
            $('.progress li').removeClass('current').removeClass('previous');
 
-
            $('#slides IMG').removeClass('current').removeClass('previous');
 
-
            $ncurrent.addClass('current');
 
-
            var ncurrentindex = $ncurrent.index();
 
-
        if(  ncurrentindex=== 0) $current = $('#slides IMG:first');
 
-
            if(  ncurrentindex=== 1) $current = $('#slides IMG:eq(1)');
 
-
            if(  ncurrentindex=== 2) $current = $('#slides IMG:eq(2)');
 
-
            if(  ncurrentindex=== 3) $current = $('#slides IMG:last');
 
-
            $current.addClass('current');
 
-
 
-
    });
 
-
 
-
    }
 
-
 
-
    $(function() {
 
-
        setInterval( "slider()", 5000 );
 
-
    });
 
-
 
-
    $(function() {
 
-
 
-
    var offset = $("#sidebar").offset();
 
-
    var topPadding = 15;
 
-
 
-
    $(window).scroll(function() {
 
-
   
 
-
        if ($(window).scrollTop() > offset.top) {
 
-
       
 
-
            $("#sidebar").stop().animate({
 
-
           
 
-
                marginTop: $(window).scrollTop() - offset.top + topPadding
 
-
           
 
-
            });
 
-
       
 
-
        } else {
 
-
       
 
-
            $("#sidebar").stop().animate({
 
-
           
 
-
                marginTop: 0
 
-
           
 
-
            });
 
-
       
 
-
        }
 
-
       
 
-
           
 
-
    });
 
-
 
-
});
 
-
 
-
/*back to top JS start */
 
-
 
-
    $(document).ready(function () {
 
-
 
-
    $(window).scroll(function () {
 
-
        if ($(this).scrollTop() > 100) {
 
-
            $('.scrollup').fadeIn();
 
-
        } else {
 
-
            $('.scrollup').fadeOut();
 
-
        }
 
-
    });
 
-
 
-
    $('.scrollup').click(function () {
 
-
        $("html, body").animate({
 
-
            scrollTop: 0
 
-
        }, 600);
 
-
        return false;
 
-
    });
 
-
 
-
});
 
-
 
-
//back to top js script end
 
-
 
-
</script>
 
-
 
-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
 
-
 
-
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
 
-
 
-
 
-
</head>
 
-
<body>
 
-
<div id="globalWrapper"/>
 
-
 
-
    <div id="main-content"/>
 
-
 
-
    <div id="topmenubar" class="topleft-menu"/>
 
-
    <ul>
 
-
    <li><a href="https://igem.org/Team_List?year=2014&division=high_school" style='color:#014457; cursor:pointer' target="blank">teams</a></li>
 
-
    <li class='selected'><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY">Page</a></li>
 
-
<li class='new'><a href="https://2014hs.igem.org/wiki/index.php?title=Talk:Team:RAMNOTIREN_CALGARY&action=edit&redlink=1">Discussion</a></li>
 
-
    <li><a href="https://2014hs.igem.org/wiki/index.php?title=Team:RAMNOTIREN_CALGARY&action=edit">View Source</a></li>
 
-
    <li><a href="https://2014hs.igem.org/wiki/index.php?title=Team:RAMNOTIREN_CALGARY&action=history">History</a></li>
 
-
    <li><a href="https://igem.org/Login">Log in</a></li>
 
-
</ul>
 
-
</div>
 
-
 
-
<header>
 
-
<div id="slides">
 
-
    <img  src="banner1.jpg" width="968" height="272" alt="" class="current" />
 
-
    <img  src="tbanner2.jpg" width="968" height="272" alt="" />
 
-
    <img  src="tbanner3.jpg" width="968" height="272" alt="" />
 
-
    <img  src="tbanner4.jpg" width="968" height="272" alt="" />
 
-
</div>
 
-
<ul class="progress">
 
-
    <li class="current"><a href="#n_0">1</a> </li>
 
-
    <li><a href="#n_1">2</a> </li>
 
-
    <li><a href="#n_2">3</a> </li>
 
-
    <li><a href="#n_3">4</a> </li>
 
-
</ul>
 
-
 
-
<div>
 
-
<ul id="menu">
 
-
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/‎" name="test" id="homelink">Home</a></li>
 
-
 
-
<li><a href="2014hs.igem.org/Team:RAMNOTIREN_CALGARY‎/Team" id="teamlink">Team</a>
 
-
<ul>
 
-
<li><a href="2014hs.igem.org/Team:RAMNOTIREN_CALGARY‎/Team">Members</a></li>
 
-
<li><a href="https://igem.org/Team.cgi">Official Profile</a></li>
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/AboutCMHS">About CMHS</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Project" id="projectlink">Project </a>
 
-
<ul>
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Project/Content">Content</a></li>
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/HumanPractices">Human Practices</a></li>
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/References">References</a></li>
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Attributions">Attributions</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Parts" id="partslink">Parts</a></li>
 
-
 
-
<li><a class="drop" href="http://https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Notebook" id="notebooklink">Notebook</a>
 
-
<ul>
 
-
<li><a href="http://https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Notebook">Journal</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<li><a href="https://2014hs.igem.org/Team:RAMNOTIREN_CALGARY/Sponsors" id="sponsorslink">Sponsors</a></li>
 
-
 
-
<li><a href="https://2014hs.igem.org" target="_blank">iGEM</a></li>
 
-
</ul>
 
-
</div>
 
-
</header>
 
-
 
-
 
-
<div id="sidebar">
 
-
    <div style="margin-left: 2em">
 
-
        <div id="list">
 
-
            <ul>
 
-
                    <li> <a href="#JE1">jQuery (animated)</a></li>                    
 
-
                <li> <a href="#JE2">CSS (fixed)</a></li>                    
 
-
                <li> <a href="#JE3">CSS (reveal)</a></li>                    
 
-
                <li> <a href="#JE4">TEST</a></li>                    
 
-
                <li> <a href="#JE5">TEXT</a></li>
 
-
                <li> <a href="#JE6">jQuery (animated)</a></li>                    
 
-
                <li> <a href="#JE7">CSS (fixed)</a></li>                    
 
-
                <li> <a href="#JE8">CSS (reveal)</a></li>                    
 
-
                <li> <a href="#JE9">TEST</a></li>                    
 
-
                <li> <a href="#JE10">TEXT</a></li>                    
 
-
            </ul>
 
-
        </div>
 
-
    </div>
 
-
</div>
 
-
 
-
<div>
 
-
   
 
-
    <div id="notecontainer1">
 
-
    <h1>Scrolling Sidebar</h1>
 
-
    <p id="JE1">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
    <p id="JE2">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
    <p id="JE3">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
    <p id="JE4">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
    <p id="JE5">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
</div>
 
-
</div>
 
-
 
-
<div>
 
-
<div id="notecontainer2">
 
-
<h2>Topic 2</h2>
 
-
<p id="JE6">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
    <p id="JE7">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
    <p id="JE8">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
    <p id="JE9">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
    <p id="JE10">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 
-
</div>
 
-
</div>
 
-
 
-
<article>
 
-
    <a href="http://www.google.com" target="test" class="scrollup">Scroll</a>
 
-
</article>
 
-
 
-
</body>
 
-
</html>
 

Revision as of 21:01, 9 May 2014