how to integrate spinner page with rest of HTML - javascript

I have a project where I am creating a spinner page but I am having difficulty integrating the spinner page while I am redirecting to a URL. Basically I have a multiplication program. If the answer is correct it prompts correct and goes to a specific URL(http://stackoverflow.com) and if is incorrect it goes to another URL(http://yahoo.com). Before it actually goes to those pages I would like the spinner that I created to show up first while the pages are loading. Can someone help me with this? Thanks in advance.
Here is my main HTML page(index1.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta charset="ISO-8859-1">
<title>A Multiplication Game</title>
</head>
**<script>
window.addEventListener("loader", function(){
var spinner=document.getElementById("spinner");
document.body.removeChild(load_screen);
});
</script>**
<body >
<span id="mathprompt">What is <span id="num1">8</span> multiplied by
<span id="num2">E</span>?
</span>
<br>
<span id="inputrow">
<input type="text" id="inputfield">
<button id="submitbutton">Submit</button>
</span>
**<div class="loader" id="spinner"></div>**
<p id="response"></p>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Here is my JavaScript code(script.js). As you can see I have declared spinner as a variable but not sure if I should right the function for it here or in HTML:
var num1;
var num2;
var guess;
var answer;
var response;
$(document).ready(function() {
num1=document.getElementById("num1");
num2=document.getElementById("num2");
guess=document.getElementById("inputfield");
response=document.getElementById("response");
**spinner=document.getElementById("spinner");**
$("#submitbutton").click(function(){
checkAnswer();
redirectPage();
});
setNumbers();
});
function setNumbers(){
num1.innerHTML = Math.floor(Math.random() * 10)+1;
num2.innerHTML = Math.floor(Math.random() * 10)+1;
}
function checkAnswer(){
var n1 = parseInt(num1.innerHTML);
var n2 = parseInt(num2.innerHTML);
answer = n1 * n2;
if (parseInt(guess.value) == answer){
response.innerHTML = "Correct!";
} else
response.innerHTML = "Incorrect!";
}
function redirectPage(){
if (parseInt(guess.value) == answer){
window.location.href = "http://stackoverflow.com";
} else{
window.location.href = "http://yahoo.com";
}
}
And here is the code for the spinner in the css(stylesheet.css):
#charset "ISO-8859-1";
#inputrow{
background-color:#80ff80;
}
#mathprompt{
font-size: 34px;
color:orange;
text-align: center;
}
#response{
font-size: 34px;
color:white;
text-align: center;
}
body {
background-color: #8080c0;
text-align: center;
}
**.loader{
border:16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 240px;
height: 240px;
animation: spin 2s linear infinite;
margin-left: auto;
margin-right: auto;
text-align:center;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}**

