Difference between revisions of "Team:Newcastle/Team"

(Final rewritten team page)
Line 3: Line 3:
 
<head>
 
<head>
 
<style>
 
<style>
−
div.gallery {
+
div.popup {
 
margin: 0.5%;
 
margin: 0.5%;
 
border: 1px solid #ccc;
 
border: 1px solid #ccc;
Line 12: Line 12:
 
zoom: 1;
 
zoom: 1;
 
*display: inline;
 
*display: inline;
 +
cursor: pointer;
 +
-webkit-user-select: none;
 +
-moz-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 
}
 
}
−
div.gallery:hover {
+
 
 +
/* The actual popup */
 +
.popup .popuptext {
 +
visibility: hidden;
 +
display: none;
 +
width: 400px;
 +
height: 400px;
 +
background-color: #555;
 +
color: #fff;
 +
text-align: center;
 +
border-radius: 6px;
 +
padding: 8px 0;
 +
z-index: 1;
 +
float: center;
 +
position: fixed;
 +
top: 50%;
 +
left: 50%;
 +
margin-left: -200px;
 +
margin-top: -200px;
 +
}
 +
 
 +
/* Toggle this class - hide and show the popup */
 +
.popup .show {
 +
visibility: visible;
 +
display: block;
 +
-webkit-animation: fadeIn 1s;
 +
animation: fadeIn 1s;
 +
}
 +
 
 +
/* Add animation (fade in the popup) */
 +
@-webkit-keyframes fadeIn {
 +
from {opacity: 0;}
 +
to {opacity: 1;}
 +
}
 +
 
 +
@keyframes fadeIn {
 +
from {opacity: 0;}
 +
to {opacity:1 ;}
 +
}
 +
div.popup:hover {
 
border: 1px solid #777;
 
border: 1px solid #777;
 
}
 
}
−
div.gallery img {
+
div.popup img {
 
width: 100%;
 
width: 100%;
 
height: auto;
 
height: auto;
Line 32: Line 76:
 
}
 
}
 
div.desc {
 
div.desc {
−
padding: 15px;
+
padding: 5px;
 +
height: 65px;
 +
width: 180px;
 +
display: table;
 +
text-align: center;
 +
}
 +
span.desc {
 +
height: 65px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
display: table-cell;
 +
vertical-align: middle;
 
text-align: center;
 
text-align: center;
 
}
 
}
Line 40: Line 95:
  
 
<div class="row">
 
<div class="row">
−
<div class="gallery">
+
<div class="popup" id="JessicaBirt" onclick="sPopup(this.id)" backgroundColor="white">
 +
<span class="popuptext" id="JessicaBirtp"><b>Jessica Birt</b><br>Placeholder text</span>
 
<a target="_blank">
 
<a target="_blank">
 
<img src="https://research.kent.ac.uk/understandingunbelief/wp-content/plugins/wp-person-cpt/images/featured-default.png" alt="Jessica Birt" width="300" height="200">
 
<img src="https://research.kent.ac.uk/understandingunbelief/wp-content/plugins/wp-person-cpt/images/featured-default.png" alt="Jessica Birt" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Jessica Birt</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="SophieBadger" onclick="sPopup(this.id)" backgroundColor="white">
 +
<span class="popuptext" id="SophieBadgerp"><b>Sophie Badger</b><br>Placeholder text</span>
 
<a target="_blank">
 
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/4/47/Sophie_Profile.jpeg" alt="Sophie Badger" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/4/47/Sophie_Profile.jpeg" alt="Sophie Badger" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Sophie Badger</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="BradleyBrown" onclick="sPopup(this.id)" backgroundColor="white">
 +
<span class="popuptext" id="BradleyBrownp"><b>Bradley Brown</b><br>Placeholder text</span>
 
<a target="_blank">
 
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/5/5d/Bradley_Profile.jpeg" alt="Bradley Brown" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/5/5d/Bradley_Profile.jpeg" alt="Bradley Brown" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Bradley Brown</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="MichaelaChapman" onclick="sPopup(this.id)" backgroundColor="white">
 +
<span class="popuptext" id="MichaelaChapmanp"><b>Michaela Chapman</b><br>Placeholder text</span>
 
<a target="_blank">
 
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/8/86/Michaela_Profile.jpeg" alt="Michaela Chapman" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/8/86/Michaela_Profile.jpeg" alt="Michaela Chapman" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Michaela Chapman</span>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
  
 
<div class="row">
 
<div class="row">
−
<div class="gallery">
+
<div class="popup" id="JackCooper" onclick="sPopup(this.id)" backgroundColor="white">
 +
<span class="popuptext" id="JackCooperp"><b>Jack Cooper</b><br>Placeholder text</span>
 
<a target="_blank">
 
<a target="_blank">
 
<img src="https://research.kent.ac.uk/understandingunbelief/wp-content/plugins/wp-person-cpt/images/featured-default.png" alt="Jack Cooper" width="300" height="200">
 
<img src="https://research.kent.ac.uk/understandingunbelief/wp-content/plugins/wp-person-cpt/images/featured-default.png" alt="Jack Cooper" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Jack Cooper</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="DeclanKohl" onclick="sPopup(this.id)" backgroundColor="white">
 +
<span class="popuptext" id="DeclanKohlp"><b>Declan Kohl</b><br>Placeholder text</span>
 
