Difference between revisions of "Team:UMaryland/Part Collection"

Line 539: Line 539:
 
<br /><br /><br /><br /><br /><br /><br /><br /><br />
 
<br /><br /><br /><br /><br /><br /><br /><br /><br />
 
</div>
 
</div>
 +
 +
<table id="table-selector"> <!-- Table of navigational links -->
 +
<thead>
 +
<!-- .border classes signify where border needs to be drawn -->
 +
<!-- navigator class trigger javascript on that element    -->
 +
<!-- data-select attribute sends to script which element    -->
 +
<!-- was clicked -->
 +
<th class="borderRight navigator borderTop" id="th-purpose" data-select="purpose"><p>Purpose</p></th>
 +
<th class="borderBoth navigator borderTop" id="th-background" data-select="background"><p>Background</p></th>
 +
<th class="borderBoth navigator borderTop" id="th-experiment" data-select="experiment"><p>Experiment</p></th>
 +
<th class="borderLeft navigator borderTop" id="th-results" data-select="results"><p>Results</p></th>
 +
</thead>
 +
</table>
 
<!--<div class="longText">
 
<!--<div class="longText">
 
<h4></h4>
 
<h4></h4>
Line 725: Line 738:
 
var element_position = $('#div-protocol').offset().top;
 
var element_position = $('#div-protocol').offset().top;
 
var toggle = 1;
 
var toggle = 1;
 +
 +
<script>
 +
<!-- For nav bar scrolling + hovering -->
 +
$('nav').mouseover(
 +
function () {
 +
$('#img-logo').css('transition', '.35s ease-in');
 +
$('#img-logo').css('opacity', '1');
 +
$('#img-igemlogo').css('transition', '.35s ease-in');
 +
$('#img-igemlogo').css('opacity', '1');
 +
$('nav ul').addClass("hover");
 +
$('nav').css('opacity', '1');
 +
$('nav').css('transition', '.5s ease');
 +
}
 +
),
 +
$('nav').mouseout(
 +
function () {
 +
var scroll = $(window).scrollTop();
 +
if (scroll > 0) {
 +
$('#img-logo').css('transition', '.25s ease');
 +
$('#img-logo').css('opacity', '0');
 +
$('#img-igemlogo').css('transition', '.25s ease');
 +
$('#img-igemlogo').css('opacity', '0');
 +
$('nav ul').removeClass("hover");
 +
$('nav').css('opacity', '.5');
 +
$('nav').css('transition', '.5s ease');
 +
}
 +
}
 +
);
 +
$(function() {
 +
var nav = $('nav ul');
 +
var navList = $('nav ul li');
 +
$(window).scroll(function() {
 +
var scroll = $(window).scrollTop();
 +
if (scroll > 0) {
 +
nav.addClass("scrolled");
 +
nav.removeClass("hover");
 +
$('#img-logo').css('transition', '.25s ease');
 +
$('#img-logo').css('opacity', '0');
 +
$('#img-igemlogo').css('transition', '.25s ease');
 +
$('#img-igemlogo').css('opacity', '0');
 +
$('nav').css('transition', '.5s ease');
 +
$('nav').css('opacity', '.5');
 +
} else {
 +
nav.removeClass("scrolled");
 +
$('nav').css('transition', '.5s ease');
 +
$('nav').css('opacity', '1');
 +
$('#img-logo').css('transition', '.35s ease-in');
 +
$('#img-logo').css('opacity', '1');
 +
$('#img-igemlogo').css('transition', '.35s ease-in');
 +
$('#img-igemlogo').css('opacity', '1');
 +
 +
}
 +
});
 +
});
 +
</script>
 +
<script>
 +
var clicked = '';
 +
var current = 'purpose'; // sets initial display to be purpose
 +
$('.navigator').click( function() { // when any element with .class is clicked, trigger function
 +
var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
 +
if (selected != current) { // only change display / trigger animation if clicking different nav
 +
changeText(selected)
 +
}
 +
})
 +
 +
var dir = location.hash; // grabs the anchor (text following the #)
 +
var n = dir.indexOf('?'); // and initially sets the page
 +
dir = dir.substring(0, n != -1 ? n : dir.length);
 +
dir = dir.replace('#','');
 +
if (dir == '') {
 +
dir = 'purpose';
 +
}
 +
changeText(dir)
 +
switch (dir) {
 +
case 'purpose':
 +
        break;
 +
    case 'background':
 +
        break;
 +
case 'experiment':
 +
        displayTable(dir)
 +
        break;
 +
case 'results':
 +
        displayTable(dir)
 +
        break;
 +
    default:
 +
        break;
 +
}
 +
 +
$(".subNav").click(function() {
 +
clicked = $(this).attr('data-select');
 +
    $('html, body').animate({
 +
        scrollTop: $("#h4-"+ clicked).offset().top
 +
    }, 0000);
 +
});
 +
 +
function displayTable(selected) {
 +
$('#ul-'+selected).css('display','block');
 +
}
 +
 +
function changeText(selected) {
 +
$('.navigator').css('border-bottom','1px solid #A8A8A8'); // make all navigational element have no bottom border
 +
$('#th-' + selected).css('border-bottom', '4px solid #A8A8A8'); // the clicked navigational element given border
 +
$('.blockText').css('display','none');
 +
$('.subNavList').css('display','none'); // hides all text
 +
$('.blockText').css('margin-left', '60px') // slighly shifts right all text to set up for animation
 +
$('#div-' + selected).css('display','block');
 +
displayTable(selected) // the div containing the text is displayed
 +
$('#div-' + selected).animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left
 +
current = selected; // sets the current display
 +
location.hash = current;
 +
}
  
 
</script>
 
</script>
 
</html>
 
</html>

Revision as of 01:39, 11 October 2016

</div> </div> Modeling

Parts Collection BioBrick Devices Submitted to the Registry Furthering collaboration and standardization of genetic parts

Coming Soon!

We are working hard on constructing the parts and submitting them to the registry to be used in other synthetic biology projects!










Purpose

Background

Experiment

Results