You seem to want to detect that an external website is loaded...you cannot detect this, in Javascript you won't have access to the "loaded" event of an external website loaded in a new tab of your browser.
All your can do is display a loading, then doing a "redirect" in javascript.
And when yahoo/stackoverflow page will be loaded (having replaced your website in the browser tab), your loader will obviously have disappeared...is it what you want ?
You have 3 cases :
If you load yahoo/stackoverflow in an iframe embedded in your page, yes you could display a loading and detect that the page is loaded in your iframe (for instance you load a page of your own in the iframe, you can in JS access to the page's content...you load Yahoo/Stackoverflow in the iframe, then when in JS you cannot access to iframe content, it means that the external page is loaded...)
if you are redirecting to the yahoo/stackoverflow page, you will only be able to display a loading before the external pages are beginning to load...
you can try to prefetch the external page, you display a loading, and when the page is loaded, then you redirect to the page...your browser will have cached almost all html elements i think (to check)...
var myPrefetchedPage;
$.ajax({
url: "test.html",
cache: false,
success: function(html){
myPrefetchedPage = html;
}
})
Preloading code in an iframe :
jQuery(document).ready(function ($) {
$app = $('.app');
$app.addClass('loading');
$iframe = $('<iframe>');
$iframe.attr({src: 'http://www.yahoo.fr/'});
$iframe.appendTo($('body'));
// When <iframe> has been loaded, remove loading spinner to reveal <iframe>
// or redirect to the page in your browser tab.
$iframe.load(function() {
$('.app').remove();
// redirect to the real page
window.location.href='http://www.yahoo.fr/';
});
});

Related

Running music in the background from google chrome extension

I am making a google chrome extension, where you press certain buttons, it starts, pauses, or restarts a song. I got it working but there is one problem. When I close the extension, the song stops! I need to know if there is a way around this. I have looked into background scripts and stuff, but I can't get them to work. Please help as this is one of my first google chrome extensions, and I would like to learn more. Thanks for any help you give me!
Html: (popup.html)
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="popup.js"></script>
</head>
<body>
<center>
<h1>Music Player</h1>
<h3>Songs:</h3>
<div id="ludicrous_speed">Ludicrous Speed
<audio id="ludicrous" src="songs/ludicrous_speed.mp3" preload="auto"></audio>
<button class="Start" id="StartLudicrous">Start</button>
<button class="Pause" id="PauseLudicrous">Pause</button>
<button class="Restart" id="RestartLudicrous">Restart</button>
</div>
</center>
</body>
</html>
Javascript: (popup.js)
function Start(song) {
song.play();
}
function Pause(song) {
song.pause();
}
function Restart(song) {
song.currentTime = 0;
}
document.addEventListener('DOMContentLoaded', function(){
var Start_Ludicrous = document.getElementById('StartLudicrous');
var Pause_Ludicrous = document.getElementById('PauseLudicrous');
var Restart_Ludicrous = document.getElementById('RestartLudicrous');
Start_Ludicrous.addEventListener('click', function() {
Start(ludicrous);
});
Pause_Ludicrous.addEventListener('click', function() {
Pause(ludicrous);
});
Restart_Ludicrous.addEventListener('click', function() {
Restart(ludicrous);
});
});
CSS: (styles.css)
body {
width:300px;
}
.Start {
background-color: #42f46e;
border-color: #42f46e;
border-radius: 30%;
}
.Pause {
background-color: #f4e349;
border-color: #f4e349;
border-radius: 30%;
}
.Restart {
background-color: #e03838;
border-color: #e03838;
border-radius: 30%;
}
Manifest: (manifest.json)
{
"manifest_version":2,
"name":"Music Player",
"description":"Play Music",
"version":"1.0",
"browser_action":{
"default_popup":"popup.html"
},
"permissions":[
"activeTab"
]
}
The document that popup.html creates exists only as long as it's open.
The moment the popup closes the <audio> element no longer exists.
A background page provides a solution to that - it exists independently of the popup.
You don't normally create a background page's HTML yourself, only provide a bunch of scripts. But nothing stops you from creating a DOM node on the fly:
// background.js
var audio_element = document.createElement("audio");
audio_element.src = "songs/ludicrous_speed.mp3";
audio_element.play();
Now, the popup's code won't be able to directly access the audio_element of the background page; you could do a quick hack job with getBackgroundPage methods, but it's preferable to learn how Messaging works and use chrome.runtime.sendMessage from the popup to control the background.

JavaScript isn't read correctly in HTMLQuestion

I made a simple application using the code from this and ran it to test it on the worker sandbox MTurk site. It works perfectly when using the code shown in the answer, but if I try to create an object and place the function and variables in the object, the buttons won't work on the sandbox site but will work when opening the .html file in a browser. Additionally, adding comments will produce the same effect. The code I have is this:
<?xml version="1.0"?>
<HTMLQuestion xmlns="http://mechanicalturk.amazonaws.com/AWSMechanicalTurkDataSchemas/2011-11-11/HTMLQuestion.xsd">
<HTMLContent><![CDATA[
<!DOCTYPE html>
<html>
<head>
<style>
#thediv {
align-self:flex-start
margin:0 auto;
height:1050px;
width:750px;
overflow:auto;
}
img {
position: static;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
<input type='button' value ='-' onclick='zoom(0.5);'/>
<input type='button' value ='+' onclick='zoom(2);'/>
<div id="thediv">
<img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
</div>
<script type="text/javascript">
var zoomLevel=1;
var maxZoomLevel=2;
var minZoomLevel=1;
function zoom(zm) {
var img=document.getElementById("pic");
if(zm > 1){
if(zoomLevel < maxZoomLevel){
zoomLevel++;
}else{
return;
}
}else if(zm < 1){
if(zoomLevel > minZoomLevel){
zoomLevel--;
}else{
return;
}
}
wid = img.width;
ht = img.height;
img.style.width = (wid*zm)+"px";
img.style.height = (ht*zm)+"px";
}
</script>
</body>
</html>
]]>
</HTMLContent>
<FrameHeight>450</FrameHeight>
</HTMLQuestion>
Is there a reason certain things will work in browser but not in the MTurk sandbox site?
I just tested creating a HIT like this and it worked for me.
Unrelated to the JavaScript, note that you will need to include at least one named input (eg ) in order for Workers to submit the HIT.
What browser are you testing in?

Loading JavaScript in a Chrome Extension

This is my first post on SO and my first time making a Chrome Extension. I've read alot of documentation, but I am still unsure how to get this to work. Below are my html and js files. I want to be able to type something in the source box and have the have the word print out in the results area in real time. I have tested this code on my local host so i know it works, but for some reason it is acting up as a chrome extension.
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<textarea id="source"></textarea>
<div id="result">
</div>
</body>
</html>
Here's the js:
function main() {
document.getElementById('source').keydown(function() {
var source = document.getElementById('source').value;
var outputValue = source.replace(/command/gi, "⌘")
.replace(/tab/gi, "⇥")
.replace(/return/gi, "⏎")
.replace(/option/gi, "⌥")
.replace(/control/gi, "⌃")
.replace(/esc/gi, "⎋")
.replace(/left/gi, "←")
.replace(/down/gi, "↓")
.replace(/up/gi, "↑")
.replace(/right/gi, "→")
.replace(/shift/gi, "⇧")
.replace(/eject/gi, "⏏")
.replace(/caps\s\(lock\)/gi, "⇪")
.replace(/save/gi, "⌘ + S")
.replace(/print/gi, "⌘ + P")
.replace(/find/gi, "⌘ + F");
document.getElementById("result").innerHTML = outputValue;
}
}
1) What wOxxOm said in the comment: element.keydown(function() { ... }) does not exist. This definitely comes from some jQuery code - you could use that if you add it to your extension, or you could use addEventListener.
2) You declare a function main(), but nothing ever calls it. A good place to call it would be a DOMContentLoaded event listener on document:
document.addEventListener("DOMContentLoaded", main);
function main() {
/* ... */
}

