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.
Related
I have a typeform form embedded in an iframe but I don't want it to scroll within the iframe itself.
Here is my code:
<html>
<head>
<title>Project</title>
</head>
<body>
<iframe class="typeform-widget"
src="https://weblify.typeform.com/to/WDbDw2" data-transparency="50"
data-hide-headers=true data-hide-footer=true style="width: 100%; height: 500px;">
</iframe>
<script>
(function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })
</script>
</body>
</html>
Does anybody know a solution?
I'm wondering if you really need to use an iframe element, maybe it's because of your context.
From Typeform's embed SDK and one of their examples I see that they use a div with id="my-embedded-typeform" and then they load the embed SDK script and a custom script to configure and trigger it.
<div id="my-embedded-typeform"
style="width: 100%; height: 300px;"></div>
<script src="https://embed.typeform.com/embed.js" type="text/javascript">`enter code here`</script>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {
var el = document.getElementById("my-embedded-typeform");
// When instantiating a widget embed, you must provide the DOM element
// that will contain your typeform, the URL of your typeform, and your
// desired embed settings
window.typeformEmbed.makeWidget(el, "https://admin.typeform.com/to/cVa5IG", {
hideFooter: true,
hideHeaders: true,
opacity: 0
});
});
</script>
They mention in their docs that custom scripts for embedding are not recommended as they may cause scrolling issues (amongst other things).
Maybe following their guides could help your purposes or at least make it more manageable.
I hope that helps!
try this
.typeform-widget:before {
content: '';
width: 100px;
height: 500px;
position: absolute;
background: #FFF;
left: 94%;
}
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/';
});
});
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() {
/* ... */
}
Basically its a div that changes the color after clicking on it.
I would like to make the div save its color after refreshing the page - I don't think cookies are good idea because it will save the color on user pc.
I need to make it the same color for everyone visiting the site.
Here's the code...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.color {
width: 400px;
height: 400px;
background: black;
margin: auto auto;
}
.clicked {
background-color: red;
}
</style>
</head>
<body>
<div class="color" id="change" onclick="changeColor();"></div>
<script>
$('.color').click(function(){
$(this).toggleClass('clicked');
});
</script>
</body>
</html>
Where do i start?
Very simple JSON Database Example
I have written some code that will enable you to save the state of the background color in a JSON file, which you would store on your server.
Essentially, the JSON file functions as a simple database (you probably shouldn't implement it this way, but it's simple enough for a beginner to understand) which centralizes the data, allowing all the users to see the box in the same state.
This is how you could achieve this:
index.js:
$.getJSON("https://api.myjson.com/bins/4zzaa", function(data){
if (data.clicked) {
$("#box").addClass("clicked");
}
$("#box").addClass("loaded");
})
.fail(function(){
//Handle JSON fetch error
});
$('#box').click(function(){
var isClicked = $(this).hasClass("clicked") ? false : true;
var str = JSON.stringify({clicked: isClicked});
$.ajax({
url:"https://api.myjson.com/bins/4zzaa",
type:"PUT",
data: str,
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(data, textStatus, jqXHR){
$("#box").toggleClass("clicked");
}
})
.fail(function(){
//Handle PUT error
});
});
https://api.myjson.com/bins/4zzaa:
{
"clicked": "true"
}
I seriously suggest doing some reading on jquery.getJSON() and jQuery.ajax(). These will be a good starting point for you.
Here's my fiddle - note that you will have to replace the URLs in the getJSON and ajax methods when you use it.
Hope this helps!
Try this:
Before refresh:
var color = "value";
localStorage.setItem("color", color);
After refresh:
var color = localStorage.getItem("color");
You can achieve this either by setting cookies or localstorage.
I have implemented the functionality using localstorage.
Try it in your code it will work
$(function(){
if(localStorage.getItem("divClicked")){
$('.color').addClass('clicked');
}
else{
localStorage.setItem("divClicked",false);
}
});
$('.color').click(function(){
localStorage.setItem("divClicked", !localStorage.getItem("divClicked"));
$(this).toggleClass('clicked');
});
Its better if you use the id instead of .color. Here is a solution:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.color {
width: 400px;
height: 400px;
background: black;
margin: auto auto;
}
.clicked {
width: 400px;
height: 400px;
background-color: red;
margin: auto auto;
}
</style>
</head>
<body>
<div class="color" id="change" onclick="changeColor();"></div>
<script>
function changeColor(){
$('#change').toggleClass('clicked');
$('#change').toggleClass('color');
if(typeof(Storage) !== "undefined") {
localStorage.setItem("color", $('#change').attr('class'));
}
}
$(document).ready(function(){
if(typeof(Storage) !== "undefined" && localStorage.getItem("color") !='') {
$('#change').attr('class','');
$('#change').attr('class', localStorage.getItem("color"));
}
});
</script>
</body>
</html>
You should save data on the server, for example in database or file
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>