You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.9 KiB
HTML
114 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="style.css" />
|
|
<title>Hamok: Isulong Ang Pambansang Demokratikong Rebolusyon</title>
|
|
</head>
|
|
<body>
|
|
<h1>Hamok: Isulong Ang Pambansang Demokratikong Rebolusyon ↵</h1>
|
|
<h2>1977.6.12</h2>
|
|
|
|
<!-- Header -->
|
|
<div class="header" id="myHeader">
|
|
<button class="btn active" onclick="four()">Overview</button>
|
|
<button class="btn" onclick="one()">100%</button>
|
|
|
|
</div>
|
|
|
|
<!-- metadata dropdown -->
|
|
|
|
<div id="rightnav" class="rightnav">
|
|
<a href="index.html" id="title">Title</a>
|
|
<a href="#" id="view">View</a>
|
|
</div>
|
|
|
|
<div id="leftnav" class="leftnav">
|
|
<a href="#" id="date">Date</a>
|
|
<a href="https://www.google.com/" id="creator">Creator</a>
|
|
</div>
|
|
|
|
|
|
|
|
<button class="orgbtn" onclick="myFunction()">Organizations</button>
|
|
|
|
<div class="square"></div>
|
|
|
|
<div id="myDIV">
|
|
<ul><a href="index.html">All Organizations</a></ul>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="column">
|
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok00.jpg" style="width:100%">
|
|
</div>
|
|
<div class="column">
|
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok01.jpg" style="width:100%">
|
|
</div>
|
|
<div class="column">
|
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok02.jpg" style="width:100%">
|
|
</div>
|
|
<div class="column">
|
|
<img src="/Users/sandra/Desktop/XPUB/GIT/special-issue-11-wiki2html/images/VF383Hamok03.jpg" style="width:100%">
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Get the elements with class="column"
|
|
var elements = document.getElementsByClassName("column");
|
|
|
|
// Declare a loop variable
|
|
var i;
|
|
|
|
// Four images side by side
|
|
function four() {
|
|
for (i = 0; i < elements.length; i++) {
|
|
elements[i].style.msFlex = "25%"; // IE10
|
|
elements[i].style.flex = "25%";
|
|
}
|
|
}
|
|
|
|
// Full-width images
|
|
function one() {
|
|
for (i = 0; i < elements.length; i++) {
|
|
elements[i].style.msFlex = "80%"; // IE10
|
|
elements[i].style.flex = "80%";
|
|
}
|
|
}
|
|
|
|
// // Two images side by side
|
|
// function two() {
|
|
// for (i = 0; i < elements.length; i++) {
|
|
// elements[i].style.msFlex = "50%"; // IE10
|
|
// elements[i].style.flex = "50%";
|
|
// }
|
|
// }
|
|
|
|
// Add active class to the current button (highlight it)
|
|
var header = document.getElementById("myHeader");
|
|
var btns = header.getElementsByClassName("btn");
|
|
for (var i = 0; i < btns.length; i++) {
|
|
btns[i].addEventListener("click", function() {
|
|
var current = document.getElementsByClassName("active");
|
|
current[0].className = current[0].className.replace(" active", "");
|
|
this.className += " active";
|
|
});
|
|
}
|
|
|
|
// toggle text
|
|
function myFunction() {
|
|
var x = document.getElementById("myDIV");
|
|
if (x.style.display === "block") {
|
|
x.style.display = "none";
|
|
} else {
|
|
x.style.display = "block";
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|