Insert Webpages into Div instead of iframe?

Here's the entire code for my loop.html file. It first pulls the list of urls from a separate XML file that is in the same directory and then loops through them, given specified time. The time element is the amount it will wait until it cycles to the next page. What I want to do is to use DIV to cycle through the URLs, since iframe is not supported in all the browsers and does not display some of the content when I run the html script. The thing I am not sure about is what to do with the "dashboard.url"--when i want to use a div?
I found this piece of code from a different site--that when you replace the frams['theDisplay'] line with, it sets the div to a webpage--but I want to have something like this, using the dashboard.url
$("#siteloader").html('<object data="http://latimes.com" />');
I am sorry if this is a really long question, and if you get frustrated. I am just trying to learn as I go. Thank you!
Example of list.xml format:
<list>
<url>
<link>http:latimes.com</link>
<time>2</time>
</url>
<url>
<link>http:stackoverflow.com</link>
<time>4</time>
</url>
</list>
Entire HTML code:
<!DOCTYPE HTML>
<!--Created by Megan Chiu - 30 June 2013-->
<html>
<!-- CSS -->
<style type="text/css">
displayArea {
margin: 0;
width: 100%;
}
html, body {
height: 100%
width: 100%;
}
div {
height: 100%;
width: 100%
}
object {
width: 100%;
min-height: 100%;
}
</style>
<head>
<meta charset="UTF-8">
<style type="text/css">
body, html { margin: 0; padding: 0; width: 100%; height: 100%;
overflow: hidden; }
iframe { border: none; }
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"
type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var Dash = {
nextIndex: 0,
dashboards: [],
loadXML: function() {
$.ajax( {
type: "GET",
url: "list.xml",
dataType: "xml",
success: Dash.renderXML
});
},
renderXML: function(xml) {
$(xml).find("url").each(function() {
var _link = $(this).find('link').text();
var _time = $(this).find('time').text();
Dash.dashboards.push({url:_link, time:_time});
});
Dash.display();
},
display: function()
{
var dashboard = Dash.dashboards[Dash.nextIndex];
frames['theDisplay'].location.href = dashboard.url;
Dash.nextIndex = (Dash.nextIndex + 1) % Dash.dashboards.length;
setTimeout(Dash.display, dashboard.time * 1000);
}
};
window.onload = Dash.loadXML;
</script>
</head>
<body>
</body>
<iframe id="theDisplay" width="100%" height="100%"></iframe>
</html>
<div id="content1"></div>
<script>
document.getElementById("content1").innerHTML='<object type="text/html" data="header.php" ></object>';
alert('Load_Ok');
</script>
You cannot load content from another website just with pure JavaScript. Period.
http://en.wikipedia.org/wiki/Same_origin_policy
So what you can do? You can make a web request from your server and get Http response from remote server and put them into div element.
<div><%=(new WebClient()).DownloadString("http://www.stackoverflow.com")%></div>
But one of biggest problem is that, since you will download all styles and scripts from remote website then your page probably will not look good. Not even human readable. And if you will keep hitting from same IP to those servers you will may blocked by them.
Good luck.

