VirginiaTemplate2

From 2013.igem.org

(Difference between revisions)
 
(7 intermediate revisions not shown)
Line 6: Line 6:
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title></title>
+
<title>VGEM 2013</title>
<meta name="keywords" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="description" content="" />
Line 59: Line 59:
margin: 0px;
margin: 0px;
padding: 0px;
padding: 0px;
-
background: #088573;
+
background: #003366;
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-size: 13px;
-
color: #4F4F4F;
+
color: #D88D2A;
}
}
Line 87: Line 87:
p
p
{
{
-
line-height: 180%;
+
line-height: 100%;
}
}
Line 139: Line 139:
ul.style1 li
ul.style1 li
{
{
-
padding: 1.50em 0em 1.90em 0em;
+
padding: 1.50em 0em 0em 0em;
border-top: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
}
}
Line 188: Line 188:
#header-wrapper
#header-wrapper
{
{
-
overflow: hidden;
+
 
height: 150px;
height: 150px;
background: #088573;
background: #088573;
Line 196: Line 196:
#header
#header
{
{
-
overflow: hidden;
+
overflow: scroll;
}
}
Line 205: Line 205:
position: relative;
position: relative;
float: left;
float: left;
-
width: 380px;
+
width: 100%;
height: 100px;
height: 100px;
}
}
Line 289: Line 289:
#page
#page
{
{
-
overflow: hidden;
+
overflow: scroll;
padding: 0px;
padding: 0px;
}
}
Line 359: Line 359:
#banner
#banner
{
{
-
overflow: hidden;
+
overflow: scroll;
padding: 50px 0px;
padding: 50px 0px;
background: #E2E0DE;
background: #E2E0DE;
Line 482: Line 482:
#featured
#featured
{
{
-
overflow: hidden;
+
overflow: scroll;
padding: 50px 0px;
padding: 50px 0px;
border-bottom: 1px solid #D8D8D8;
border-bottom: 1px solid #D8D8D8;
Line 545: Line 545:
</style>
</style>
 +
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
 +
(function(jQuery) {
 +
 +
jQuery.fn.slidertron = function(options) {
 +
 +
var settings = jQuery.extend({
 +
selectorParent: jQuery(this)
 +
}, options);
 +
 +
return jQuery.slidertron(settings);
 +
}
 +
 +
jQuery.slidertron = function(options) {
 +
 +
// Settings
 +
 +
var settings = jQuery.extend({
 +
 +
selectorParent: null, // If a jQuery object, all selectors will be restricted to its scope. Otherwise, all selectors will be global.
 +
 +
// Selectors
 +
 +
viewerSelector: null, // Viewer selector
 +
reelSelector: null, // Reel selector
 +
slidesSelector: null, // Slides selector
 +
indicatorSelector: null, // Indicator selector
 +
navNextSelector: null, // 'Next' selector
 +
navPreviousSelector: null, // 'Previous' selector
 +
navFirstSelector: null, // 'First' selector
 +
navLastSelector: null, // 'Last' selector
 +
navStopAdvanceSelector: null, // 'Stop Advance' selector
 +
navPlayAdvanceSelector: null, // 'Play Advance' selector
 +
captionLineSelector: null, // 'Caption Line' selector
 +
slideLinkSelector: null, // 'Slide Link' selector
 +
slideCaptionSelector: null, // 'Slide Caption' selector
 +
 +
// General settings
 +
 +
speed: 'fast', // Transition speed (0 for instant, 'slow', 'fast', or a custom duration in ms)
 +
fadeInSpeed: 'slow', // Speed at which to fade in the reel on page load (0 for instant, 'slow', 'fast', or a custom duration in ms)
 +
navWrap: true, // Wrap navigation when we navigate past the first or last slide
 +
seamlessWrap: true, // Seamlessly wrap slides
 +
advanceDelay: 0, // Time to wait (in ms) before automatically advancing to the next slide (0 disables advancement entirely)
 +
advanceNavActiveClass: 'active', // Class applied to active stop/play navigation control
 +
viewerOffset: false, // Viewer offset amount (+ = shift right, - = shift left, 0 = do nothing, false = disable)
 +
activeSlideClass: 'active', // Class applied to the active slide
 +
disabledNavClass: 'disabled', // Class applied to disabled navigation controls
 +
clickToNav: false, // Navigate to a slide when clicked (used in conjunction with viewerOffset)
 +
captionLines: 0 // Number of caption lines. If this is > 1, the plugin will look for additional caption elements using the captionSelector setting + a number (eg. '.caption2', '.caption3', etc.)
 +
 +
}, options);
 +
 +
// Variables
 +
 +
// Operational stuff
 +
 +
var isConfigured = true,
 +
isLocked = false,
 +
isAdvancing = false,
 +
isSeamless = false,
 +
list = new Array(),
 +
currentIndex = false,
 +
timeoutID,
 +
pFirst,
 +
pLast;
 +
 +
// jQuery objects
 +
 +
var __slides,
 +
__viewer,
 +
__reel,
 +
__indicator,
 +
__navFirst,
 +
__navLast,
 +
__navNext,
 +
__navPrevious,
 +
__navStopAdvance,
 +
__navPlayAdvance,
 +
__captionLines,
 +
__navControls = new Array();
 +
 +
// Functions
 +
 +
function getElement(selector, required)
 +
{
 +
var x;
 +
 +
try
 +
{
 +
if (selector == null)
 +
throw 'is undefined';
 +
 +
if (settings.selectorParent)
 +
x = settings.selectorParent.find(selector);
 +
else
 +
x = jQuery(selector);
 +
 +
if (x.length == 0)
 +
throw 'does not exist';
 +
 +
return x;
 +
}
 +
catch (error)
 +
{
 +
if (required == true)
 +
{
 +
alert('Error: Required selector "' + selector + '" ' + error + '.');
 +
isConfigured = false;
 +
}
 +
}
 +
 +
return null;
 +
}
 +
 +
function advance()
 +
{
 +
if (settings.advanceDelay == 0)
 +
return;
 +
 +
if (!isLocked)
 +
nextSlide();
 +
 +
timeoutID = window.setTimeout(advance, settings.advanceDelay);
 +
}
 +
 +
function initializeAdvance()
 +
{
 +
if (settings.advanceDelay == 0)
 +
return;
 +
 +
if (__navStopAdvance)
 +
__navStopAdvance.addClass(settings.advanceNavActiveClass);
 +
 +
if (__navPlayAdvance)
 +
__navPlayAdvance.removeClass(settings.advanceNavActiveClass);
 +
 +
isAdvancing = true;
 +
timeoutID = window.setTimeout(advance, settings.advanceDelay);
 +
}
 +
 +
function interruptAdvance()
 +
{
 +
stopAdvance();
 +
}
 +
 +
function stopAdvance()
 +
{
 +
if (settings.advanceDelay == 0)
 +
return;
 +
 +
if (!isAdvancing)
 +
return;
 +
 +
if (__navStopAdvance && __navPlayAdvance)
 +
{
 +
__navStopAdvance.removeClass(settings.advanceNavActiveClass);
 +
__navPlayAdvance.addClass(settings.advanceNavActiveClass);
 +
}
 +
 +
isAdvancing = false;
 +
window.clearTimeout(timeoutID);
 +
}
 +
 +
function playAdvance(skip)
 +
{
 +
if (settings.advanceDelay == 0)
 +
return;
 +
 +
if (isAdvancing)
 +
return;
 +
 +
isAdvancing = true;
 +
 +
if (__navStopAdvance && __navPlayAdvance)
 +
{
 +
__navPlayAdvance.removeClass(settings.advanceNavActiveClass);
 +
__navStopAdvance.addClass(settings.advanceNavActiveClass);
 +
}
 +
 +
if (skip)
 +
timeoutID = window.setTimeout(advance, settings.advanceDelay);
 +
else
 +
advance();
 +
}
 +
 +
function firstSlide()
 +
{
 +
switchSlide(pFirst);
 +
}
 +
 +
function lastSlide()
 +
{
 +
switchSlide(pLast);
 +
}
 +
 +
function nextSlide()
 +
{
 +
if ((isSeamless && currentIndex <= pLast)
 +
|| (!isSeamless && currentIndex < pLast))
 +
switchSlide(currentIndex + 1);
 +
else if (settings.navWrap || isAdvancing)
 +
switchSlide(pFirst);
 +
}
 +
 +
function previousSlide()
 +
{
 +
if ((isSeamless && currentIndex >= pFirst)
 +
|| (!isSeamless && currentIndex > pFirst))
 +
switchSlide(currentIndex - 1);
 +
else if (settings.navWrap)
 +
switchSlide(pLast);
 +
}
 +
 +
function updateNavControls()
 +
{
 +
if (settings.disabledNavClass === false
 +
|| settings.navWrap === true)
 +
return;
 +
 +
for (x in __navControls)
 +
if (__navControls[x])
 +
__navControls[x].removeClass(settings.disabledNavClass).css('cursor', 'pointer');
 +
 +
var tmp = new Array();
 +
 +
if (currentIndex == pFirst)
 +
{
 +
tmp.push(__navFirst);
 +
tmp.push(__navPrevious);
 +
}
 +
else if (currentIndex == pLast)
 +
{
 +
tmp.push(__navLast);
 +
tmp.push(__navNext);
 +
}
 +
 +
for (x in tmp)
 +
if (tmp[x])
 +
tmp[x].addClass('disabled').css('cursor', 'default');
 +
}
 +
 +
function switchSlide(index)
 +
{
 +
var x;
 +
 +
if (isLocked)
 +
return false;
 +
 +
isLocked = true;
 +
 +
if (currentIndex === false)
 +
{
 +
currentIndex = index;
 +
__reel.css('left', -1 * list[currentIndex].x);
 +
isLocked = false;
 +
 +
// Indicator
 +
if (__indicator)
 +
{
 +
__indicator.removeClass('active');
 +
jQuery(__indicator.get(currentIndex - pFirst)).addClass('active');
 +
}
 +
 +
// Active slide
 +
if (settings.activeSlideClass)
 +
list[currentIndex].object
 +
.addClass(settings.activeSlideClass)
 +
 +
// Link
 +
if (settings.clickToNav && !list[currentIndex].link)
 +
list[currentIndex].object
 +
.css('cursor', 'default');
 +
 +
// Captions
 +
if (__captionLines)
 +
{
 +
if (list[currentIndex].captions)
 +
for (x in __captionLines)
 +
__captionLines[x].html(list[currentIndex].captions[x]);
 +
else
 +
for (x in __captionLines)
 +
__captionLines[x].html('');
 +
}
 +
 +
// Nav controls
 +
updateNavControls();
 +
}
 +
else
 +
{
 +
var diff, currentX, newX, realIndex;
 +
 +
if (settings.activeSlideClass)
 +
list[currentIndex].object
 +
.removeClass(settings.activeSlideClass);
 +
 +
if (settings.clickToNav)
 +
list[currentIndex].object
 +
.css('cursor', 'pointer');
 +
 +
currentX = list[currentIndex].x;
 +
newX = list[index].x;
 +
diff = currentX - newX;
 +
 +
// Get real index
 +
if (list[index].realIndex !== false)
 +
realIndex = list[index].realIndex;
 +
else
 +
realIndex = index;
 +
 +
// Indicator
 +
if (__indicator)
 +
{
 +
__indicator.removeClass('active');
 +
jQuery(__indicator.get(realIndex - pFirst)).addClass('active');
 +
}
 +
 +
// Captions
 +
if (__captionLines)
 +
{
 +
if (list[realIndex].captions)
 +
for (x in __captionLines)
 +
__captionLines[x].html(list[realIndex].captions[x]);
 +
else
 +
for (x in __captionLines)
 +
__captionLines[x].html('');
 +
}
 +
 +
__reel.animate({ left: '+=' + diff }, settings.speed, 'swing', function() {
 +
currentIndex = index;
 +
 +
// Get real index and adjust reel position
 +
if (list[currentIndex].realIndex !== false)
 +
{
 +
currentIndex = list[currentIndex].realIndex;
 +
__reel.css('left', -1 * list[currentIndex].x);
 +
}
 +
 +
// Active slide
 +
if (settings.activeSlideClass)
 +
list[currentIndex].object
 +
.addClass(settings.activeSlideClass);
 +
 +
// Link
 +
if (settings.clickToNav && !list[currentIndex].link)
 +
list[currentIndex].object
 +
.css('cursor', 'default');
 +
 +
// Nav controls
 +
updateNavControls();
 +
 +
isLocked = false;
 +
});
 +
}
 +
}
 +
 +
function initialize()
 +
{
 +
var tmp, a, s;
 +
 +
// Slides, viewer, reel, indicator
 +
__viewer = getElement(settings.viewerSelector, true);
 +
__reel = getElement(settings.reelSelector, true);
 +
__slides = getElement(settings.slidesSelector, true);
 +
__indicator = getElement(settings.indicatorSelector, false);
 +
 +
// Caption lines
 +
a = new Array();
 +
 +
for (i = 1; i <= settings.captionLines; i++)
 +
{
 +
s = settings.captionLineSelector;
 +
 +
if (settings.captionLines > 1)
 +
s = s + i;
 +
 +
tmp = getElement(s, false);
 +
 +
if (tmp == null)
 +
{
 +
a = null;
 +
break;
 +
}
 +
 +
a.push(tmp);
 +
}
 +
 +
__captionLines = a;
 +
 +
// Navigation
 +
__navFirst = getElement(settings.navFirstSelector);
 +
__navLast = getElement(settings.navLastSelector);
 +
__navNext = getElement(settings.navNextSelector);
 +
__navPrevious = getElement(settings.navPreviousSelector);
 +
__navStopAdvance = getElement(settings.navStopAdvanceSelector);
 +
__navPlayAdvance = getElement(settings.navPlayAdvanceSelector);
 +
 +
if (__navFirst) __navControls.push(__navFirst);
 +
if (__navLast) __navControls.push(__navLast);
 +
if (__navNext) __navControls.push(__navNext);
 +
if (__navPrevious) __navControls.push(__navPrevious);
 +
 +
// Check configuration status
 +
 +
// ClickToNav only works when viewerOffset != false
 +
if (settings.viewerOffset == false
 +
&& settings.clickToNav)
 +
{
 +
alert('Error: clickToNav only works when viewerOffset is in use.');
 +
return false;
 +
}
 +
 +
// When using the indicator, it must have as many items as there are slides
 +
if (__indicator)
 +
{
 +
if (__indicator.length != __slides.length)
 +
{
 +
alert('Error: Indicator needs to have as many items as there are slides.');
 +
return false;
 +
}
 +
}
 +
 +
// Final check
 +
if (isConfigured == false)
 +
{
 +
alert('Error: One or more configuration errors detected. Aborting.');
 +
return false;
 +
}
 +
 +
if (settings.viewerOffset == false)
 +
settings.viewerOffset = 0;
 +
 +
// Set up
 +
 +
// Viewer
 +
__viewer.css('position', 'relative');
 +
__viewer.css('overflow', 'hidden');
 +
 +
// Reel
 +
__reel.css('position', 'absolute');
 +
__reel.css('left', 0);
 +
__reel.css('top', 0);
 +
__reel.hide();
 +
 +
// Slides
 +
var cx = 0, length = __slides.length;
 +
 +
if (settings.seamlessWrap)
 +
{
 +
isSeamless = true;
 +
 +
var L1 = __slides.eq(0);
 +
var L2 = __slides.eq(Math.min(length - 1, 1));
 +
var R2 = __slides.eq(Math.max(length - 2, 0));
 +
var R1 = __slides.eq(Math.max(length - 1, 0));
 +
 +
var realFirst = L1;
 +
var realLast = R1;
 +
 +
R2.clone().insertBefore(realFirst);
 +
R1.clone().insertBefore(realFirst);
 +
L2.clone().insertAfter(realLast);
 +
L1.clone().insertAfter(realLast);
 +
 +
__slides = getElement(settings.slidesSelector, true);
 +
 +
pFirst = 2;
 +
pLast = __slides.length - 3;
 +
}
 +
else
 +
{
 +
pFirst = 0;
 +
pLast = length - 1;
 +
}
 +
 +
__slides.each(function(index) {
 +
 +
var y = jQuery(this), link = false, captions = new Array();
 +
var l, i, tmp, s;
 +
 +
// click to nav?
 +
if (settings.clickToNav)
 +
{
 +
y
 +
.css('cursor', 'pointer')
 +
.click(function(e) {
 +
if (currentIndex != index)
 +
{
 +
e.stopPropagation();
 +
 +
if (isAdvancing)
 +
interruptAdvance();
 +
 +
switchSlide(index);
 +
}
 +
});
 +
}
 +
 +
// Link?
 +
var l = y.find(settings.slideLinkSelector);
 +
 +
if (l.length > 0)
 +
{
 +
link = l.attr('href');
 +
l.remove();
 +
y
 +
.css('cursor', 'pointer')
 +
.click(function(e) {
 +
if (currentIndex == index)
 +
window.location = link;
 +
});
 +
}
 +
 +
// Caption(s)?
 +
 +
for (i = 1; i <= settings.captionLines; i++)
 +
{
 +
s = settings.slideCaptionSelector;
 +
 +
if (settings.captionLines > 1)
 +
s = s + i;
 +
 +
tmp = y.find(s);
 +
 +
if (tmp.length > 0)
 +
{
 +
captions.push(tmp.html());
 +
tmp.remove();
 +
}
 +
}
 +
 +
if (captions.length != settings.captionLines)
 +
captions = false;
 +
 +
list[index] = {
 +
object: y,
 +
x: cx - settings.viewerOffset,
 +
realIndex: false,
 +
link: link,
 +
captions: captions
 +
};
 +
 +
y.css('position', 'absolute');
 +
y.css('left', cx);
 +
y.css('top', 0);
 +
 +
cx += y.width();
 +
});
 +
 +
if (isSeamless)
 +
{
 +
list[pFirst - 1].realIndex = pLast;
 +
list[pLast + 1].realIndex = pFirst;
 +
}
 +
 +
// Indicator
 +
if (__indicator)
 +
{
 +
__indicator.each(function() {
 +
var t = jQuery(this);
 +
 +
t
 +
.css('cursor', 'pointer')
 +
.click(function(event) {
 +
event.preventDefault();
 +
 +
if (isLocked)
 +
return false;
 +
 +
if (isAdvancing)
 +
interruptAdvance();
 +
 +
switchSlide(t.index() + pFirst);
 +
});
 +
});
 +
}
 +
 +
// Navigation
 +
if (__navFirst)
 +
__navFirst.click(function(event) {
 +
event.preventDefault();
 +
 +
if (isLocked)
 +
return false;
 +
 +
if (isAdvancing)
 +
interruptAdvance();
 +
 +
firstSlide();
 +
});
 +
 +
if (__navLast)
 +
__navLast.click(function(event) {
 +
event.preventDefault();
 +
 +
if (isLocked)
 +
return false;
 +
 +
if (isAdvancing)
 +
interruptAdvance();
 +
 +
lastSlide();
 +
});
 +
 +
if (__navNext)
 +
__navNext.click(function(event) {
 +
event.preventDefault();
 +
 +
if (isLocked)
 +
return false;
 +
 +
if (isAdvancing)
 +
interruptAdvance();
 +
 +
nextSlide();
 +
});
 +
 +
if (__navPrevious)
 +
__navPrevious.click(function(event) {
 +
event.preventDefault();
 +
 +
if (isLocked)
 +
return false;
 +
 +
if (isAdvancing)
 +
interruptAdvance();
 +
 +
previousSlide();
 +
});
 +
 +
if (__navStopAdvance)
 +
__navStopAdvance.click(function(event) {
 +
event.preventDefault();
 +
 +
if (isLocked)
 +
return false;
 +
 +
if (!isAdvancing)
 +
return false;
 +
 +
stopAdvance();
 +
});
 +
 +
if (__navPlayAdvance)
 +
__navPlayAdvance.click(function(event) {
 +
event.preventDefault();
 +
 +
if (isLocked)
 +
return false;
 +
 +
if (isAdvancing)
 +
return false;
 +
 +
playAdvance();
 +
});
 +
 +
__reel.fadeIn(settings.fadeInSpeed);
 +
 +
return true;
 +
}
 +
 +
// Bind events
 +
var o = (settings.selectorParent ? settings.selectorParent : settings.viewerSelector);
 +
 +
if (o)
 +
o
 +
.bind('previousSlide', function() { if (isAdvancing) interruptAdvance(); previousSlide(); })
 +
.bind('nextSlide', function() { if (isAdvancing) interruptAdvance(); nextSlide(); })
 +
.bind('firstSlide', function() { if (isAdvancing) interruptAdvance(); firstSlide(); })
 +
.bind('lastSlide', function() { if (isAdvancing) interruptAdvance(); lastSlide(); });
 +
 +
// Ready
 +
jQuery().ready(function() {
 +
if (initialize())
 +
{
 +
initializeAdvance();
 +
firstSlide();
 +
}
 +
});
 +
};
 +
 +
})(jQuery);</script>
 +
</head>
</head>
Line 569: Line 1,252:
<div class="reel">
<div class="reel">
<div class="slide">
<div class="slide">
-
<a class="link" href="http://nodethirtythree.com/#slidertron-slide-1">Full story ...</a> <img src="images/pic01.jpg" alt="" /> </div>
+
<a class="link" href="http://nodethirtythree.com/#slidertron-slide-1">Full story ...</a> <img src="http://25.media.tumblr.com/0fd39ab063f25f8334a27fd1a963acf9/tumblr_mom163iMwf1qd61pzo1_1280.jpg" alt="" /> </div>
<div class="slide">
<div class="slide">
-
<a class="link" href="http://nodethirtythree.com/#slidertron-slide-2">Full story ...</a> <img src="images/pic02.jpg" alt="" /> </div>
+
<a class="link" href="http://nodethirtythree.com/#slidertron-slide-2">Full story ...</a> <img src="http://25.media.tumblr.com/418f47ff4d1aabc488e06ebe612794a8/tumblr_mo2jwy9ZRv1qat5vuo1_1280.jpg" alt="" /> </div>
</div>
</div>
</div>
</div>
Line 617: Line 1,300:
<div id="featured" class="container">
<div id="featured" class="container">
<h2 class="title">Praesent mattis condimentum</h2>
<h2 class="title">Praesent mattis condimentum</h2>
-
<div id="fbox1"> <img src="https://www.dropbox.com/s/z7pe5qmsl83jtz9/project%20thumb.jpg" width="235" height="235" alt="" />
+
<div id="fbox1"> <img src="http://25.media.tumblr.com/418f47ff4d1aabc488e06ebe612794a8/tumblr_mo2jwy9ZRv1qat5vuo1_1280.jpg" width="235" height="235" alt="" />
<h2>Project</h2>
<h2>Project</h2>
<p>Learn more about the exciting developments of minicells as a safe and effective chassis.</p>
<p>Learn more about the exciting developments of minicells as a safe and effective chassis.</p>

Latest revision as of 18:54, 19 June 2013

VGEM 2013

Oh yes.

This is going to be fun.

Retrieved from "http://2013.igem.org/VirginiaTemplate2"