Difference between revisions of "Template:CSS UCL6"

Line 1: Line 1:
−
{{UCL_Smoothscroll}}
+
 
−
<html>
+
 
<head>
 
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>  
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>  
Line 14: Line 13:
  
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 +
  <script type="text/javascript">
 +
 +
(function (root, factory) {
 +
if ( typeof define === 'function' && define.amd ) {
 +
define([], factory(root));
 +
} else if ( typeof exports === 'object' ) {
 +
module.exports = factory(root);
 +
} else {
 +
root.smoothScroll = factory(root);
 +
}
 +
})(typeof global !== 'undefined' ? global : this.window || this.global, function (root) {
 +
 +
'use strict';
 +
 +
//
 +
// Variables
 +
//
 +
 +
var smoothScroll = {}; // Object for public APIs
 +
var supports = 'querySelector' in document && 'addEventListener' in root; // Feature test
 +
var settings, eventTimeout, fixedHeader, headerHeight;
 +
 +
// Default settings
 +
var defaults = {
 +
selector: '[data-scroll]',
 +
selectorHeader: '[data-scroll-header]',
 +
speed: 500,
 +
easing: 'easeInOutCubic',
 +
offset: 0,
 +
updateURL: true,
 +
callback: function () {}
 +
};
 +
 +
 +
//
 +
// Methods
 +
//
 +
 +
/**
 +
* Merge two or more objects. Returns a new object.
 +
* @private
 +
* @param {Boolean}  deep    If true, do a deep (or recursive) merge [optional]
 +
* @param {Object}  objects  The objects to merge together
 +
* @returns {Object}          Merged values of defaults and options
 +
*/
 +
var extend = function () {
 +
 +
// Variables
 +
var extended = {};
 +
var deep = false;
 +
var i = 0;
 +
var length = arguments.length;
 +
 +
// Check if a deep merge
 +
if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) {
 +
deep = arguments[0];
 +
i++;
 +
}
 +
 +
// Merge the object into the extended object
 +
var merge = function (obj) {
 +
for ( var prop in obj ) {
 +
if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) {
 +
// If deep merge and property is an object, merge properties
 +
if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) {
 +
extended[prop] = extend( true, extended[prop], obj[prop] );
 +
} else {
 +
extended[prop] = obj[prop];
 +
}
 +
}
 +
}
 +
};
 +
 +
// Loop through each object and conduct a merge
 +
for ( ; i < length; i++ ) {
 +
var obj = arguments[i];
 +
merge(obj);
 +
}
 +
 +
return extended;
 +
 +
};
 +
 +
/**
 +
* Get the height of an element.
 +
* @private
 +
* @param  {Node} elem The element to get the height of
 +
* @return {Number}    The element's height in pixels
 +
*/
 +
var getHeight = function ( elem ) {
 +
return Math.max( elem.scrollHeight, elem.offsetHeight, elem.clientHeight );
 +
};
 +
 +
/**
 +
* Get the closest matching element up the DOM tree.
 +
* @private
 +
* @param  {Element} elem    Starting element
 +
* @param  {String}  selector Selector to match against (class, ID, data attribute, or tag)
 +
* @return {Boolean|Element}  Returns null if not match found
 +
*/
 +