<a target="_blank">
 
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/9/97/Declan_Profile.jpeg" alt="Declan Kohl" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/9/97/Declan_Profile.jpeg" alt="Declan Kohl" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Declan Kohl</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="MarciaPryce" onclick="sPopup(this.id)" backgroundColor="white">
 +
<span class="popuptext" id="MarciaPrycep"><b>Marcia Pryce</b><br>Placeholder text</span>
 
<a target="_blank">
 
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/c/cd/Marcia_Profile.jpeg" alt="Marcia Pryce" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/c/cd/Marcia_Profile.jpeg" alt="Marcia Pryce" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Marcia Pryce</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="LaisChristinaTakiguchi" onclick="sPopup(this.id)" backgroundColor="white">
 +
<span class="popuptext" id="LaisChristinaTakiguchip"><b>Lais Christina Takiguchi</b><br>Placeholder text</span>
 
<a target="_blank">
 
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/1/19/Lais_Profile.jpeg" alt="Lais Christina Takiguchi" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/1/19/Lais_Profile.jpeg" alt="Lais Christina Takiguchi" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Lais Christina<br>Takiguchi</span>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
  
 
<div class="row">
 
<div class="row">
−
<div class="gallery">
+
<div class="popup" id="ValeriaVerrone" onclick="sPopup(this.id)" backgroundColor="white">
−
<a target="_blank" href="ValeriaVerrone">
+
<span class="popuptext" id="ValeriaVerronep"><b>Valeria Verrone</b><br>Placeholder text</span>
 +
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/d/db/Valeria_Profile.jpeg" alt="Valeria Verrone" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/d/db/Valeria_Profile.jpeg" alt="Valeria Verrone" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Valeria Verrone</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="ShrianshVyas" onclick="sPopup(this.id)" backgroundColor="white">
−
<a target="_blank" href="ShrianshVyas">
+
<span class="popuptext" id="ShrianshVyasp"><b>Shriansh Vyas</b><br>Placeholder text</span>
 +
<a target="_blank">
 
<img src="https://research.kent.ac.uk/understandingunbelief/wp-content/plugins/wp-person-cpt/images/featured-default.png" alt="Shriansh Vyas" width="300" height="200">
 
<img src="https://research.kent.ac.uk/understandingunbelief/wp-content/plugins/wp-person-cpt/images/featured-default.png" alt="Shriansh Vyas" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Shriansh Vyas</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="AnnaWalsh" onclick="sPopup(this.id)" backgroundColor="white">
−
<a target="_blank" href="AnnaWalsh">
+
<span class="popuptext" id="AnnaWalshp"><b>Anna Walsh</b><br>Placeholder text</span>
 +
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/4/45/Anna_Profile.jpeg" alt="Anna Walsh" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/4/45/Anna_Profile.jpeg" alt="Anna Walsh" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Anna Walsh</span>
 +
</div>
 
</div>
 
</div>
  
−
<div class="gallery">
+
<div class="popup" id="EvangelineWhittaker" onclick="sPopup(this.id)" backgroundColor="white">
−
<a target="_blank" href="EvangelineWhittaker">
+
<span class="popuptext" id="EvangelineWhittakerp"><b>Evangeline Whittaker</b><br>Placeholder text</span>
 +
<a target="_blank">
 
<img src="https://research.kent.ac.uk/understandingunbelief/wp-content/plugins/wp-person-cpt/images/featured-default.png" alt="Evangeline Whittaker" width="300" height="200">
 
<img src="https://research.kent.ac.uk/understandingunbelief/wp-content/plugins/wp-person-cpt/images/featured-default.png" alt="Evangeline Whittaker" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Evangeline Whittaker</span>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
  
 
<div class="row">
 
<div class="row">
−
<div class="gallery">
+
<div class="popup" id="ZoeWilson" onclick="sPopup(this.id)" backgroundColor="white">
−
<a target="_blank" href="ZoeWilson">
+
<span class="popuptext" id="ZoeWilsonp"><b>Zoe Wilson</b><br>Placeholder text</span>
 +
<a target="_blank">
 
<img src="https://static.igem.org/mediawiki/2017/6/67/Zoe_Profile.jpeg" alt="Zoe Wilson" width="300" height="200">
 
<img src="https://static.igem.org/mediawiki/2017/6/67/Zoe_Profile.jpeg" alt="Zoe Wilson" width="300" height="200">
 
</a>
 
</a>
−
<div class="desc">Add a description of the image here</div>
+
<div class="desc">
 +
<span class="desc">Zoe Wilson</span>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
<script>
 +
// When the user clicks on div, open the popup
 +
function sPopup(parentID) {
 +
var parent = document.getElementById(parentID);
 +
var popup = document.getElementById(parentID + "p");
 +
var othPopup = document.getElementsByClassName("popuptext show");
 +
if (othPopup[0]) {
 +
if (othPopup[0] != popup) {
 +
var othParent = document.getElementById(othPopup[0].id.slice(0, -1));
 +
othPopup[0].classList.toggle("show");
 +
othParent.style.backgroundColor = "white";
 +
}
 +
}
 +
popup.classList.toggle("show");
 +
if (parent.style.backgroundColor == "lightblue") {
 +
parent.style.backgroundColor = "white";
 +
} else {
 +
parent.style.backgroundColor = "lightblue";
 +
}
 +
}
 +
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 22:35, 28 October 2017

spacefill