Difference between revisions of "Team:Newcastle/Team"

Revision as of 22:35, 28 October 2017 (view source)

M00 (Talk | contribs)

(Final rewritten team page)

← Older edit

Revision as of 01:56, 29 October 2017 (view source)

M00 (Talk | contribs)

m (Made background consistent with other pages, added comments for clarity)

Newer edit →

Line 3:

<head>

<style>

+

/* The popup container */

div.popup {

margin: 0.5%;

border: 1px solid #ccc;

width: 180px;

+

background-color: white;

display: -moz-inline-stack;

display: inline-block;

Line 57:

Line 59:

to {opacity:1 ;}

}

+

/* Accentuate border when user mouses over container */

div.popup:hover {

border: 1px solid #777;

}

+

/* Display the images with rounded mask */

div.popup img {

width: 100%;

+

padding: 5px;

height: auto;

border-radius: 50%;

}

+

/* Configure rows for team members */

div.row {

margin: 5px;

Line 70:

Line 79:

text-align: center;

}

+

/* Reset formatting at the end of each row (in case we want to add something to the right) */

div.row:after {

content: "";

Line 75:

Line 86:

clear: both;

}

+

/* Format text that describes team members' names */

div.desc {

padding: 5px;

Line 82:

Line 95:

text-align: center;

}

+

/* Need span and div to vertically centre text */

span.desc {

height: 65px;

Line 90:

Line 105:

text-align: center;

}

+

/* Make page background consistent with other pages */

+

body {

+

background-color: #e8e8e8;

+

}

+

</style>

</head>

Line 95:

Line 116:

−

+

<span class="popuptext" id="JessicaBirtp"><b>Jessica Birt</b><br>Placeholder text</span>

Line 105:

Line 126:

</div>

−

+

<span class="popuptext" id="SophieBadgerp"><b>Sophie Badger</b><br>Placeholder text</span>

Line 115:

Line 136:

</div>

−

+

<span class="popuptext" id="BradleyBrownp"><b>Bradley Brown</b><br>Placeholder text</span>

Line 125:

Line 146:

</div>

−

+

<span class="popuptext" id="MichaelaChapmanp"><b>Michaela Chapman</b><br>Placeholder text</span>

Line 137:

Line 158:

−

+

<span class="popuptext" id="JackCooperp"><b>Jack Cooper</b><br>Placeholder text</span>

Line 147:

Line 168:

</div>

−

+

<span class="popuptext" id="DeclanKohlp"><b>Declan Kohl</b><br>Placeholder text</span>

Line 157:

Line 178:

</div>

−

+

<span class="popuptext" id="MarciaPrycep"><b>Marcia Pryce</b><br>Placeholder text</span>

Line 167:

Line 188:

</div>

−

+

<span class="popuptext" id="LaisChristinaTakiguchip"><b>Lais Christina Takiguchi</b><br>Placeholder text</span>

Line 179:

Line 200:

−

+

<span class="popuptext" id="ValeriaVerronep"><b>Valeria Verrone</b><br>Placeholder text</span>

Line 189:

Line 210:

</div>

−

+

<span class="popuptext" id="ShrianshVyasp"><b>Shriansh Vyas</b><br>Placeholder text</span>

Line 199:

Line 220:

</div>

−

+

<span class="popuptext" id="AnnaWalshp"><b>Anna Walsh</b><br>Placeholder text</span>

Line 209:

Line 230:

</div>

−

+

<span class="popuptext" id="EvangelineWhittakerp"><b>Evangeline Whittaker</b><br>Placeholder text</span>

Line 221:

Line 242:

−

+

<span class="popuptext" id="ZoeWilsonp"><b>Zoe Wilson</b><br>Placeholder text</span>

Line 235:

Line 256:

// When the user clicks on div, open the popup

