Random reading site
HTML Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<title>UnSoRtEd WrItInGs</title>
</head>
<body>
<iframe id="db" src="texts.html" style="" ></iframe>
</body> </html>
CSS Sheet
html { background-image:; background-position: center; background-size: cover; min-height: 100%; background-repeat: no-repeat;
width: 100%;
}
- db {
position: fixed; top: 0; left: 0; display: none;
}
.earth {
position: absolute; top: 0; left: 0; width: 350px; height: 350px; background: red; opacity: 0; cursor: pointer;
}
.land {
position: absolute; top: 0; left: 350px; width: 350px; height: 350px; background: green; opacity: 0; cursor: pointer;
}
.language {
position: absolute; top: 0; left: 700px; width: 350px; height: 350px; background: blue; opacity: 0; cursor: pointer;
}
.compression {
position: absolute; top: 0px; left: 950px; width: 350px; height: 350px; background: green; opacity: 0; cursor: pointer;
}
.hello {
position: absolute; top: 350px; left: 0px; width: 350px; height: 350px; background: green; opacity: 0; cursor: pointer;
}
.invasion {
position: absolute; top: 350px; left: 350px; width: 350px; height: 350px; background: blue; opacity: 0; cursor: pointer;
}
.youtube {
position: absolute; top: 350px; left: 700px; width: 350px; height: 350px; background: red; opacity: 0; cursor: pointer;
}
.authentication {
position: absolute; top: 350px; left: 950px; width: 350px; height: 350px; background: blue; opacity: 0; cursor: pointer;
}
.display-container {
position: absolute; top: 200px; left: 520px; width: 200px; height: 100px; font-size: 1em; color: black; text-align: center;
}
JavaScript
$(document).ready(function() {
console.log("document is ready")
var items; var paragraph; var oldparagraph;
$("#db").load(function () {
console.log("iframe is loaded!!")
items = $("#db").contents().find("li").get(); // converts the query into a list
console.log("db has ", items.length, "items");
})
function choice(x) {
random = Math.floor(Math.random() * x.length);
return x[random];
}
$(".earth").click(function() {
paragraph = choice(items);
while (paragraph === oldparagraph) {
paragraph = choice(items);
}
oldparagraph = paragraph;
console.log("picked a random", paragraph, paragraph.innerHTML);
$(".test-display").html(paragraph.innerHTML);
});
$(".land").click(function() {
paragraph = choice(items);
while (paragraph === oldparagraph) {
paragraph = choice(items);
}
oldparagraph = paragraph;
console.log("picked a random", paragraph, paragraph.innerHTML);
$(".test-display").html(paragraph.innerHTML);
});
$(".language").click(function() {
paragraph = choice(items);
while (paragraph === oldparagraph) {
paragraph = choice(items);
}
oldparagraph = paragraph;
console.log("picked a random", paragraph, paragraph.innerHTML);
$(".test-display").html(paragraph.innerHTML);
});
$(".compression").click(function() {
paragraph = choice(items);
while (paragraph === oldparagraph) {
paragraph = choice(items);
}
oldparagraph = paragraph;
console.log("picked a random", paragraph, paragraph.innerHTML);
$(".test-display").html(paragraph.innerHTML);
});
$(".hello").click(function() {
paragraph = choice(items);
while (paragraph === oldparagraph) {
paragraph = choice(items);
}
oldparagraph = paragraph;
console.log("picked a random", paragraph, paragraph.innerHTML);
$(".test-display").html(paragraph.innerHTML);
});
$(".invasion").click(function() {
paragraph = choice(items);
while (paragraph === oldparagraph) {
paragraph = choice(items);
}
oldparagraph = paragraph;
console.log("picked a random", paragraph, paragraph.innerHTML);
$(".test-display").html(paragraph.innerHTML);
});
$(".youtube").click(function() {
paragraph = choice(items);
while (paragraph === oldparagraph) {
paragraph = choice(items);
}
oldparagraph = paragraph;
console.log("picked a random", paragraph, paragraph.innerHTML);
$(".test-display").html(paragraph.innerHTML);
});
$(".authentication").click(function() {
paragraph = choice(items);
while (paragraph === oldparagraph) {
paragraph = choice(items);
}
oldparagraph = paragraph;
console.log("picked a random", paragraph, paragraph.innerHTML);
$(".test-display").html(paragraph.innerHTML);
});
})