var getClosest = function ( elem, selector ) {
 +
 +
// Variables
 +
var firstChar = selector.charAt(0);
 +
var supports = 'classList' in document.documentElement;
 +
var attribute, value;
 +
 +
// If selector is a data attribute, split attribute from value
 +
if ( firstChar === '[' ) {
 +
selector = selector.substr(1, selector.length - 2);
 +
attribute = selector.split( '=' );
 +
 +
if ( attribute.length > 1 ) {
 +
value = true;
 +
attribute[1] = attribute[1].replace( /"/g, '' ).replace( /'/g, '' );
 +
}
 +
}
 +
 +
// Get closest match
 +
for ( ; elem && elem !== document; elem = elem.parentNode ) {
 +
 +
// If selector is a class
 +
if ( firstChar === '.' ) {
 +
if ( supports ) {
 +
if ( elem.classList.contains( selector.substr(1) ) ) {
 +
return elem;
 +
}
 +
} else {
 +
if ( new RegExp('(^|\\s)' + selector.substr(1) + '(\\s|$)').test( elem.className ) ) {
 +
return elem;
 +
}
 +
}
 +
}
 +
 +
// If selector is an ID
 +
if ( firstChar === '#' ) {
 +
if ( elem.id === selector.substr(1) ) {
 +
return elem;
 +
}
 +
}
 +
 +
// If selector is a data attribute
 +
if ( firstChar === '[' ) {
 +
if ( elem.hasAttribute( attribute[0] ) ) {
 +
if ( value ) {
 +
if ( elem.getAttribute( attribute[0] ) === attribute[1] ) {
 +
return elem;
 +
}
 +
} else {
 +
return elem;
 +
}
 +
}
 +
}
 +
 +
// If selector is a tag
 +
if ( elem.tagName.toLowerCase() === selector ) {
 +
return elem;
 +
}
 +
 +
}
 +
 +
return null;
 +
 +
};
 +
 +
/**
 +
* Escape special characters for use with querySelector
 +
* @private
 +
* @param {String} id The anchor ID to escape
 +
* @author Mathias Bynens
 +
* @link https://github.com/mathiasbynens/CSS.escape
 +
*/
 +
var escapeCharacters = function ( id ) {
 +
var string = String(id);
 +
var length = string.length;
 +
var index = -1;
 +
var codeUnit;
 +
var result = '';
 +
var firstCodeUnit = string.charCodeAt(0);
 +
while (++index < length) {
 +
codeUnit = string.charCodeAt(index);
 +
// Note: there’s no need to special-case astral symbols, surrogate
 +
// pairs, or lone surrogates.
 +
 +
// If the character is NULL (U+0000), then throw an
 +
// `InvalidCharacterError` exception and terminate these steps.
 +
if (codeUnit === 0x0000) {
 +
throw new InvalidCharacterError(
 +
'Invalid character: the input contains U+0000.'
 +
);
 +
}
 +
 +
if (
 +
// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
 +
// U+007F, […]
 +
(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
 +
// If the character is the first character and is in the range [0-9]
 +
// (U+0030 to U+0039), […]
 +
(index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
 +
// If the character is the second character and is in the range [0-9]
 +
// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
 +
(
 +
index === 1 &&
 +
codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
 +
firstCodeUnit === 0x002D
 +
)
 +
) {
 +
// http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point
 +
result += '\\' + codeUnit.toString(16) + ' ';
 +
continue;
 +
}
 +
 +
// If the character is not handled by one of the above rules and is
 +
// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
 +
// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
 +
// U+005A), or [a-z] (U+0061 to U+007A), […]
 +
if (
 +
codeUnit >= 0x0080 ||
 +
codeUnit === 0x002D ||
 +
codeUnit === 0x005F ||
 +
codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
 +
codeUnit >= 0x0041 && codeUnit <= 0x005A ||
 +
codeUnit >= 0x0061 && codeUnit <= 0x007A
 +
) {
 +
// the character itself
 +
result += string.charAt(index);
 +
continue;
 +
}
 +
 +
// Otherwise, the escaped character.
 +
// http://dev.w3.org/csswg/cssom/#escape-a-character
 +
result += '\\' + string.charAt(index);
 +
 +
}
 +
return result;
 +
};
 +
 +
/**
 +
* Calculate the easing pattern
 +
* @private
 +
* @link https://gist.github.com/gre/1650294
 +
* @param {String} type Easing pattern
 +
* @param {Number} time Time animation should take to complete
 +
* @returns {Number}
 +
*/
 +
var easingPattern = function ( type, time ) {
 +
var pattern;
 +
if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity
 +
if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity
 +
if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration
 +
if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity
 +
if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity
 +
if ( type === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration
 +
if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity
 +
if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity
 +
if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration
 +
if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity
 +
if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity
 +
if ( type === 'easeInOutQuint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration
 +
return pattern || time; // no easing, no acceleration
 +
};
 +
 +
/**
 +
* Calculate how far to scroll
 +
* @private
 +
* @param {Element} anchor The anchor element to scroll to
 +
* @param {Number} headerHeight Height of a fixed header, if any
 +
* @param {Number} offset Number of pixels by which to offset scroll
 +
* @returns {Number}
 +
*/
 +
var getEndLocation = function ( anchor, headerHeight, offset ) {
 +
var location = 0;
 +
if (anchor.offsetParent) {
 +
do {
 +
location += anchor.offsetTop;
 +
anchor = anchor.offsetParent;
 +
} while (anchor);
 +
}
 +
location = location - headerHeight - offset;
 +
return location >= 0 ? location : 0;
 +
};
 +
 +
/**
 +
* Determine the document's height
 +
* @private
 +
* @returns {Number}
 +
*/
 +
var getDocumentHeight = function () {
 +
return Math.max(
 +
root.document.body.scrollHeight, root.document.documentElement.scrollHeight,
 +
root.document.body.offsetHeight, root.document.documentElement.offsetHeight,
 +
root.document.body.clientHeight, root.document.documentElement.clientHeight
 +
);
 +
};
 +
 +
/**
 +
* Convert data-options attribute into an object of key/value pairs
 +
* @private
 +
* @param {String} options Link-specific options as a data attribute string
 +
* @returns {Object}
 +
*/
 +
var getDataOptions = function ( options ) {
 +
return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options );
 +
};
 +
 +
/**
 +
* Update the URL
 +
* @private
 +
* @param {Element} anchor The element to scroll to
 +
* @param {Boolean} url Whether or not to update the URL history
 +
*/
 +
var updateUrl = function ( anchor, url ) {
 +
if ( root.history.pushState && (url || url === 'true') ) {
 +
root.history.pushState( null, null, [root.location.protocol, '//', root.location.host, root.location.pathname, root.location.search, anchor].join('') );
 +
}
 +
};
 +
 +
var getHeaderHeight = function ( header ) {
 +
return header === null ? 0 : ( getHeight( header ) + header.offsetTop );
 +
};
 +
 +
/**
 +
* Start/stop the scrolling animation
 +
* @public
 +
* @param {Element} toggle The element that toggled the scroll event
 +
* @param {Element} anchor The element to scroll to
 +
* @param {Object} options
 +
*/
 +
smoothScroll.animateScroll = function ( toggle, anchor, options ) {
 +
 +
// Options and overrides
 +
var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null );
 +
var settings = extend( settings || defaults, options || {}, overrides ); // Merge user options with defaults
 +
anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers
 +
 +
// Selectors and variables
 +
var anchorElem = anchor === '#' ? root.document.documentElement : root.document.querySelector(anchor);
 +
var startLocation = root.pageYOffset; // Current location on the page
 +
if ( !fixedHeader ) { fixedHeader = root.document.querySelector( settings.selectorHeader ); }  // Get the fixed header if not already set
 +
if ( !headerHeight ) { headerHeight = getHeaderHeight( fixedHeader ); } // Get the height of a fixed header if one exists and not already set
 +
var endLocation = getEndLocation( anchorElem, headerHeight, parseInt(settings.offset, 10) ); // Scroll to location
 +
var animationInterval; // interval timer
 +
var distance = endLocation - startLocation; // distance to travel
 +
var documentHeight = getDocumentHeight();
 +
var timeLapsed = 0;
 +
var percentage, position;
 +
 +
// Update URL
 +
updateUrl(anchor, settings.updateURL);
 +
 +
/**
 +
* Stop the scroll animation when it reaches its target (or the bottom/top of page)
 +
* @private
 +
* @param {Number} position Current position on the page
 +
* @param {Number} endLocation Scroll to location
 +
* @param {Number} animationInterval How much to scroll on this loop
 +
*/
 +
var stopAnimateScroll = function (position, endLocation, animationInterval) {
 +
var currentLocation = root.pageYOffset;
 +
if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) {
 +
clearInterval(animationInterval);
 +
anchorElem.focus();
 +
settings.callback( toggle, anchor ); // Run callbacks after animation complete
 +
}
 +
};
 +
 +
/**
 +
* Loop scrolling animation
 +
* @private
 +
*/
 +
var loopAnimateScroll = function () {
 +
timeLapsed += 16;
 +
percentage = ( timeLapsed / parseInt(settings.speed, 10) );
 +
percentage = ( percentage > 1 ) ? 1 : percentage;
 +
position = startLocation + ( distance * easingPattern(settings.easing, percentage) );
 +
root.scrollTo( 0, Math.floor(position) );
 +
stopAnimateScroll(position, endLocation, animationInterval);
 +
};
 +
 +
/**
 +
* Set interval timer
 +
* @private
 +
*/
 +
var startAnimateScroll = function () {
 +
animationInterval = setInterval(loopAnimateScroll, 16);
 +
};
 +
 +
/**
 +
* Reset position to fix weird iOS bug
 +
* @link https://github.com/cferdinandi/smooth-scroll/issues/45
 +
*/
 +
if ( root.pageYOffset === 0 ) {
 +
root.scrollTo( 0, 0 );
 +
}
 +
 +
// Start scrolling animation
 +
startAnimateScroll();
 +
 +
};
 +
 +
/**
 +
* If smooth scroll element clicked, animate scroll
 +
* @private
 +
*/
 +
var eventHandler = function (event) {
 +
var toggle = getClosest( event.target, settings.selector );
 +
if ( toggle && toggle.tagName.toLowerCase() === 'a' ) {
 +
event.preventDefault(); // Prevent default click event
 +
smoothScroll.animateScroll( toggle, toggle.hash, settings); // Animate scroll
 +
}
 +
};
 +
 +
/**
 +
* On window scroll and resize, only run events at a rate of 15fps for better performance
 +
* @private
 +
* @param  {Function} eventTimeout Timeout function
 +
* @param  {Object} settings
 +
*/
 +
var eventThrottler = function (event) {
 +
if ( !eventTimeout ) {
 +
eventTimeout = setTimeout(function() {
 +
eventTimeout = null; // Reset timeout
 +
headerHeight = getHeaderHeight( fixedHeader ); // Get the height of a fixed header if one exists
 +
}, 66);
 +
}
 +
};
 +
 +
/**
 +
* Destroy the current initialization.
 +
* @public
 +
*/
 +
smoothScroll.destroy = function () {
 +
 +
// If plugin isn't already initialized, stop
 +
if ( !settings ) return;
 +
 +
// Remove event listeners
 +
root.document.removeEventListener( 'click', eventHandler, false );
 +
root.removeEventListener( 'resize', eventThrottler, false );
 +
 +
// Reset varaibles
 +
settings = null;
 +
eventTimeout = null;
 +
fixedHeader = null;
 +
headerHeight = null;
 +
};
 +
 +
/**
 +
* Initialize Smooth Scroll
 +
* @public
 +
* @param {Object} options User settings
 +
*/
 +
smoothScroll.init = function ( options ) {
 +
 +
// feature test
 +
if ( !supports ) return;
 +
 +
// Destroy any existing initializations
 +
smoothScroll.destroy();
 +
 +
// Selectors and variables
 +
settings = extend( defaults, options || {} ); // Merge user options with defaults
 +
fixedHeader = root.document.querySelector( settings.selectorHeader ); // Get the fixed header
 +
headerHeight = getHeaderHeight( fixedHeader );
 +
 +
// When a toggle is clicked, run the click handler
 +
root.document.addEventListener('click', eventHandler, false );
 +
if ( fixedHeader ) { root.addEventListener( 'resize', eventThrottler, false ); }
 +
 +
};
 +
 +
 +
//
 +
// Public APIs
 +
//
 +
 +
return smoothScroll;
 +
 +
});
 +
