I am using Aptana Studio 3 text editor and working on Windows 7 Enterprise OS. I have the following AJAX code which is not working on the local system to fetch JSON files kept on an https website. This example is taken from the Youtube video:
JSON and AJAX Tutorial: With Real Examples
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="test" content="content"/>
<title>JSON and AJAX</title></head>
<header>
<h1>JSON and AJAX</h1>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</header>
<body>
<script src="main.js"></script>
<button type="button" onclick="function()" id="btn">Fetch Info for 3 New Animals</button>
<div id="animal-info"> </div>
</body>
</html>
Styles.css:
html, body {
padding: 0;
margin: 0;
}
.hide-me {
visibility: hidden;
opacity: 0;
transform: scale(.75);
}
h1 {
margin-top: 0;
font-size: 2.4em;
font-weight: normal;
display: inline-block;
}
body {
font-family: Helvetica, sans-serif;
padding: 50px 10%;
}
button {
background-color: #046380;
color: #FFF;
border: none;
padding: 10px 15px;
font-size: 15px;
border-radius: 4px;
cursor: pointer;
outline: none;
box-shadow: 2px 2px 0 #034154;
margin-bottom: 10px;
margin-left: 18px;
transition: opacity .4s ease-out, transform .4s ease-out, visibility .4s ease-out;
position: relative;
top: -10px;
}
button:hover {
background-color: #034F66;
}
button:active {
background-color: #034154;
box-shadow: none;
position: relative;
top: -8px;
left: 2px;
}
p {
padding: 4px 0 2px 8px;
line-height: 1.7;
border-bottom: 1px dotted #DDD;
list-style: none;
margin: 0;
}
main.js:
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
btn.addEventListener("onClick", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
//ourRequest.open('GET', 'animals-' + pageCounter + '.json');
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
pageCounter++;
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
}
);
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat ";
for (ii = 0; ii < data[i].foods.likes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.likes[ii];
} else {
htmlString += " and " + data[i].foods.likes[ii];
}
}
htmlString += ' and dislikes ';
for (ii = 0; ii < data[i].foods.dislikes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.dislikes[ii];
} else {
htmlString += " and " + data[i].foods.dislikes[ii];
}
}
htmlString += '.</p>';
}
animalContainer.insertAdjacentHTML('beforeend', htmlString);
}
This code doesn't seem to work on my local machine. I tried running it by installing an http-server using NodeJs on my local machine, but still no joy!
Another JSON AJAX code on ww3Schools.com
though seems to work fine. This is an inline javascript code in the html file. Initially i thought onReadyStateChange was the culprit not working on IE, FF, CH etc., but this website code also has onReadyStateChange but it works fine!
Or is it the Button click event handler the cause why it is not working?
btn.addEventListener("onClick", function() {
My code is not inline, could that be the reason? If not, what am i missing or doing wrong?
I modified html file by moving "div" above "script" tag:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="test" content="content"/>
<title>JSON and AJAX</title></head>
<header>
<h1>JSON and AJAX</h1>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<button type="button" onclick="function()" id="btn">Fetch Elements</button>
<div id="animal-info"> </div>
</header>
<body>
<script src="main.js"></script>
</body>
</html>
main.js:
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
// function LoadJSON() {
if (window.XMLHttpRequest) {
// code for modern browsers
var ourRequest = new XMLHttpRequest();
} else {
//code for IE6, IE5
var ourRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// ourRequest.onLoad = function() {
ourRequest.onreadystatechange = function() {
if (this.readyState = 4 && (this.status >= 200 && this.status < 400)) {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
// ourRequest.open('GET', 'animals-' + pageCounter + '.json');
ourRequest.send();
ourRequest.onerror = function() {
console.log("Connection error");
};
pageCounter++;
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
}
);
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat ";
for (ii = 0; ii < data[i].foods.likes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.likes[ii];
} else {
htmlString += " and " + data[i].foods.likes[ii];
}
}
htmlString += ' and dislikes ';
for (ii = 0; ii < data[i].foods.dislikes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.dislikes[ii];
} else {
htmlString += " and " + data[i].foods.dislikes[ii];
}
}
htmlString += '.</p>';
}
// animalContainer.insertAdjacentHTML('beforeend', htmlString);
animalContainer.innerHTML=htmlString;
}
This works now!
The only problem i am facing is if i have more json files on the server, how do i hide ("hide-me") the button based on the number of json files processed, when button is clicked a no of times?
Right now, it hides button if pageCounter exceeds 3.
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
The other issue i see is if i enable "insertAdjacentHTML", it displays each json twice. Why is this happening?
// animalContainer.insertAdjacentHTML('beforeend', htmlString);
Use this:
btn.style.visibility = "hidden";
Related
So far i only can achieve to this point. I am using example code from w3school
I trying to figure out to get year in the same position like in the picture but no luck and also tried to insert image background for circle but only manage to color fill
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: ' ';
position: absolute;
width: 6px;
background-color: #ffc200;
top: 0;
bottom: 0;
left: 50%;
margin-left: -5px;
}
/* Container around content */
.contaiment {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.contaiment::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -11px;
background-color: #ffc200;
border: 4px solid #ffc200;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
/* .left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
} */
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}
<div class="timeline">
<div class="contaiment left">
<div class="content">
<p>2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="contaiment right">
<div class="content">
<p class="">2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="contaiment left">
<div class="content">
<p class="">2017
<p>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
I know you want to do something with only HTML and CSS, but take a look at this JQuery library. It's very easy to use.
https://github.com/musclesoft/jquery-connections/wiki/API
You just need to set the 2 elements you want to connect.
$("#div1, #div2").connections();
$("#div2, #div3").connections();
$("#div3, #div4").connections();
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<title>Hello, world!</title>
</head>
<body>
<p style="width: 50px;height: 50px;border: 1px solid black;" id="div1">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 50px;border: 1px solid black;" id="div2">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 200px;border: 1px solid black;" id="div3">TEST</p>
<p style="width: 50px;height: 50px;margin-left: 300px;border: 1px solid black;" id="div4">TEST</p>
<!-- Script retrieved from https://raw.githubusercontent.com/musclesoft/jquery-connections/gh-pages/jquery.connections.js -->
<script>
(function($) {
$.fn.connections = function(options) {
if (options === "update") {
return processConnections(update, this);
} else if (options === "remove") {
return processConnections(destroy, this);
} else {
options = $.extend(
true,
{
borderClasses: {},
class: "connection",
css: {},
from: this,
tag: "connection",
to: this,
within: ":root"
},
options
);
connect(options);
return this;
}
};
$.event.special.connections = {
teardown: function(namespaces) {
processConnections(destroy, $(this));
}
};
var connect = function(options) {
var borderClasses = options.borderClasses;
var tag = options.tag;
var end1 = $(options.from);
var end2 = $(options.to);
var within = $(options.within);
delete options.borderClasses;
delete options.tag;
delete options.from;
delete options.to;
delete options.within;
within.each(function() {
var container = this;
var done = new Array();
end1.each(function() {
var node = this;
done.push(this);
end2.not(done).each(function() {
createConnection(
container,
[node, this],
tag,
borderClasses,
options
);
});
});
});
};
var createConnection = function(
container,
nodes,
tag,
borderClasses,
options
) {
var css = $.extend({ position: "absolute" }, options.css);
var connection = $("<" + tag + "/>", options).css(css);
connection.appendTo(container);
var border_w = (connection.outerWidth() - connection.innerWidth()) / 2;
var border_h = (connection.outerHeight() - connection.innerHeight()) / 2;
if (border_w <= 0 && border_h <= 0) {
border_w = border_h = 1;
}
var data = {
borderClasses: borderClasses,
border_h: border_h,
border_w: border_w,
node_from: $(nodes[0]),
node_to: $(nodes[1]),
nodes_dom: nodes,
css: css
};
if ("none" === connection.css("border-top-style")) {
data.css.borderStyle = "solid";
}
$.data(connection.get(0), "connection", data);
$.data(connection.get(0), "connections", [connection.get(0)]);
for (var i = 0; i < 2; i++) {
var connections = connection.add($.data(nodes[i], "connections")).get();
$.data(nodes[i], "connections", connections);
if (connections.length == 1) {
$(nodes[i]).on("connections.connections", false);
}
}
update(connection.get(0));
};
var destroy = function(connection) {
var nodes = $.data(connection, "connection").nodes_dom;
for (var i = 0; i < 2; i++) {
var connections = $($.data(nodes[i], "connections"))
.not(connection)
.get();
$.data(nodes[i], "connections", connections);
}
$(connection).remove();
};
var getState = function(data) {
data.rect_from = data.nodes_dom[0].getBoundingClientRect();
data.rect_to = data.nodes_dom[1].getBoundingClientRect();
var cached = data.cache;
data.cache = [
data.rect_from.top,
data.rect_from.right,
data.rect_from.bottom,
data.rect_from.left,
data.rect_to.top,
data.rect_to.right,
data.rect_to.bottom,
data.rect_to.left
];
data.hidden =
0 === (data.cache[0] | data.cache[1] | data.cache[2] | data.cache[3]) ||
0 === (data.cache[4] | data.cache[5] | data.cache[6] | data.cache[7]);
data.unmodified = true;
if (cached === undefined) {
return (data.unmodified = false);
}
for (var i = 0; i < 8; i++) {
if (cached[i] !== data.cache[i]) {
return (data.unmodified = false);
}
}
};
var update = function(connection) {
var data = $.data(connection, "connection");
getState(data);
if (data.unmodified) {
return;
}
var border_h = data.border_h;
var border_w = data.border_w;
var from = data.rect_from;
var to = data.rect_to;
var b = (from.bottom + from.top) / 2;
var r = (to.left + to.right) / 2;
var t = (to.bottom + to.top) / 2;
var l = (from.left + from.right) / 2;
var h = ["right", "left"];
if (l > r) {
h = ["left", "right"];
var x = Math.max(r - border_w / 2, Math.min(from.right, to.right));
r = l + border_w / 2;
l = x;
} else {
l -= border_w / 2;
r = Math.min(r + border_w / 2, Math.max(from.left, to.left));
}
var v = ["bottom", "top"];
if (t > b) {
v = ["top", "bottom"];
var x = Math.max(b - border_h / 2, Math.min(from.bottom, to.bottom));
b = t + border_h / 2;
t = x;
} else {
b = Math.min(b, Math.max(from.top, to.top));
t -= border_h / 2;
}
var width = r - l;
var height = b - t;
if (width < border_w) {
t = Math.max(t, Math.min(from.bottom, to.bottom));
b = Math.min(b, Math.max(from.top, to.top));
l = Math.max(from.left, to.left);
r = Math.min(from.right, to.right);
r = l = (l + r - border_w) / 2;
}
if (height < border_h) {
l = Math.max(l, Math.min(from.right, to.right));
r = Math.min(r, Math.max(from.left, to.left));
t = Math.max(from.top, to.top);
b = Math.min(from.bottom, to.bottom);
b = t = (t + b - border_h) / 2;
}
width = r - l;
height = b - t;
width <= 0 && (border_h = 0);
height <= 0 && (border_w = 0);
var style =
"border-" +
v[0] +
"-" +
h[0] +
"-radius: 0;" +
"border-" +
v[0] +
"-" +
h[1] +
"-radius: 0;" +
"border-" +
v[1] +
"-" +
h[0] +
"-radius: 0;";
(border_h <= 0 || border_w <= 0) &&
(style += "border-" + v[1] + "-" + h[1] + "-radius: 0;");
if (data.hidden) {
style += "display: none;";
} else {
data.css["border-" + v[0] + "-width"] = 0;
data.css["border-" + h[0] + "-width"] = 0;
data.css["border-" + v[1] + "-width"] = border_h;
data.css["border-" + h[1] + "-width"] = border_w;
var current_rect = connection.getBoundingClientRect();
data.css.left = connection.offsetLeft + l - current_rect.left;
data.css.top = connection.offsetTop + t - current_rect.top;
data.css.width = width - border_w;
data.css.height = height - border_h;
}
var bc = data.borderClasses;
$(connection)
.removeClass(bc[v[0]])
.removeClass(bc[h[0]])
.addClass(bc[v[1]])
.addClass(bc[h[1]])
.attr("style", style)
.css(data.css);
};
var processConnections = function(method, elements) {
return elements.each(function() {
var connections = $.data(this, "connections");
if (connections instanceof Array) {
for (var i = 0, len = connections.length; i < len; i++) {
method(connections[i]);
}
}
});
};
})(jQuery);
</script>
<script defer type="text/javascript">
$("#div1, #div2").connections();
$("#div2, #div3").connections();
$("#div3, #div4").connections();
</script>
</body>
</html>
I need help giving my buttons some space. No matter what I try, I just can't seem to space them out.
You can see my github repository here.
The following is my HTML with stylesheets inside.
<script src="update.js"></script>
<script src="sw.js"></script>
<script>
let d = new Date();
//alert(d);
let hrs = d.getHours();
let min = d.getMinutes();
let day = d.getDay();
let auth = false;
fetch('https://raw.githubusercontent.com/AzlanCoding/iframe-browser-pwa/main/lock.js')
.then(response => response.text())
.then(data => {
let split_str = "/split/";
const data_arr = data.split(split_str);
let lock = data_arr[1];
if (data_arr[0] === "lock") {
setInterval(lock,500);
}else{
alert(data_arr[0]);
}
console.log(data_arr[0]);
});
</script>
<!DOCTYPE html>
<html lang="en">
<style>
body {
background-color: ##2C2F33;
}
</style>
<head>
<meta name="theme-color" content="#2C2F33">
<meta charset="UTF-8">
<meta name="description" content="Azlan's iframe Browser">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0, no-store">
<!meta http-equiv="cache-control" content="max-age=0" />
<!meta http-equiv="Pragma" content="no-cache">
<!meta http-equiv="Expires" content="0">
<title> Iframe Browser </title>
<link rel="canonical" href="https://azlancoding.github.io/iframe-browser-pwa/" />
<link rel="manifest" href="/iframe-browser-pwa/manifest.webmanifest">
<meta name="keywords" content="bypass, school, browser in website, cloud browser">
<link rel="stylesheet" href="css/styles.css">
<title> iFrame browser </title>
<script language="javascript">
const getValidUrl = (url = "") => {
let newUrl = window.decodeURIComponent(url);
newUrl = newUrl.trim().replace(/\s/g, "");
if(/^(:\/\/)/.test(newUrl)){
return `https${newUrl}`;
}
if(!/^(f|ht)tps?:\/\//i.test(newUrl)){
return `https://${newUrl}`;
}
return newUrl;
};
function setCookie(c_name,value,exdays){
var exdate=new Date();exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name){
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}
else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
checkSession();
function checkSession(){
var c = getCookie("visited");
if (c === "yes") {
alert("Welcome back! Make sure you have your extension on.");
}
else {
alert("By continuing, you agree to the terms and conditions in azlancoding.github.io/iframe-browser/TermsAndConditions")
ext_install();
}
}
function ext_install()
{
if (window.confirm('An extension is required for this website to work. Do you want to install it now?'))
{
setCookie("visited", "yes", 365)
window.location.href='https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe';
};
};
function checkCookie() {
let user = getCookie("alerted");
if (user != "") {
alert("Welcome again !");
} else
{ext_install();}
}
//document.getElementById("myIframe").src = "https://wwf.org";
var iframe = document.getElementById("myIframe");
//var website = iframe.src;
//console.log(website);
document.addEventListener("scroll", function(event)
{
var style = document.getElementById("myIframe").style;
style.webkitTransform = style.webkitTransform ? "" : "scale(1)";
})
/*function resizeIframe()
{
document.getElementById('myIframe').height = 100%;
}*/
function ResetBox()
{
if(document.getElementById("URL").value == '')
{document.getElementById("URL").value='';};
}
function LoadPage()
{
var objFrame=document.getElementById("myIframe");
var newurl = getValidUrl(document.getElementById("URL").value);
objFrame.src = newurl;
}
var elem = document.documentElement
function openFullscreen() {
if (elem.requestFullscreen)
{
elem.requestFullscreen();
}
else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen)
{
document.exitFullscreen();
}
else if (document.webkitExitFullscreen)
{
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen)
{
document.msExitFullscreen();
}
}
</script>
<style>
.iframe-container {
overflow: visible;
/* 16:9 aspect ratio */
//padding-top: 56.25%;
position: 60px 0px;
//margin-top: 60px;
}
:root {
--fallback-title-bar-height: 45px;
}
.draggable {
app-region: drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: drag;
}
.nonDraggable {
app-region: no-drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: no-drag;
}
#child {
width: window.innerWidth;
//height: window.innerHeight;
height: 100vh;
flex: 1 1 auto;
position: absolute;
top: env(titlebar-area-height, var(--fallback-title-bar-height));
left: 0;
right: 0;
}
.button {
background-color: #ffffff;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
margin-right: 5px;
cursor: pointer;
border-radius: 10px;
app-region: no-drag;
/* Pre-fix app-region during standardization process */
-webkit-app-region: no-drag;
}
fieldset {
border: 0px;
}
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
#titleBarContainer {
position: absolute;
top: 0;
left: 0;
height: env(titlebar-area-height, var(--fallback-title-bar-height));
width: 100%;
background-color:#254B85;
}
#titleBar {
position: absolute;
top: 0;
display: flex;
user-select: none;
height: 100%;
left: env(titlebar-area-x, 0);
//left : 0px;
width: env(titlebar-area-width, 50%);
color: #FFFFFF;
font-weight: bold;
text-align: center;
}
#titleBar > span {
margin: 5;
padding: 0px 32px 0px 32px;
}
#titleBar > input {
flex: 1;
margin: 0px;
border-radius: 5px;
border: none;
padding: 8px;
}
#mainContent {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: env(titlebar-area-height, var(--fallback-title-bar-height));
overflow-y: scroll;
}
</style>
</head>
<body style="background-color:#254B85">
<div id="titleBarContainer" >
<div id="titleBar">
<span class="draggable">Iframe Browser</span>
<input class="nonDraggable" type="text" ID="URL" placeholder="Enter a URL" value="https://www.google.com"></input>
<input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" VALUE="￩" onClick="history.back()">
<input type="button" VALUE="￫" onClick="history.forward()">
<input type="button" class="fullscreen" value="⛶" onclick="openFullscreen()">
<input type="button" class="Exitfullscreen" value="Exit Fullscreen" onclick="closeFullscreen()">
<input type="button" class="newWindow" value="New Window" onclick=" window.open('https://azlancoding.github.io/iframe-browser-pwa/','_blank')">
<input type="button" class="cloudbrowser" value="Cloud Browser" onclick="window.open('https://replit.com/#azlancoding/free-and-unlimited-cloud-browser?embed=true','_blank')">
</div>
</div>
<!div style="Clear:both;">
<!input type="text" value="https://www.google.com" class="frmUrlVal" ID="URL" placeholder = "Enter a URL" >
<!/div>
<div id = "child" >
<iframe align="top" width="100%" height="100%" allowtransparency="true" style="background: #FFFFFF;" src="https://www.google.com" onload = "check()" onerror"ext_install()" allow="camera;microphone" frameborder=yes loading ="lazy" name="myIframe" id="myIframe"> </iframe>
</div>
<script>
window.onbeforeunload = () => '';
var urlbox = document.getElementById("URL");
urlbox.addEventListener("keydown", function (e) {
if (e.keyCode === 13) {
LoadPage();
}
});
function check(){
document.getElementById("URL").value = "";
}
</script>
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register (
'/iframe-browser-pwa/sw.js',
{scope: '/iframe-browser-pwa/'}
)
}
</script>
<script src="js/app.js"></script>
</body>
</html>
The stylesheet may be weird as it is used to support Windows Overlay Controls which allowed buttons to be placed on top next to the buttons to minimise, maximise and close the window. I just changed the manifest to support tabbed experimental feature.
Any help is appreciated.
Update:
I tried to use <span> but it over did it...
I found the following code at codepen.io
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var questions = [{
question: "1. How do you write 'Hello World' in an alert box?",
choices: ["('Hello World')", "msgBox('Hello World');", "alertBox('Hello World');", "alert('Hello World');"],
correctAnswer: 3
}, {
question: "2. How to empty an array in JavaScript?",
choices: ["arrayList[]", "arrayList(0)", "arrayList.length=0", "arrayList.len(0)"],
correctAnswer: 2
}, {
question: "3. What function to add an element at the begining of an array and one at the end?",
choices: ["push,unshift", "unshift,push", "first,push", "unshift,last"],
correctAnswer: 1
}, {
question: "4. What will this output? var a = [1, 2, 3]; console.log(a[6]);",
choices: ["undefined", "0", "prints nothing", "Syntax error"],
correctAnswer: 0
}, {
question: "5. What would following code return? console.log(typeof typeof 1);",
choices: ["string", "number", "Syntax error", "undefined"],
correctAnswer: 0
},{
question: "6. Which software company developed JavaScript?",
choices: ["Mozilla", "Netscape", "Sun Microsystems", "Oracle"],
correctAnswer: 1
},{
question: "7. What would be the result of 3+2+'7'?",
choices: ["327", "12", "14", "57"],
correctAnswer: 3
},{
question: "8. Look at the following selector: $('div'). What does it select?",
choices: ["The first div element", "The last div element", "All div elements", "Current div element"],
correctAnswer: 2
},{
question: "9. How can a value be appended to an array?",
choices: ["arr(length).value;", "arr[arr.length]=value;", "arr[]=add(value);", "None of these"],
correctAnswer: 1
},{
question: "10. What will the code below output to the console? console.log(1 + +'2' + '2');",
choices: ["'32'", "'122'", "'13'", "'14'"],
correctAnswer: 0
}];
var currentQuestion = 0;
var viewingAns = 0;
var correctAnswers = 0;
var quizOver = false;
var iSelectedAnswer = [];
var c=10;
var t;
$(document).ready(function ()
{
// Display the first question
displayCurrentQuestion();
$(this).find(".quizMessage").hide();
$(this).find(".preButton").attr('disabled', 'disabled');
timedCount();
$(this).find(".preButton").on("click", function ()
{
if (!quizOver)
{
if(currentQuestion == 0) { return false; }
if(currentQuestion == 1) {
$(".preButton").attr('disabled', 'disabled');
}
currentQuestion--; // Since we have already displayed the first question on DOM ready
if (currentQuestion < questions.length)
{
displayCurrentQuestion();
}
} else {
if(viewingAns == 3) { return false; }
currentQuestion = 0; viewingAns = 3;
viewResults();
}
});
// On clicking next, display the next question
$(this).find(".nextButton").on("click", function ()
{
if (!quizOver)
{
var val = $("input[type='radio']:checked").val();
if (val == undefined)
{
$(document).find(".quizMessage").text("Please select an answer");
$(document).find(".quizMessage").show();
}
else
{
// TODO: Remove any message -> not sure if this is efficient to call this each time....
$(document).find(".quizMessage").hide();
if (val == questions[currentQuestion].correctAnswer)
{
correctAnswers++;
}
iSelectedAnswer[currentQuestion] = val;
currentQuestion++; // Since we have already displayed the first question on DOM ready
if(currentQuestion >= 1) {
$('.preButton').prop("disabled", false);
}
if (currentQuestion < questions.length)
{
displayCurrentQuestion();
}
else
{
displayScore();
$('#iTimeShow').html('Time is Over!!!!');
$('#timer').html("You scored: " + correctAnswers + " out of: " + questions.length);
c=185;
$(document).find(".preButton").text("View Answer");
$(document).find(".nextButton").text("Play Again?");
quizOver = true;
return false;
}
}
}
else
{ // quiz is over and clicked the next button (which now displays 'Play Again?'
quizOver = false; $('#iTimeShow').html('Time Remaining:'); iSelectedAnswer = [];
$(document).find(".nextButton").text("Next Question");
$(document).find(".preButton").text("Previous Question");
$(".preButton").attr('disabled', 'disabled');
resetQuiz();
viewingAns = 1;
displayCurrentQuestion();
hideScore();
}
});
});
function timedCount()
{
if(c == 15)
{
return false;
}
var hours = parseInt( c / 3600 ) % 24;
var minutes = parseInt( c / 60 ) % 60;
var seconds = c % 60;
var result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
$('#timer').html(result);
if(c == 0 )
{
displayScore();
$('#iTimeShow').html('Time is Over!!!');
$('#timer').html("You scored: " + correctAnswers + " out of: " + questions.length);
c=185;
$(document).find(".preButton").text("View Answer");
$(document).find(".nextButton").text("Play Again?");
quizOver = true;
return false;
}
if(c == 0 )
{
if (!quizOver)
{
var val = $("input[type='radio']:checked").val();
if (val == questions[currentQuestion].correctAnswer)
{
correctAnswers++;
}
currentQuestion++; // Since we have already displayed the first question on DOM ready
if (currentQuestion < questions.length)
{
displayCurrentQuestion();
c=15;
}
else
{
displayScore();
$('#timer').html('');
c=16;
$(document).find(".nextButton").text("Play Again?");
quizOver = true;
return false;
}
}
else
{ // quiz is over and clicked the next button (which now displays 'Play Again?'
quizOver = false;
$(document).find(".nextButton").text("Next Question");
resetQuiz();
displayCurrentQuestion();
hideScore();
}
}
c = c - 1;
t = setTimeout(function()
{
timedCount()
},1000);
}
// This displays the current question AND the choices
function displayCurrentQuestion()
{
if(c == 15) { c = 10; timedCount(); }
//console.log("In display current Question");
var question = questions[currentQuestion].question;
var questionClass = $(document).find(".quizContainer > .question");
var choiceList = $(document).find(".quizContainer > .choiceList");
var numChoices = questions[currentQuestion].choices.length;
// Set the questionClass text to the current question
$(questionClass).text(question);
// Remove all current <li> elements (if any)
$(choiceList).find("li").remove();
var choice;
for (i = 0; i < numChoices; i++)
{
choice = questions[currentQuestion].choices[i];
if(iSelectedAnswer[currentQuestion] == i) {
$('<li><input type="radio" class="radio-inline" checked="checked" value=' + i + ' name="dynradio" />' + ' ' + choice + '</li>').appendTo(choiceList);
} else {
$('<li><input type="radio" class="radio-inline" value=' + i + ' name="dynradio" />' + ' ' + choice + '</li>').appendTo(choiceList);
}
}
}
function resetQuiz()
{
currentQuestion = 0;
correctAnswers = 0;
hideScore();
}
function displayScore()
{
$(document).find(".quizContainer > .result").text("You scored: " + correctAnswers + " out of: " + questions.length);
$(document).find(".quizContainer > .result").show();
}
function hideScore()
{
$(document).find(".result").hide();
}
// This displays the current question AND the choices
function viewResults()
{
if(currentQuestion == 10) { currentQuestion = 0;return false; }
if(viewingAns == 1) { return false; }
hideScore();
var question = questions[currentQuestion].question;
var questionClass = $(document).find(".quizContainer > .question");
var choiceList = $(document).find(".quizContainer > .choiceList");
var numChoices = questions[currentQuestion].choices.length;
// Set the questionClass text to the current question
$(questionClass).text(question);
// Remove all current <li> elements (if any)
$(choiceList).find("li").remove();
var choice;
for (i = 0; i < numChoices; i++)
{
choice = questions[currentQuestion].choices[i];
if(iSelectedAnswer[currentQuestion] == i) {
if(questions[currentQuestion].correctAnswer == i) {
$('<li style="border:2px solid green;margin-top:10px;"><input type="radio" class="radio-inline" checked="checked" value=' + i + ' name="dynradio" />' + ' ' + choice + '</li>').appendTo(choiceList);
} else {
$('<li style="border:2px solid red;margin-top:10px;"><input type="radio" class="radio-inline" checked="checked" value=' + i + ' name="dynradio" />' + ' ' + choice + '</li>').appendTo(choiceList);
}
} else {
if(questions[currentQuestion].correctAnswer == i) {
$('<li style="border:2px solid green;margin-top:10px;"><input type="radio" class="radio-inline" value=' + i + ' name="dynradio" />' + ' ' + choice + '</li>').appendTo(choiceList);
} else {
$('<li><input type="radio" class="radio-inline" value=' + i + ' name="dynradio" />' + ' ' + choice + '</li>').appendTo(choiceList);
}
}
}
currentQuestion++;
setTimeout(function()
{
viewResults();
},3000);
}
</script>
<div class="quizContainer container-fluid well well-lg">
<div id="quiz1" class="text-center">
<h3>Test</h3>
<center><img class="img-responsive" height="180" width="100" src="http://res.cloudinary.com/dwjej2tbp/image/upload/v1523002021/KGCAS_SK_eyehy9.jpg"></center>
<h4 style="color:#FF0000;position:absolute;left:70%;top:30%;" align="center" ><span id="iTimeShow">Time Remaining: </span><br/><span id='timer' style="font-size:25px;"></span></h4>
<h2>Exercise 1</h2>
</div>
<div class="question"></div>
<ul class="choiceList"></ul>
<div class="quizMessage"></div>
<div class="result"></div>
<button class="preButton">Previous</button>
<button class="nextButton">Next</button>
</div>
with CSS as follows
h1 {
font-family:'Gabriola', serif;
text-align: center;
}
ul {
list-style: none;
}
li {
font-family:'Cambria', serif;
font-size: 1.5em;
}
input[type=radio] {
border: 0px;
width: 20px;
height: 2em;
}
p {
font-family:'Gabriola', serif;
}
/* Quiz Classes */
.quizContainer {
background-color: white;
border-radius: 6px;
width: 75%;
margin: auto;
padding-top: 5px;
/*-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;*/
position: relative;
}
.quizcontainer #quiz1
{
text-shadow:1px 1px 2px orange;
font-family:"Georgia", Arial, sans-serif;
}
.nextButton {
box-shadow: 3px 3px 5px #888;
border-radius: 6px;
/* width: 150px;*/
height: 40px;
text-align: center;
background-color: lightgrey;
/*clear: both;*/
color: red;
font-family:'Gabriola', serif;
position: relative;
margin: auto;
font-size:25px;
font-weight:bold;
padding-top: 5px;
float:right;
right:30%;
}
.preButton {
box-shadow: 3px 3px 5px #888;
border-radius: 6px;
/*width: 150px;*/
height: 40px;
text-align: center;
background-color: lightgrey;
/*clear: both;*/
color: red;
font-family:'Gabriola', serif;
position: relative;
margin: auto;
font-size:25px;
font-weight:bold;
padding-top: 5px;
float:left;
left:30%;
}
.question {
font-family:'Century', serif;
font-size: 1.5em;
font-weight:bold;
width: 100%;
height: auto;
margin: auto;
border-radius: 6px;
background-color: #f3dc45;
text-align: center;
}
.quizMessage {
background-color: peachpuff;
border-radius: 6px;
width: 20%;
margin: auto;
text-align: center;
padding: 5px;
font-size:20px;
font-weight:bold;
font-family:'Gabriola', serif;
color: red;
position:absolute;
top:80%;
left:40%;
}
.choiceList {
font-family: 'Arial', serif;
color: #ed12cd;
font-size:15px;
font-weight:bold;
}
.result {
width: 40%;
height: auto;
border-radius: 6px;
background-color: linen;
margin: auto;
color:green;
text-align: center;
font-size:25px;
font-family:'Verdana', serif;
font-weight:bold;
position:absolute;
top:80%;
left:30%;
}
/* End of Quiz Classes */
I want to give some pointers before doing the quiz. And this quiz is only done by certain people. Therefore, I think it is better not to immediately display the first question (because when the link is opened, this quiz will immediately display question number one and running time).
I think changes should be made to the code below. I've tried removing displayCurrentQuestion (); , but the quis didn't work. I've also tried to replace it with a button but it doesn't work.
(document).ready(function ()
{
// Display the first question
displayCurrentQuestion();
$(this).find(".quizMessage").hide();
$(this).find(".preButton").attr('disabled', 'disabled');
timedCount();
$(this).find(".preButton").on("click", function ()
{
if (!quizOver)
{
if(currentQuestion == 0) { return false; }
if(currentQuestion == 1) {
$(".preButton").attr('disabled', 'disabled');
}
currentQuestion--; // Since we have already displayed the first question on DOM ready
if (currentQuestion < questions.length)
{
displayCurrentQuestion();
}
} else {
if(viewingAns == 3) { return false; }
currentQuestion = 0; viewingAns = 3;
viewResults();
}
});
// On clicking next, display the next question
$(this).find(".nextButton").on("click", function ()
{
if (!quizOver)
{
var val = $("input[type='radio']:checked").val();
if (val == undefined)
{
$(document).find(".quizMessage").text("Please select an answer");
$(document).find(".quizMessage").show();
}
else
{
// TODO: Remove any message -> not sure if this is efficient to call this each time....
$(document).find(".quizMessage").hide();
if (val == questions[currentQuestion].correctAnswer)
{
correctAnswers++;
}
iSelectedAnswer[currentQuestion] = val;
currentQuestion++; // Since we have already displayed the first question on DOM ready
if(currentQuestion >= 1) {
$('.preButton').prop("disabled", false);
}
if (currentQuestion < questions.length)
{
displayCurrentQuestion();
}
else
{
displayScore();
$('#iTimeShow').html('Time is Over!!!!');
$('#timer').html("You scored: " + correctAnswers + " out of: " + questions.length);
c=115;
$(document).find(".preButton").text("View Answer");
$(document).find(".nextButton").text("Play Again?");
quizOver = true;
return false;
}
}
}
else
{ // quiz is over and clicked the next button (which now displays 'Play Again?'
quizOver = false; $('#iTimeShow').html('Time Remaining:'); iSelectedAnswer = [];
$(document).find(".nextButton").text("Next");
$(document).find(".preButton").text("Previous");
$(".preButton").attr('disabled', 'disabled');
resetQuiz();
viewingAns = 1;
displayCurrentQuestion();
hideScore();
}
});
});
How do you make the initial quiz display display the password form and start button? of course if the password is wrong then the question will not appear.
I want to make a html button that appears when you scroll down and when clicked it shows a random blogger post.
I have code to make it appear when you scroll down and code for a button that shows a random post. But I don't know how to make them work together.
This is my scroll button code, below is random post code. I don't know how to integrate it inside TopFunction.
Thank you very much for your help and insights!
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
<button onclick="topFunction()" id="myBtn"></button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, show random post
function topFunction() {
}
</script>
RANDOM POST
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'RANDOM POST'; document.getElementById('myBtn').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>
I have no idea if below is correct or not. In order to help you correctly we need to know WHERE the codes are coming from. And you need to explain into detail what you have tried.
Below might work: I have added a <div> for which should contain the random posts when button is clicked. Content can be styled as you wish.
Be aware of the path /feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky. This is hardcoded and the JS script change some word in it. This needs to be the same (and the one in the code) to your own folderstructure.
I have also cleared up your code a little... Always use id for scripts and class for CSS styling.
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, show random post
function topFunction() {
//Why is this empty?
};
function showLucky(root) {
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
window.location = entry.link[j].href;
}
}
};
function fetchLuck(luck) {
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index=' + luck + '&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('randompost')[0].appendChild(script);
}
function feelingLucky(root) {
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t, 10);
var luckyNumber = Math.floor(Math.random() * total);
luckyNumber++;
a = document.createElement('a');
a.href = '#random';
a.rel = luckyNumber;
a.onclick = function() {
fetchLuck(this.rel);
};
a.innerHTML = 'RANDOM POST';
document.getElementById('myBtn').appendChild(a);
};
.myBtn {
display: block;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
.myBtn:hover {
background-color: #555;
}
.myDiv {
width: 50%;
height: auto;
background: rgba(255,0,0,0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="showLucky()" id="myBtn" class="myBtn">Try me</button>
<div class="myDiv" id="randompost" >
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>
Something here...
</div>
What I would like to do something like http://mountaintheme.com/themeforest/mountain/home.html and I'm not sure at all how to go about this. I've tried some methods utilizing CSS, but failed miserably. This seems to be a simple fix I'd imagine...
This is my current code,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sound Off</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
body {
background-color: rgb(255, 255, 255);
color: #000;
}
a {
color: #fff;
}
a:hover {
color: #fff;
}
hr {
border-top-color: #fff;
}
.main {
opacity: 0.6;
max-width: 640px;
margin: 150px auto;
padding: 0px 15px;
height:2048px;
}
.page-header {
border-bottom: 3px #fff solid;
}
footer .accr {
text-align: right;
}
#media (max-width: 767px) {
.clearfix div {
width: 100%;
}
.rgb, .accr {
text-align: center !important;
}
}
</style>
</head>
<body>
<div class="main">
<h1 class="page-header"></h1>
<p style="font-family:'Helvetica'"></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script id="colorScroll" data-colors="255, 255, 255:255, 255, 204:204, 255, 255">
var colors = $("#colorScroll").data("colors");
var colors_array = colors.split(":");
var numcolors = colors_array.length;
var RGBs = [];
for(var i = 0; i < numcolors; i++) {
RGBs[i] = [];
var c = colors_array[i].split(",");
RGBs[i][0] = c[0];
RGBs[i][1] = c[1];
RGBs[i][2] = c[2];
}
var dRGBs = [];
for(var i = 0; i < (numcolors - 1); i++) {
dRGBs[i] = [];
dRGBs[i][0] = RGBs[i][0] - RGBs[i+1][0];
dRGBs[i][1] = RGBs[i][1] - RGBs[i+1][1];
dRGBs[i][2] = RGBs[i][2] - RGBs[i+1][2];
}
$(window).scroll(function() {
var position = $(this).scrollTop();
var view = $(this).height();
var height = $(document).height();
var travel = height - view;
var percent = position / travel;
var level = Math.floor(percent * (numcolors - 1));
var plevel = percent * (numcolors - 1);
var dlevel = Math.floor(level);
if(Math.floor(level) == (numcolors - 1)) {
dlevel = Math.floor(level) - 1;
}
if(plevel > 1) {
plevel = plevel - dlevel;
}
var nRed = (RGBs[dlevel][0] - Math.round(dRGBs[dlevel][0] * plevel));
var nGreen = (RGBs[dlevel][1] - Math.round(dRGBs[dlevel][1] * plevel));
var nBlue = (RGBs[dlevel][2] - Math.round(dRGBs[dlevel][2] * plevel));
$(".rgb span").text(nRed + ", " + nGreen + ", " + nBlue);
$("body").css("background-color", "rgb(" + nRed + "," + nGreen + "," + nBlue + ")");
});
</script>
</body>
</html>
This is gif image you can download it through google crome.
You can download it from here. Click Here
It is jpeg picture as you can see from there page resources - http://mountaintheme.com/themeforest/mountain/demo/bg.jpg The Dotted effect was probably made with-in photoshop or something and then just saved.