Difference between revisions of "Team:Bielefeld-CeBiTec/Hardware"

Line 2: Line 2:
 
<!-- Achtung immer erst bild Links dann rechts sonst passt die nummerierung nicht!-->
 
<!-- Achtung immer erst bild Links dann rechts sonst passt die nummerierung nicht!-->
 
<html>
 
<html>
−
<head>
+
<head>
−
<title>Progress Indicator Animation</title>
+
<title>Progress Indicator Animation</title>
−
<!--<link rel="stylesheet" href="css/normalize.css">-->
+
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/CSS?action=raw&ctype=text/css">
−
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/CSS?action=raw&ctype=text/css">
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
<link rel="stylesheet" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/CircleStyle?action=raw&ctype=text/css">
−
<link rel="stylesheet" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/CircleStyle?action=raw&ctype=text/css">
+
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/MenuCSS?action=raw&ctype=text/css">
−
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/MenuCSS?action=raw&ctype=text/css">
+
 
−
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
+
<script type="text/javascript" src="https://2019.igem.org/Team:Bielefeld-CeBiTec/scriptImageMap&action=raw&ctype=text/javascript"></script>
−
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
+
 
−
<!--[if IE lte 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+
<link rel="shortcut icon" href="https://2019.igem.org/wiki/images/7/71/T--Bielefeld-CeBiTec--favicon.png">
−
      <script src="https://2019.igem.org/Team:Bielefeld-CeBiTec/jquery.min?debug=false&lang=en&modules=startup&only=scripts&skin=igem&*"></script>
+
 
−
<script src="https://2019.igem.org/Team:Bielefeld-CeBiTec/script.js?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=igem&version=20161104T193904Z"></script>
+
<script type="text/javascript">
−
</head>
+
 
 +
/*! Image Map Resizer
 +
*  Desc: Resize HTML imageMap to scaled image.
 +
*  Copyright: (c) 2014-15 David J. Bradshaw - dave@bradshaw.net
 +
*  License: MIT
 +
*/
 +
 
 +
 
 +
;(function() {
 +
'use strict'
 +
 
 +
 
 +
function scaleImageMap() {
 +
function resizeMap() {
 +
function resizeAreaTag(cachedAreaCoords, idx) {
 +
function scale(coord) {
 +
var dimension = 1 === (isWidth = 1 - isWidth) ? 'width' : 'height'
 +
return (
 +
padding[dimension] +
 +
Math.floor(Number(coord) * scalingFactor[dimension])
 +
)
 +
}
 +
 
 +
var isWidth = 0
 +
areas[idx].coords = cachedAreaCoords
 +
.split(',')
 +
.map(scale)
 +
.join(',')
 +
}
 +
 
 +
var scalingFactor = {
 +
width: image.width / image.naturalWidth,
 +
height: image.height / image.naturalHeight,
 +
}
 +
 
 +
var padding = {
 +
width: parseInt(
 +
window.getComputedStyle(image, null).getPropertyValue('padding-left'),
 +
10
 +
),
 +
height: parseInt(
 +
window.getComputedStyle(image, null).getPropertyValue('padding-top'),
 +
10
 +
),
 +
}
 +
 
 +
cachedAreaCoordsArray.forEach(resizeAreaTag)
 +
}
 +
 
 +
function getCoords(e) {
 +
//Normalize coord-string to csv format without any space chars
 +
return e.coords.replace(/ *, */g, ',').replace(/ +/g, ',')
 +
}
 +
 
 +
function debounce() {
 +
clearTimeout(timer)
 +
timer = setTimeout(resizeMap, 250)
 +
}
 +
 
 +
function start() {
 +
if (
 +
image.width !== image.naturalWidth ||
 +
image.height !== image.naturalHeight
 +
) {
 +
resizeMap()
 +
}
 +
}
 +
 
 +
function addEventListeners() {
 +
image.addEventListener('load', resizeMap, false) //Detect late image loads in IE11
 +
window.addEventListener('focus', resizeMap, false) //Cope with window being resized whilst on another tab
 +
window.addEventListener('resize', debounce, false)
 +
window.addEventListener('readystatechange', resizeMap, false)
 +
document.addEventListener('fullscreenchange', resizeMap, false)
 +
}
 +
 
 +
function beenHere() {
 +
return 'function' === typeof map._resize
 +
}
 +
 
 +
function getImg(name) {
 +
return document.querySelector('img[usemap="' + name + '"]')
 +
}
 +
 
 +
function setup() {
 +
areas = map.getElementsByTagName('area')
 +
cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords)
 +
image = getImg('#' + map.name) || getImg(map.name)
 +
map._resize = resizeMap //Bind resize method to HTML map element
 +
}
 +
 
 +
var /*jshint validthis:true */
 +
map = this,
 +
areas = null,
 +
cachedAreaCoordsArray = null,
 +
image = null,
 +
timer = null
 +
 
 +
if (!beenHere()) {
 +
setup()
 +
addEventListeners()
 +
start()
 +
} else {
 +
map._resize() //Already setup, so just resize map
 +
}
 +
}
 +
 
 +
function factory() {
 +
function chkMap(element) {
 +
if (!element.tagName) {
 +
throw new TypeError('Object is not a valid DOM element')
 +
} else if ('MAP' !== element.tagName.toUpperCase()) {
 +
throw new TypeError(
 +
'Expected <MAP> tag, found <' + element.tagName + '>.'
 +
)
 +
}
 +
}
 +
 
 +
function init(element) {
 +
if (element) {
 +
chkMap(element)
 +
scaleImageMap.call(element)
 +
maps.push(element)
 +
}
 +
}
 +
 
 +
var maps
 +
 
 +
return function imageMapResizeF(target) {
 +
maps = [] // Only return maps from this call
 +
 
 +
switch (typeof target) {
 +
case 'undefined':
 +
case 'string':
 +
Array.prototype.forEach.call(
 +
document.querySelectorAll(target || 'map'),
 +
init
 +
)
 +
break
 +
case 'object':
 +
init(target)
 +
break
 +
default:
 +
throw new TypeError('Unexpected data type (' + typeof target + ').')
 +
}
 +
 
 +
return maps
 +
}
 +
}
 +
 
 +
/*
 +
if (typeof define === 'function' && define.amd) {
 +
define([], factory)
 +
} else if (typeof module === 'object' && typeof module.exports === 'object') {
 +
module.exports = factory() //Node for browserfy
 +
} else { */
 +
window.imageMapResize = factory()
 +
/* }  */
 +
 
 +
if ('jQuery' in window) {
 +
window.jQuery.fn.imageMapResize = function $imageMapResizeF() {
 +
return this.filter('map')
 +
.each(scaleImageMap)
 +
.end()
 +
}
 +
}
 +
 
 +
})()
 +
 
 +