function sPopup(parentID) {

−

var parent = document.getElementById(parentID);

+

var parent = document.getElementById(parentID); // Get parent div so we know which team member div the user clicked

−

var popup = document.getElementById(parentID + "p");

+

var popup = document.getElementById(parentID + "p"); // Get the id of the span containing the text we want to hide/display

−

var othPopup = document.getElementsByClassName("popuptext show");

+

var othPopup = document.getElementsByClassName("popuptext show"); // Find any other popups we might be displaying

−

if (othPopup[0]) {

+

if (othPopup[0]) { // If we've found a popup we are displaying

−

if (othPopup[0] != popup) {

+

if (othPopup[0] != popup) { // And it isn't for the team member who has been clicked (e.g. user clicked same member twice)

−

var othParent = document.getElementById(othPopup[0].id.slice(0, -1));

+

var othParent = document.getElementById(othPopup[0].id.slice(0, -1)); // Then get the corresponding team member div for the other popup that's being displayed

−

othPopup[0].classList.toggle("show");

+

othPopup[0].classList.toggle("show"); // Hide the other popup

−

othParent.style.backgroundColor = "white";

+

othParent.style.backgroundColor = "white"; // Reset the background colour for the team member div who's popup we just hid

}

−

popup.classList.toggle("show");

+

popup.classList.toggle("show"); // Toggle the state of the popup for the team member the user has clicked

−

if (parent.style.backgroundColor == "lightblue") {

+

if (parent.style.backgroundColor == "lightblue") { // If the background is already blue

−

parent.style.backgroundColor = "white";

+

parent.style.backgroundColor = "white"; // Reset it to white

} else {

−

parent.style.backgroundColor = "lightblue";

+

parent.style.backgroundColor = "lightblue"; // Otherwise, make it blue

}

@@ Line 3: / Line 3: @@
 	<head>
 		<style>
+			/* The popup container */
 			div.popup {
 				margin: 0.5%;
 				border: 1px solid #ccc;
 				width: 180px;
+				background-color: white;
 				display: -moz-inline-stack;
 				display: inline-block;
@@ Line 57: / Line 59: @@
 				to {opacity:1 ;}
 			}
+			/* Accentuate border when user mouses over container */
 			div.popup:hover {
 				border: 1px solid #777;
 			}
+			/* Display the images with rounded mask */
 			div.popup img {
 				width: 100%;
+				padding: 5px;
 				height: auto;
 				border-radius: 50%;
 			}
+			/* Configure rows for team members */
 			div.row {
 				margin: 5px;
@@ Line 70: / Line 79: @@
 				text-align: center;
 			}
+			/* Reset formatting at the end of each row (in case we want to add something to the right) */
 			div.row:after {
      		content: "";
@@ Line 75: / Line 86: @@
      		clear: both;
 			}
+			/* Format text that describes team members' names */
 			div.desc {
 				padding: 5px;
@@ Line 82: / Line 95: @@
 				text-align: center;
 			}
+			/* Need span and div to vertically centre text */
 			span.desc {
 				height: 65px;
@@ Line 90: / Line 105: @@
 				text-align: center;
 			}
+			/* Make page background consistent with other pages */
+			body {
+				background-color: #e8e8e8;
+			}
 		</style>
 	</head>
@@ Line 95: / Line 116: @@
 		<div class="row">
-			<div class="popup" id="JessicaBirt" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="JessicaBirt" onclick="sPopup(this.id)">
 				<span class="popuptext" id="JessicaBirtp"><b>Jessica Birt</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 105: / Line 126: @@
 			</div>
-			<div class="popup" id="SophieBadger" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="SophieBadger" onclick="sPopup(this.id)">
 				<span class="popuptext" id="SophieBadgerp"><b>Sophie Badger</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 115: / Line 136: @@
 			</div>
-			<div class="popup" id="BradleyBrown" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="BradleyBrown" onclick="sPopup(this.id)">
 				<span class="popuptext" id="BradleyBrownp"><b>Bradley Brown</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 125: / Line 146: @@
 			</div>
-			<div class="popup" id="MichaelaChapman" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="MichaelaChapman" onclick="sPopup(this.id)">
 				<span class="popuptext" id="MichaelaChapmanp"><b>Michaela Chapman</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 137: / Line 158: @@
 		<div class="row">
-			<div class="popup" id="JackCooper" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="JackCooper" onclick="sPopup(this.id)">
 				<span class="popuptext" id="JackCooperp"><b>Jack Cooper</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 147: / Line 168: @@
 			</div>
-			<div class="popup" id="DeclanKohl" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="DeclanKohl" onclick="sPopup(this.id)">
 				<span class="popuptext" id="DeclanKohlp"><b>Declan Kohl</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 157: / Line 178: @@
 			</div>
-			<div class="popup" id="MarciaPryce" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="MarciaPryce" onclick="sPopup(this.id)">
 				<span class="popuptext" id="MarciaPrycep"><b>Marcia Pryce</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 167: / Line 188: @@
 			</div>
-			<div class="popup" id="LaisChristinaTakiguchi" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="LaisChristinaTakiguchi" onclick="sPopup(this.id)">
 				<span class="popuptext" id="LaisChristinaTakiguchip"><b>Lais Christina Takiguchi</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 179: / Line 200: @@
 		<div class="row">
-			<div class="popup" id="ValeriaVerrone" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="ValeriaVerrone" onclick="sPopup(this.id)">
 				<span class="popuptext" id="ValeriaVerronep"><b>Valeria Verrone</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 189: / Line 210: @@
 			</div>
-			<div class="popup" id="ShrianshVyas" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="ShrianshVyas" onclick="sPopup(this.id)">
 				<span class="popuptext" id="ShrianshVyasp"><b>Shriansh Vyas</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 199: / Line 220: @@
 			</div>
-			<div class="popup" id="AnnaWalsh" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="AnnaWalsh" onclick="sPopup(this.id)">
 				<span class="popuptext" id="AnnaWalshp"><b>Anna Walsh</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 209: / Line 230: @@
 			</div>
-			<div class="popup" id="EvangelineWhittaker" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="EvangelineWhittaker" onclick="sPopup(this.id)">
 				<span class="popuptext" id="EvangelineWhittakerp"><b>Evangeline Whittaker</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 221: / Line 242: @@
 		<div class="row">
-			<div class="popup" id="ZoeWilson" onclick="sPopup(this.id)" backgroundColor="white">
+			<div class="popup" id="ZoeWilson" onclick="sPopup(this.id)">
 				<span class="popuptext" id="ZoeWilsonp"><b>Zoe Wilson</b><br>Placeholder text</span>
 				<a target="_blank">
@@ Line 235: / Line 256: @@
 			// When the user clicks on div, open the popup
 			function sPopup(parentID) {
-				var parent = document.getElementById(parentID);
+				var parent = document.getElementById(parentID);															// Get parent div so we know which team member div the user clicked
-				var popup = document.getElementById(parentID + "p");
+				var popup = document.getElementById(parentID + "p");												// Get the id of the span containing the text we want to hide/display
-				var othPopup = document.getElementsByClassName("popuptext show");
+				var othPopup = document.getElementsByClassName("popuptext show");						// Find any other popups we might be displaying
-				if (othPopup[0]) {
+				if (othPopup[0]) {																													// If we've found a popup we are displaying
-					if (othPopup[0] != popup) {
+					if (othPopup[0] != popup) {																								// And it isn't for the team member who has been clicked (e.g. user clicked same member twice)
-						var othParent = document.getElementById(othPopup[0].id.slice(0, -1));
+						var othParent = document.getElementById(othPopup[0].id.slice(0, -1));		// Then get the corresponding team member div for the other popup that's being displayed
-						othPopup[0].classList.toggle("show");
+						othPopup[0].classList.toggle("show");																		// Hide the other popup
-						othParent.style.backgroundColor = "white";
+						othParent.style.backgroundColor = "white";															// Reset the background colour for the team member div who's popup we just hid
 					}
 				}
-				popup.classList.toggle("show");
+				popup.classList.toggle("show");																							// Toggle the state of the popup for the team member the user has clicked
-				if (parent.style.backgroundColor == "lightblue") {
+				if (parent.style.backgroundColor == "lightblue") {													// If the background is already blue
-					parent.style.backgroundColor = "white";
+					parent.style.backgroundColor = "white";																		// Reset it to white
 				} else {
-					parent.style.backgroundColor = "lightblue";
+					parent.style.backgroundColor = "lightblue";																// Otherwise, make it blue
 				}
 			}