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>
Related
when I view this codes , iframe popup automatically open.
but I want to open iframe when I click "click me" button.
could you please help me ? I hope that its very easy trick but I am an amateur for javascript.
<html>
<head>
<script language="javascript">
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
</script>
<head>
<body>
<b><font color="000">Click Me !</font></b>
</body>
</html>
I have fixed your code for you. You should probably not use an inline call, but here is how you would do it. Make sure to wrap your code in the load function so when you call javascript:load() it will complete the function.
<html>
<head>
<script language="javascript">
function load() {
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
}
</script>
</head>
<body>
<b><font color="000">Click Me !</font></b>
</body>
</html>
A solution could just be not creating the Iframe until the button is clicked:
<html>
<head>
<script language="javascript">
function load() {
var iframe = '<html><head><style>body, html {width: 100%; height: 100%; margin: 0; padding: 0}</style></head><body><iframe src="http://www.euronews.com" style="height:calc(100% - 4px);width:calc(100% - 4px)"></iframe></html></body>';
var win = window.open("","","width=1024,height=768,toolbar=no,menubar=no,resizable=yes");
win.document.write(iframe);
}
</script>
</head><body>
<b><font color="000">Click Me !</font></b></body>
</html>
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%;
}
Hi i need to modify java script that will by changing fixed image.
In for example:
when page is loaded then image will by on right site. Next after scrolling down page image should be changed to next one for each e.g. 100px. Images need to by loaded from image list or something similar.
I have found java script that make something similar to this. [Instead of creating images of numbers i need to load my own images]
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
height: 400%;
background: white;
width: 100%;
}
.show {
width: 100px;
height: 100px;
position: fixed;
top: 300px;
right: 20px;
background: lime;
}
</style>
</head>
<body>
<img class="show" alt="0" src="img0.jpg" />
Text,Text,Text,Text,Text,Text,Text,Text,Text,Text,Text
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
var lastI
$(window).scroll(function() {
var scrollTop = $(this).scrollTop()
console.log(scrollTop)
var i = (scrollTop / 10).toFixed(0)
if (i !== lastI)
$(".show").attr({
"src": "img" + i + ".jpg",
"alt": i
})
lastI = i
})
</script>
</body>
</html>
Update:09.11.2017
Ok, I manage this code to work. What should I do it was to setup right path to image files like in my case ("src": "test/" + i + ".jpg",) where my images are in "test" folder, and change names of images [1.jpg, 2.jpg and so on].
You can easyli change your image with Native scroll event, without using JQuery :
You can see how to use native scroll event here
<body>
<!-- This is an image with a 'show' id -->
<img id="show" alt="0" src="img0.jpg" />
<script type="text/javascript">
/* this capture the `scroll event`*/
window.addEventListener('scroll', function(e) {
/* This generate a image name in case with scroll position (ex img1.jpg) */
let bgImage = 'img' + (window.scrollY / 10 ).toFixed(0) + '.jpg';
/* This specify the path where are your images list */
let bgImagePath = '../images/' + bgImage;
/* This get your element (img) with id `show` and change this background image by the path include in `bgImagePath` variable */
document.getElementById('show').style.backgroundImage = bgImagePath;
});
</script>
</body>
Native background image explain here
Native getElementById explain here
This sample of code do not use JQuery :) Just native Javascript : you van remove this lines in your code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
Hope I help you.
I'am not sure, try this one:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.Classname').css("background-image","../images/image.png");
} else {
$('.Classname').css("background-image","none");
}
});
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.
This should work according to all the stuff I've looked up, but it just doesn't.
I have a html with a document. It has a div, which contains a specific element which I want to access.
<li>FAQ</li>
The html document also contains an iframe with the FAQ.html, which has the following loadup code:
<script>
function loaded() {
parent.document.getElementById("Faq").style.color = "green";}
</script>
However, nothing happens. What am I doing wrong?
The error console reports nothing which could facilitate my analasys.
EDIT:
Here's a basic concept.
https://dl.dropbox.com/u/32831239/Screenshots/htmlstructure.png
(Unfortunately stackoverflow doesn't let me post images as of now)
The left div should serve as a nav bar. Upon page load, the li entry should be marked with a color (e.g. green).
Use onload event of the body of FAQ.html to invoke loaded function
<html>
<head>
<script>
function loaded() {
alert("Hello !"); //alert to check if this is being invoked.
parent.document.getElementById("Faq").style.color = "green";
}
</script>
</head>
<body onload="loaded();" >
...
</body>
</html>
Or just remove the function (no need to use body onload event)
<script>
parent.document.getElementById("Faq").style.color = "green";
</script>
<iframe src="test1.html"
style="float: right;
width: 260px; height: 130px;
margin-left: 12px; border: 1px solid black;"
name="#boogiejack">
Alternative Content
</iframe>
Test1.html content
<li>FAQ</li>
<script type="text/javascript">
function loaded() {
document.getElementById("Faq").style.color = "green";}
</script>
You could use the following in your parent
var iframe = document.createElement("iframe");
iframe.src = urlToYourIframe;
// if this is IE then use attachEvent
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
parent.document.getElementById("Faq").style.color = "green";
});
} else {
iframe.onload = function(){
parent.document.getElementById("Faq").style.color = "green";
};
}
var el = document.getElementById("iFrameContainer");
el.appendChild(iframe);