</script>
  
 +
 
 
   <script>
 
   <script>
 
smoothScroll.init({
 
smoothScroll.init({

Revision as of 22:47, 18 September 2015

<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway|League Script"/> <link href="http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css"> <link href='https://fonts.googleapis.com/css?family=Mrs+Saint+Delafield' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Lato:100,900' rel='stylesheet' type='text/css'>'

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

 <script type="text/javascript">

(function (root, factory) { if ( typeof define === 'function' && define.amd ) { define([], factory(root)); } else if ( typeof exports === 'object' ) { module.exports = factory(root); } else { root.smoothScroll = factory(root); } })(typeof global !== 'undefined' ? global : this.window || this.global, function (root) {

'use strict';

// // Variables //

var smoothScroll = {}; // Object for public APIs var supports = 'querySelector' in document && 'addEventListener' in root; // Feature test var settings, eventTimeout, fixedHeader, headerHeight;

// Default settings var defaults = { selector: '[data-scroll]', selectorHeader: '[data-scroll-header]', speed: 500, easing: 'easeInOutCubic', offset: 0, updateURL: true, callback: function () {} };


// // Methods //

/** * Merge two or more objects. Returns a new object. * @private * @param {Boolean} deep If true, do a deep (or recursive) merge [optional] * @param {Object} objects The objects to merge together * @returns {Object} Merged values of defaults and options */ var extend = function () {

// Variables var extended = {}; var deep = false; var i = 0; var length = arguments.length;

// Check if a deep merge if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) { deep = arguments[0]; i++; }

// Merge the object into the extended object var merge = function (obj) { for ( var prop in obj ) { if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) { // If deep merge and property is an object, merge properties if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) { extended[prop] = extend( true, extended[prop], obj[prop] ); } else { extended[prop] = obj[prop]; } } } };

// Loop through each object and conduct a merge for ( ; i < length; i++ ) { var obj = arguments[i]; merge(obj); }

return extended;

};

/** * Get the height of an element. * @private * @param {Node} elem The element to get the height of * @return {Number} The element's height in pixels */ var getHeight = function ( elem ) { return Math.max( elem.scrollHeight, elem.offsetHeight, elem.clientHeight ); };

/** * Get the closest matching element up the DOM tree. * @private * @param {Element} elem Starting element * @param {String} selector Selector to match against (class, ID, data attribute, or tag) * @return {Boolean|Element} Returns null if not match found */ var getClosest = function ( elem, selector ) {

// Variables var firstChar = selector.charAt(0); var supports = 'classList' in document.documentElement; var attribute, value;

// If selector is a data attribute, split attribute from value if ( firstChar === '[' ) { selector = selector.substr(1, selector.length - 2); attribute = selector.split( '=' );

if ( attribute.length > 1 ) { value = true; attribute[1] = attribute[1].replace( /"/g, ).replace( /'/g, ); } }

// Get closest match for ( ; elem && elem !== document; elem = elem.parentNode ) {

// If selector is a class if ( firstChar === '.' ) { if ( supports ) { if ( elem.classList.contains( selector.substr(1) ) ) { return elem; } } else { if ( new RegExp('(^|\\s)' + selector.substr(1) + '(\\s|$)').test( elem.className ) ) { return elem; } } }

// If selector is an ID if ( firstChar === '#' ) { if ( elem.id === selector.substr(1) ) { return elem; } }

// If selector is a data attribute if ( firstChar === '[' ) { if ( elem.hasAttribute( attribute[0] ) ) { if ( value ) { if ( elem.getAttribute( attribute[0] ) === attribute[1] ) { return elem; } } else { return elem; } } }

// If selector is a tag if ( elem.tagName.toLowerCase() === selector ) { return elem; }

}

return null;

};

/** * Escape special characters for use with querySelector * @private * @param {String} id The anchor ID to escape * @author Mathias Bynens * @link https://github.com/mathiasbynens/CSS.escape */ var escapeCharacters = function ( id ) { var string = String(id); var length = string.length; var index = -1; var codeUnit; var result = ; var firstCodeUnit = string.charCodeAt(0); while (++index < length) { codeUnit = string.charCodeAt(index); // Note: there’s no need to special-case astral symbols, surrogate // pairs, or lone surrogates.

// If the character is NULL (U+0000), then throw an // `InvalidCharacterError` exception and terminate these steps. if (codeUnit === 0x0000) { throw new InvalidCharacterError( 'Invalid character: the input contains U+0000.' ); }

if ( // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is // U+007F, […] (codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F || // If the character is the first character and is in the range [0-9] // (U+0030 to U+0039), […] (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) || // If the character is the second character and is in the range [0-9] // (U+0030 to U+0039) and the first character is a `-` (U+002D), […] ( index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002D ) ) { // http://dev.w3.org/csswg/cssom/#escape-a-character-as-code-point result += '\\' + codeUnit.toString(16) + ' '; continue; }

// If the character is not handled by one of the above rules and is // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to // U+005A), or [a-z] (U+0061 to U+007A), […] if ( codeUnit >= 0x0080 || codeUnit === 0x002D || codeUnit === 0x005F || codeUnit >= 0x0030 && codeUnit <= 0x0039 || codeUnit >= 0x0041 && codeUnit <= 0x005A || codeUnit >= 0x0061 && codeUnit <= 0x007A ) { // the character itself result += string.charAt(index); continue; }

// Otherwise, the escaped character. // http://dev.w3.org/csswg/cssom/#escape-a-character result += '\\' + string.charAt(index);

} return result; };

/** * Calculate the easing pattern * @private * @link https://gist.github.com/gre/1650294 * @param {String} type Easing pattern * @param {Number} time Time animation should take to complete * @returns {Number} */ var easingPattern = function ( type, time ) { var pattern; if ( type === 'easeInQuad' ) pattern = time * time; // accelerating from zero velocity if ( type === 'easeOutQuad' ) pattern = time * (2 - time); // decelerating to zero velocity if ( type === 'easeInOutQuad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration if ( type === 'easeInCubic' ) pattern = time * time * time; // accelerating from zero velocity if ( type === 'easeOutCubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity if ( type === 'easeInOutCubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration if ( type === 'easeInQuart' ) pattern = time * time * time * time; // accelerating from zero velocity if ( type === 'easeOutQuart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity if ( type === 'easeInOutQuart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration if ( type === 'easeInQuint' ) pattern = time * time * time * time * time; // accelerating from zero velocity if ( type === 'easeOutQuint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity if ( type === 'easeInOutQuint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration return pattern || time; // no easing, no acceleration };

/** * Calculate how far to scroll * @private * @param {Element} anchor The anchor element to scroll to * @param {Number} headerHeight Height of a fixed header, if any * @param {Number} offset Number of pixels by which to offset scroll * @returns {Number} */ var getEndLocation = function ( anchor, headerHeight, offset ) { var location = 0; if (anchor.offsetParent) { do { location += anchor.offsetTop; anchor = anchor.offsetParent; } while (anchor); } location = location - headerHeight - offset; return location >= 0 ? location : 0; };

/** * Determine the document's height * @private * @returns {Number} */ var getDocumentHeight = function () { return Math.max( root.document.body.scrollHeight, root.document.documentElement.scrollHeight, root.document.body.offsetHeight, root.document.documentElement.offsetHeight, root.document.body.clientHeight, root.document.documentElement.clientHeight ); };

/** * Convert data-options attribute into an object of key/value pairs * @private * @param {String} options Link-specific options as a data attribute string * @returns {Object} */ var getDataOptions = function ( options ) { return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options ); };

/** * Update the URL * @private * @param {Element} anchor The element to scroll to * @param {Boolean} url Whether or not to update the URL history */ var updateUrl = function ( anchor, url ) { if ( root.history.pushState && (url || url === 'true') ) { root.history.pushState( null, null, [root.location.protocol, '//', root.location.host, root.location.pathname, root.location.search, anchor].join() ); } };

var getHeaderHeight = function ( header ) { return header === null ? 0 : ( getHeight( header ) + header.offsetTop ); };

/** * Start/stop the scrolling animation * @public * @param {Element} toggle The element that toggled the scroll event * @param {Element} anchor The element to scroll to * @param {Object} options */ smoothScroll.animateScroll = function ( toggle, anchor, options ) {

// Options and overrides var overrides = getDataOptions( toggle ? toggle.getAttribute('data-options') : null ); var settings = extend( settings || defaults, options || {}, overrides ); // Merge user options with defaults anchor = '#' + escapeCharacters(anchor.substr(1)); // Escape special characters and leading numbers

// Selectors and variables var anchorElem = anchor === '#' ? root.document.documentElement : root.document.querySelector(anchor); var startLocation = root.pageYOffset; // Current location on the page if ( !fixedHeader ) { fixedHeader = root.document.querySelector( settings.selectorHeader ); } // Get the fixed header if not already set if ( !headerHeight ) { headerHeight = getHeaderHeight( fixedHeader ); } // Get the height of a fixed header if one exists and not already set var endLocation = getEndLocation( anchorElem, headerHeight, parseInt(settings.offset, 10) ); // Scroll to location var animationInterval; // interval timer var distance = endLocation - startLocation; // distance to travel var documentHeight = getDocumentHeight(); var timeLapsed = 0; var percentage, position;

// Update URL updateUrl(anchor, settings.updateURL);

/** * Stop the scroll animation when it reaches its target (or the bottom/top of page) * @private * @param {Number} position Current position on the page * @param {Number} endLocation Scroll to location * @param {Number} animationInterval How much to scroll on this loop */ var stopAnimateScroll = function (position, endLocation, animationInterval) { var currentLocation = root.pageYOffset; if ( position == endLocation || currentLocation == endLocation || ( (root.innerHeight + currentLocation) >= documentHeight ) ) { clearInterval(animationInterval); anchorElem.focus(); settings.callback( toggle, anchor ); // Run callbacks after animation complete } };

/** * Loop scrolling animation * @private */ var loopAnimateScroll = function () { timeLapsed += 16; percentage = ( timeLapsed / parseInt(settings.speed, 10) ); percentage = ( percentage > 1 ) ? 1 : percentage; position = startLocation + ( distance * easingPattern(settings.easing, percentage) ); root.scrollTo( 0, Math.floor(position) ); stopAnimateScroll(position, endLocation, animationInterval); };

/** * Set interval timer * @private */ var startAnimateScroll = function () { animationInterval = setInterval(loopAnimateScroll, 16); };

/** * Reset position to fix weird iOS bug * @link https://github.com/cferdinandi/smooth-scroll/issues/45 */ if ( root.pageYOffset === 0 ) { root.scrollTo( 0, 0 ); }

// Start scrolling animation startAnimateScroll();

};

/** * If smooth scroll element clicked, animate scroll * @private */ var eventHandler = function (event) { var toggle = getClosest( event.target, settings.selector ); if ( toggle && toggle.tagName.toLowerCase() === 'a' ) { event.preventDefault(); // Prevent default click event smoothScroll.animateScroll( toggle, toggle.hash, settings); // Animate scroll } };

/** * On window scroll and resize, only run events at a rate of 15fps for better performance * @private * @param {Function} eventTimeout Timeout function * @param {Object} settings */ var eventThrottler = function (event) { if ( !eventTimeout ) { eventTimeout = setTimeout(function() { eventTimeout = null; // Reset timeout headerHeight = getHeaderHeight( fixedHeader ); // Get the height of a fixed header if one exists }, 66); } };

/** * Destroy the current initialization. * @public */ smoothScroll.destroy = function () {

// If plugin isn't already initialized, stop if ( !settings ) return;

// Remove event listeners root.document.removeEventListener( 'click', eventHandler, false ); root.removeEventListener( 'resize', eventThrottler, false );

// Reset varaibles settings = null; eventTimeout = null; fixedHeader = null; headerHeight = null; };

/** * Initialize Smooth Scroll * @public * @param {Object} options User settings */ smoothScroll.init = function ( options ) {

// feature test if ( !supports ) return;

// Destroy any existing initializations smoothScroll.destroy();

// Selectors and variables settings = extend( defaults, options || {} ); // Merge user options with defaults fixedHeader = root.document.querySelector( settings.selectorHeader ); // Get the fixed header headerHeight = getHeaderHeight( fixedHeader );

// When a toggle is clicked, run the click handler root.document.addEventListener('click', eventHandler, false ); if ( fixedHeader ) { root.addEventListener( 'resize', eventThrottler, false ); }

};


// // Public APIs //

return smoothScroll;

}); </script> 


 <script>

smoothScroll.init({ speed: 200, easing: 'easeInOutCubic', offset: 0, updateURL: true, callbackBefore: function ( toggle, anchor ) {}, callbackAfter: function ( toggle, anchor ) {} }); </script>

<style type="text/css">

  1. text {margin-top: 50px; z-index: 9999;}
  2. text h2 {font-size: 25px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; }

.blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity; 

   transition-duration: 1s;
   transition-timing-function: ease; }
  1. text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}



/*references*/ .content .tooltip { 

 background-color: #fff;

border: 1px #22343C solid; 

 border-radius: 4px;
 padding: 3px;
 position: absolute;
 width: 300px;
 z-Index: 99999;
 display: none;

letter-spacing: 1px; line-height: 1; font-size: 11px; }

.tooltip a {color: #22343C;} .tooltip {color: #22343C;}

.content { 

 position: relative;

}

.content {color: #d67166;}

/* end-of-references */

.bigtitle {width: 42%; margin-top: 100px; margin: 0 auto; font-size: 16px; background-image:none /*url('https://static.igem.org/mediawiki/2015/4/43/UCL_headercircle.png')*/; text-align: center; line-height: 2; 

   background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;}

.bigtitle a {color: #22343C; text-decoration: none;}

.title2 {font-family: Satisfy; font-size: 380%; text-align:center;}

.titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}

.arrow {font-size: 50px;}


  1. text h2 {

font-size: 25px !important; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; 

 line-height: 1.4;

}

a { color:#473E4F; -webkit-transition: color ease-in-out 300ms; }

a:hover {color: #70C4BB; text-decoration:none; -webkit-transition: color ease-in-out 300ms; }


a:visited { color:#473E4F; text-decoration:none; -webkit-transition: color ease-in-out 300ms; }

  1. bodyContent {

background-color:#F8FFFF; }

@media (max-width:400px){ p {text-align:justify;}; h3 {font-size:10px;}; }

/* wiki width fixing */

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;}
  1. top-section {
   border: none;
   height: 0px;}

#p-logo, h1.firstHeading,#search-controls,#catlinks {display:none;}
 #footer #f-list {margin-top:0;}
 #top-section,#footer-box{margin:0;padding:0;width:100%;height:0;}
 #contentSub {margin: 0;}

#globalWrapper, #content { width: 100% !important; height: 100%; border: 0; background-color: F8FFFF; margin: 0; padding: 0 !important; padding-bottom: 0 !important; top:0; line-height: 1; position: absolute; }

  1. bodyContent {top: 0px;

position: absolute; width: calc(100% + 16px); height: auto; min-height: 100%; margin: 0 auto; padding: 0; overflow-y: scroll; overflow-x: hidden; }


html, body, #container { top: 0px; width:100%; height: auto; overflow-x: hidden; 

 background: none !important;

}

.buttonblack { 

 margin-bottom: 10px;
 margin-top: 10px;

}


.intro-buttons { padding-top: 20px; color: #FFFFFF; }


.intro-buttons a { color: #FFFFFF; text-decoration: none;} 



 #header2:before

{ content: ""; 


   position: fixed;
   top: 0;
   left: 0;
 bottom: 0;

margin: 0; padding: 0; 

   width: 100%;
   height: 100%;

overflow: hidden; display: block; border: none;

}



.back {text-align: center; top: 15%; position: relative;} .back img {padding-left: 10px; padding-right: 10px; padding-bottom: 7px;} .back a {color: #2a2133; font-size: 16px; font-family: Raleway; letter-spacing: 1.5px; } .back a:hover {color: #493c54; -webkit-transition: color ease-in-out 400ms;}




@media screen and (max-width: 960px) { 

#abstracttext p {    line-height: 2; font-size: 13px; text-indent: 50px;

}


}

  1. abstract h2 {font-size: 20px;}



.mailus {background: #F0F0F5; padding: 5px;}

/*menu*/

.mainmenu { 

 position: fixed;
 top: 0;
 left: 0;
 z-index: 99999;
 width: 100%;
 height: 100px;

font-size: 20px; background-color: #fff; 

box-shadow: 0px -6px 22px;

}


  1. hidden-menu {

margin-left:85%; display: none;}

  1. hidden-menu:hover ul{

height:auto; width:auto; z-index:99999999; display: block; }

  1. hidden-menu ul li {

background-color: #70C4BB; text-align: center; display: block; margin:none; padding-left:20px; padding-right:20px; padding-top:8px; padding-bottom:8px; box-shadow:1.5px 1.5px lightgrey; border-radius:4px; opacity:0.9; z-index:99999999; }

  1. hidden-menu ul {

position:fixed; padding-top:60px; right: 0px; padding-right: 50px; display: none; }

  1. hidden-menu ul li a {

color: #fff; font-size: 23px; }

  1. hidden-menu ul li a:hover {

color: #787172 }

  1. hidden-menu a {

color: #473E4F; text-decoration: none; font-family: Raleway; }

  1. hidden-menu a:hover {color: #70C4BB;
   -webkit-transition: color ease-in-out 150ms;

}


  1. mobilebutton {

height:50px; width:50px; top:0; right:0px; margin-top: 17px; position:fixed; opacity:0.9; z-index:999999999; }


  1. igemlogo {

position:fixed; top:30px; left: 10px; float:left; z-index:99999; }


.menu-items {display: inline-block; width: 100%; text-align: right; position:fixed; top: 15px; z-index:99998; right: 0; padding-right: 53px; }


.menu-items li { 

 display: inline-block;
 margin-right: 15px;
 margin-left: 15px;

margin-top: 0px; letter-spacing: 3px; height: 30px; text-transform: uppercase; font-size: 12px; font-weight: bold; 

 }


.menu-items li:hover ul, .menu-items li.hover ul{ padding-left: 0; 

visibility: visible;
 opacity: 1;

transition: opacity 1s ease-in 0s, visibility 0s linear 0s; }



.menu-items li ul { visibility: hidden; opacity: 0; transition: opacity 0.5s ease-in 0s, visibility 0s linear 0.5s; position: absolute; top: 20px; 

 margin-right: 0px;
 margin-left: 0px;

padding: 0; text-align: left; }

.menu-items li ul a{list-style-type:none;}


.menu-items li ul li{ text-align: left; padding: 2px 0px; width: auto; display:block; height: 8px; margin: 0px;

}

.menu-items li ul li a { color: #22343C; 

font-size: 9px;

}

.menu-items li ul li a:hover { color: #FE6C68; }

.menu-items a { color: #22343C; 

text-decoration: none;
font-family: Raleway;

}

.menu-items a:hover {color: #70C4BB; 

   -webkit-transition: color ease-in-out 150ms;

}



.buttonblack { 

 margin-bottom: 10px;

margin-top: 10px; text-transform: uppercase; 

 font-size: 14px;
 font-weight: normal;
 line-height: 1.428571429;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 border-radius: 4px;

transition-property: background-color, color, border-color; 

  transition-duration: 1s; 
  transition-timing-function: ease; 
           color: #FFFFFF;
 border: solid 5px #493C54;
   padding: 10px 16px;
 text-decoration: none;
 width:180px; background-color: #493C54;
font-family: Raleway;

letter-spacing: 2px; font-weight: bold;}


.buttonblack:hover {border-color: #fff; color: #fff; background: none;} .buttongreen:hover {border-color: #019966; color: #019966; background: none;}

.buttongreen { margin-bottom: 10px; margin-top: 20px; text-transform: uppercase; 

 font-size: 14px;
 font-weight: normal;
 line-height: 1.428571429;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 border-radius: 4px;

transition-property: background-color, color, border-color; 

  transition-duration: 1s; 
  transition-timing-function: ease; 
           color: #FFFFFF;
 border: solid 5px #019966;
   padding: 10px 16px;
 text-decoration: none;
 width:180px; background-color: #019966;
font-family: Raleway;

letter-spacing: 2px; font-weight: bold;}

a.buttongreen {text-decoration: none; color: #fff;}

.igemlogoo {width: 65px;}


/*media*/

@media(max-width:1280px){ .menu-items {padding-right: 23px;} .menu-items li {margin-right: 12px; margin-left: 12px; letter-spacing: 3px;}


}


@media(max-width:1152px){ .menu-items li {margin-right: 12px; margin-left: 9px; letter-spacing: 2.8px;}

}


@media(max-width:1024px){ .menu-items li { margin-right: 9px; letter-spacing: 2.4px; } .menu-items ul li ul a {font-size: 10px; letter-spacing: 1.9px;} .igemlogoo {width: 50px;}

  1. bodyContent {margin-left: -60px; width: calc(100% + 32px);}

.menu-items {padding-right: 20px;}

}

@media(max-width:960px){ .menu-items li { margin-right: 9px; font-size: 10px; letter-spacing: 2.4px; }

.menu-items ul li ul a {font-size: 9px; letter-spacing: 1.9px;}


}


@media(max-width:900px){


.menu-items li { margin-right: 9px; margin-left: 0px; font-size: 10px; letter-spacing: 2.4px;

}

.menu-items ul li ul a {font-size: 9px; letter-spacing: 1.9px;}

.menu-items li ul li {height: 6px;}

.mainmenu {height: 90px; }


.menu-items li ul {top: 18px;}

}



@media(max-width:830px){

.igemlogoo {width: 40px; opacity: 0.7;}

  1. igemlogo {top: 40px; z-index: -1;}

.menu-items ul li ul a {letter-spacing: 1.4px;}


}


@media(max-width: 768px){


.menu-items li { letter-spacing: 2px; font-size: 10px; margin-right: 3px; margin-left: 3px; margin-top: 8px; text-align: center; } .menu-items ul {text-align: center; padding: 0; margin: 0 2px; list-style:none;}

.menu-items {text-align: center; padding-right: 0px; padding-left: 0px; margin: 0 auto;} .menu-items li ul {position: absolute; left: 0; width: 100%; text-align: center; margin-top: 17px; }

.menu-items li ul li {display: inline-block; margin-left: 10px; margin-right: 10px; height: 34px; } .menu-items ul li ul a { font-size: 10px; letter-spacing: 2px;}

}


@media(max-width: 740px){

.menu-items li { letter-spacing: 1.6px; font-size: 10px; margin-right: 3px; margin-top: 8px; }


}


@media(max-width: 680px){

.menu-items li { letter-spacing: 1.8px; font-size: 9px; margin-right: 3px; margin-left: 3px; margin-top: 12px; }

.menu-items li ul { margin-top: 21px;}

.menu-items li ul li {margin-right: 6px; margin-left: 6px;}

.menu-items ul li ul a { font-size: 9px; letter-spacing: 1.8px;}

}


@media(max-width: 640px){ .mainmenu, .mainmenu ul, .mainmenu ul li {visibility: hidden;}

  1. hidden-menu {display: block; z-index: 999999;}

}


@media(max-width:1280px){

.bigtitle {font-size: 15px;} .bigtitle {width: 50%;} .buttonblack {padding: 5px 11px;}

}


@media(max-width:1152px){

.bigtitle {font-size: 14px;} .bigtitle {width: 52%;} .titlecircle {width: 80%;} a.buttonblack {font-size: 11px; letter-spacing: 1.8px;} .buttonblack {padding: 5px 8px;} }


@media(max-width:1024px){ .bigtitle {width: 58%;} .titlecircle {padding-top: 15%; width: 75%;}

  1. wrapper {top: 100px;}

a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}

  1. header2:before {background-image: none;}
  2. mobilebackground {display: block;}

.constructs {font-size: 15px;} 


}

@media(max-width:960px){

.bigtitle {font-size: 13px; width: 65%;} .arrow {font-size: 40px;} .buttonblack {padding: 5px 5px;}

  1. submenu {width: 110%; margin-left: -5%;}

.constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;} .constructs {text-align: center;} }


@media(max-width:910px){ 

}

@media(max-width:850px){ a.buttonblack {font-size: 10px; letter-spacing: 1.3px;} .buttonblack {padding: 4px 3px;}

  1. submenu {width: 112%; margin-left: -6%;}

.constructs img {min-width: 80% !important;}



}


@media(max-width: 768px){ .bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;} .bigtitle p { font-size: 13px; margin-top: 10px !important;} .titlecircle {width: 70%; padding-top: 8%;} a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}

  1. submenu {width: 80%; margin: 0 auto;}

.buttonblack {line-height: 3.8;} a.buttonblack {font-size: 11px; letter-spacing: 1.8px;} .buttonblack {padding: 5px 8px;} .citecryan {margin-left: 50px;}

}



@media(max-width:680px){

  1. wrapper {width: 100%;}
  2. text {margin: 50px 25px 0 25px;}
  3. text h4 {font-size: 13px;}

.constructs {font-size: 13px;} .bigtitle p { font-size: 13px; } .titlecircle {width: 60%;}

  1. submenu {width: 70%; margin: 0 auto;}

.buttonblack {line-height: 3.8;} a.buttonblack {font-size: 11px; letter-spacing: 1.8px;} .buttonblack {padding: 5px 8px;}

}

@media(max-width:640px){ .arrow {font-size: 30px;} .titlecircle {width: 60%;}

  1. submenu {width: 80%; margin: 0 auto;}


}


@media(max-width:530px){ a.buttonblack {font-size: 10px; letter-spacing: 1.8px;} .bigtitle {background-image:none;} .titlecircle {width: 60%;} .title2 {font-size: 320%;}

  1. text h4 {line-height: 1.7;}

.citecryan {margin-left: 10px;}


}

@media(max-width: 480px) { .bigtitle p { font-size: 13px; text-align: center;} .titlecircle {width: 70%;}

  1. submenu {width: 90%; margin: 0 auto;}


}

@media(max-width: 410px) { .titlecircle {width: 75%;} .title2 {font-size: 300%;} .bigtitle p {line-height: 1.5 !important;} }

@media(max-width: 380px) { .titlecircle {width: 75%; padding-top: 10%;} .bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;} .title2 {font-size: 260%;}

}


@media(max-width: 360px) { .titlecircle {width: 80%;} .title2 {font-size: 240%;} .buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;} } </style>


</head>

<body>

<nav class="mainmenu">

</nav>

<img src="UCLigemMobileMenu.png" id="mobilebutton">

</div></div>

</body>

</html>