easyXDM iFrame auto-height failing

I have followed the instructions here and here but am not able to implement easyXDM correctly to auto-size the height of my iframe.
On the page with the iframe (host.html), I can see the contents I am importing (otherdomain.html) but the height of the iframe is much shorter than the contents, and the height does not change. Unfortunataely this is on a development site I can not link to here.
otherdomain.html has elements that expand on click so I need the iframe to expand and contract as the contents of the page do so.
Can anyone tell me what I am doing wrong please? These are two different domains/servers I am working with. This is the first time I have set up a socket or done anything like this - I don't see any errors in the console but I can't make much sense out of the what it is telling me.
Here is a similar question, but was not answered: IFrame resizing with easyXDM
Here is what I have on the page that has the iFrame:
<style type="text/css">
div#embedded iframe {
width: 725px;
}
</style>
<script src="../js/easyXDM.debug.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
new easyXDM.Socket({
remote: "http://lcoawebservices.com/careers/resize_intermediate.html?url=job-postings.php",
container: "embedded",
onMessage: function (message, origin) {
var settings = message.split(",");
this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
}
});
</script>
<div id="embedded"></div>
Here is what I have on resize_intermediate.html:
<script type="text/javascript" src="../scripts/easyXDM.debug.js">
</script>
<script type="text/javascript">
var iframe;
var socket = new easyXDM.Socket({
swf: "../scripts/easyxdm.swf",
onReady: function(){
iframe = document.createElement("iframe");
iframe.frameBorder = 0;
document.body.appendChild(iframe);
iframe.src = easyXDM.query.url;
},
onMessage: function(url, origin){
iframe.src = url;
}
});
//Probe child.frame for dimensions.
function messageBack(){
socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth);
};
//Poll for changes on children every 500ms.
setInterval("messageBack()",500);
</script>
<style type="text/css">
html, body {
overflow: hidden;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
iframe {
width: 100%;
height: 100%;
border: 0px;
}
</style>
and at the bottom of the page I am importing I have placed this:
<script type="text/javascript">
window.onload = function(){
parent.socket.postMessage(document.body.clientHeight || document.body.offsetHeight || document.body.scrollHeight);
};
</script>

Categories

Resources