</script>
 +
 
 +
 
 +
</head>
 +
 
 
<body>
 
<body>
 
<div class="Wrapper">
 
<div class="Wrapper">
Line 32: Line 205:
 
</figure>
 
</figure>
 
                                       <div class="dark">
 
                                       <div class="dark">
 +
 +
<div class="center-fit">
 +
 +
<map id="imgmap2019917211613" name="imgmap2019917211613">
 +
<area shape="circle" alt="" title="" coords="419,473,367" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/Construction" target="_self" />
 +
<area shape="circle" alt="" title="" coords="1079,1013,399" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/Endocytosis" target="_self" />
 +
<area shape="circle" alt="" title="" coords="1684,446,370" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/Demonstrate" target="_self" />
 +
<area shape="circle" alt="" title="" coords="2628,296,238" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/Hardware" target="_self" />
 +
<area shape="circle" alt="" title="" coords="2716,1084,352" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/CeDIS" target="_self" />
 +
<area shape="circle" alt="" title="" coords="1945,1261,165" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/Model " target="_self" />
 +
<area shape="poly" alt="" title="" coords="172,1558,166,1236,446,1070,688,1454,1120,1466,1124,1556" href="https://2019.igem.org/Team:Bielefeld-CeBiTec/Human_Practices" target="_self" />
 +
</map>
 +
 +
 +
<figure class="figure large">
 +
  <img class="figure image" src="https://2019.igem.org/wiki/images/6/60/T--Bielefeld-CeBiTec--overview.png" usemap="#imgmap2019917211613">
 +
 +
  </figure>
 +
 +
</div>
  
 
<!-- <div class="contentBlock">
 
<!-- <div class="contentBlock">
Line 247: Line 440:
 
}());
 
}());
  
 +
</script>
 +
 +
<script type="text/javascript">
 +
$('map').imageMapResize();
 
</script>
 
</script>
 
 

Revision as of 03:43, 10 October 2019

Progress Indicator Animation
Hardware
Summary
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
This is a test Text
References

Quelle 1

Quelle 2

Quelle 3

Quelle 4

Quelle 5