How can I display the full length of an embedded google document without the scroll bar on the iframe?
<html>
<style>
body { margin: 0; padding: 0; o}
iframe { margin-left: 2vw; margin-top: 2vh; height: 100%; width: 90vw; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<iframe srcdoc="" frameborder="0" scrolling="no" height="100%"></iframe>
<script>
$(function() {
$.get("https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true", function(html) {
var contents = $("iframe").contents();
contents.find("html").html(html);
setTimeout(function() {
contents.find('a[href^="http://"]').attr("target", "_blank");
contents.find('a[href^="https://"]').attr("target", "_blank");
}, 1000); // Actually not sure if timeout is required here...
});
});
</script>
</body>
</html>
The display shows maybe a page and half of text and stops.
Google docs is currently happy to serve published documents via CORS requests.
This means that you don't need an iframe to embed your documents. You can instead use an XMLHttpRequest to GET your document and put the response inside a div's innerHtml.
You don't actually even need to make a GET request to accomplish your requirement. If all you're wanting to do is display the full length of the document without having to have a scroll bar, you can use an <embed /> tag with some css.
<embed src="https://docs.google.com/document/d/17OkIgtNdV1flno_783tJm2xWU0NBh7uEmZ5wEXP2E9g/pub?embedded=true" width="100%" style="height: -webkit-fill-available">
When simply added to an HTML page, it will set the height to the full height of the contents of the document, so the only scroll bar you'll have is the scroll bar that is on the browser to scroll down the length of the document. Does this get you what you need?
Related
I'm a real amateur when it comes to coding. I'm trying to embed a webpage into a dashboard, just using notepad to write the HTML, got some, but limited, coding experience.
The webpage I'm embedding has fixed items down the page, and so far I've managed to get the page to jump down the page, stopping at each of these articles. Note the site I'm embedding is external - I don't own it.
I've got this HTML code, which includes some javascript to make the iframe the correct size for the embedded page automatically.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboardtest</title>
<style>
iframe{
width: 49%;
border: 4px solid #CB0F0F;
}
</style>
</head>
<body onload="pageScroll()" bgcolor="33ACFF">
<h1 style="font-family:Pacifico">Polls... the Results are In!</h1> <iframe src="https://yearbook.com/s/polls/" height="600px" id="myIframe"></iframe>
<script>
// Selecting the iframe element AUTO HEIGHT CODE
var iframe = document.getElementById("myIframe");
// Adjusting the iframe height onload event
iframe.onload = function(){
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</body>
</html>
Previously, I had this code:
<html>
<head>
<title>previousdashboardtest</title>
<meta http-equiv="refresh" content="10">
<script type="text/javascript">
<!--
function pageScroll() {
window.scrollBy(0,392);
scrolldelay = setTimeout('pageScroll()',1000); //Increase this # to slow down, decrease to speed up scrolling
window.setInterval(function scrollWin(){
/// call your function here
}, 5000);
}
//-->
</script>
</head>
<body onload="pageScroll()">
<iframe src="https://yearbook.com/s/polls/" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="100%"
height="45000px" style="padding: 0; margin: 0; border: 0;"></iframe>
</div>
<script>
function scrollWin() {
window.scrollTo(0, 0);
}
</script>
</body>
</html>
It scrolled down perfectly, stopping at each item down the page. But the whole window was scrolling, meaning that the other text I have on the page would scroll out of view.
Hence I embedded the page as an iFrame, and just want to scroll the Iframe.
Is this possible? Or do I need to try some other way.
Ideally in the end I'd like it to scroll down to the bottom of the Iframe, and then loop back to the top indefinitely.
Note: The page I'm embedding requires a login, so best to use some other page if testing.
I have a question that started as a practical one as I want an element containing a video collapsing when the video finishes, for which I need to add an event listener, but as it wasn't working I started doing some testing and I don't understand how is JavaScript accessing variables.
Ok, so in my project I have a video inside an iframe, like so:
html
<p> ...some tex...
<span id="clickable" class="link">click me to watch video</span>.<span><iframe id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe></span>
...some more tex...</p>
the iframe just has a video
iframe:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script2.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<video id="myVid" width="350" height="200" >
<source src="someVideo.mp4" type="video/mp4">
</video>
</body>
</html>
the JavaScript is like so:
$(document).ready(function(){
$("#clickable").click(function(){
var rect = $(this).next().find('.rect');
if (rect.hasClass( "open" )){
rect.removeClass("open");
rect.contents().find("#myVid").get(0).pause();
} else {
rect.addClass("open");
rect.contents().find("#myVid").get(0).play();
}
});
and the css
.rect{
float: left;
height: 0px;
width: 350px;
display: block;
margin: 0px;
padding: 0px;
opacity: 0;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.open {
height: 200px;
width: 350px;
opacity: 1;
padding-bottom: 10px;
padding-top: 10px;
}
Ok so this works. When i click the link "clickable" the javascript adds the class "open" to the the iframe which makes the height go from 0 to 200px and so the video slides open. Then when i click again the video closes.
So what I was trying to do is to add a function that would also close the video when the video finishes with this function:
$('#myVid').on('ended',function(){
rect.removeClass("open");
alert('finished');
});
And here is when the problem starts. The question is where to place this function. If I place it outside "clickable" the function, it does get triggered when the video finishes (the alert box shows up), but the video doesn't collapse, so I concluded that it couldn't reach the video. Then I modified the event listener like so:
$('#rickieVid').on('ended',function(){
if ($(rect).hasClass("open")){alert('has class')}
else {alert('has not');}
});
And the alert box shows: "has not". So this really confuses me as the class "open" was clearly added with the "clickable" event. Can someone help me understand why this is not working? Many thanks
P
===================================edit==================================
I perhaps should mention that I did try to put the "rect" variable outside the "clickable" function to make it global, like so:
$(document).ready(function(){
var rect;
$("#rickie").click(function(){
rect = $(this).next().find('.rect');
etc...
And then modifying my function to access the global variable like so:
$('#rickieVid').on('ended',function(){
if (rect.hasClass("open")){alert('has class')}
else {alert('has not');}
});
Which still doesn't work as it comes with this error:
TypeError: undefined is not an object (evaluating 'rect.hasClass')
You can achieve this by attaching the load event handler to the iframe jquery object as the main document is ready even if the iframe source is loading in it and also sometimes the video control takes time to load as well.
Anyway, In that event, you need to set the global player object and also attach the ended event handler to the player.
jQuery code to use:
$(document).ready(function(){
var frame = $("#frame");
var player;
frame.bind("load", function () {
player = $(this).contents().find("#myVid");
player.on('ended', function () {
frame.removeClass("open");
alert('finished');
});
});
$("#clickable").click(function(){
if (frame.hasClass("open"))
{
frame.removeClass("open");
player[0].pause();
}
else {
frame.addClass("open");
player[0].play();
}
});
});
One thing to note here. If the iframe source is a cross domain url then the .contents() will throw a security error. This only works if the iframe source page is within the same domain.
This question has been posted a lot of times, i have referred them but not working for me. I have an iframe which loads another wesite in it. I want that the height of the iframe must be change dynamically as per the height of the website page loading in it. No manual height settings. How can i do that?
<iframe src="http://www.w3schools.com/" width:150;></iframe>
Could anyone please fiddle and show me? Advance thanks for help. Fiddle link below:
[link] ( http://jsfiddle.net/vineetgnair/5p0pL5zu/ )
It's not easy to do in a cross-browser safe way as it may seem. You are better off using a JavaScript library that does it for you. I have used this one with success before.
you have an error in code that is
<iframe src="http://www.w3schools.com/" width=150;></iframe>
that is colon(:) has to replace equal(=)
if you want responsiveness make the width in percentage it gives you full responsive
<iframe src="http://www.w3schools.com/" width=100%;></iframe>
first you need to full height your iframe using some css technique given in the below css section. then take the height of that iframe(full height of given url in the src iframe), pass that height to iframe..
the css:
<style>
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
/*set your width here*/
height: 100%;
border: none;
}
</style>
the body section:
<iframe src="http://www.w3schools.com" frameborder="0" width="100%" id="frameid"> </iframe>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var theHeight = $('#frameid').height();
$('#frameid').attr('height', theHeight);
console.log(theHeight);
</script>
I want to show a loading image icon for the links to external sites when the pop-up is opened through a window.open() function.
I thought of an approach, where show the loading image in a 'div' and get the content of the external site in an Ajax call, then re write the content. Since these are external domains, $.get("external-link") won't work (although might work with some workarounds i don't links).
Is there another approach to tackle this, appreciate pointers. Thanks
Yes, you can load the content into an iframe, showing the loading image when the link is clicked, and hiding it when the iframe has loaded:
click me
<br/>
<div id="dummyloader" style="display: none; width: 500px; height: 500px; background-color: gray"><h2>loading</h2></div>
<iframe src="" id="myframe" style="display: none;" width="500px" height="500px"></iframe>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function(){
$('.ilink').click(function(ev){
ev.preventDefault();
$('#dummyloader').show();
$('#myframe').attr('src', $(this).attr('href'));
})
$('#myframe').load(function(){
$('#dummyloader').hide();
$(this).show();
})
})
</script>
live jsfiddle example: http://jsfiddle.net/L01d5t5a/
I have two sites that I am sort of melding together. I'm using and iframe to display content from one page in the other as if it were all one site. The caveat here is that I need the page to display as normal when viewed in an iframe and to display a warning otherwise. I cannot import the iframe page into the host page due to IIS incompatibility so that option is out. The plan works fine when I simply display the page under all circumstances, it is when I try to implement the conditional display that I run into problems. On the iframe page I have the following:
<script type="text/javascript">
window.onload = function InFrame() {
MainContent_siteIsNotFramed
if (top != self) {
//document.getElementById("siteIsFramed").style.display = "inline"
siteIsFramed.visible = "true"
}
else {
//document.getElementById("MainContent_siteIsNotFramed").style.display = "inline"
siteIsNotFramed.visible = "true"
}
init();
};
</script>
This is my attempt to get the iframe page to handle its own conditional display. The only relevant code I have in the host page is the iframe itself which, for completelness, looks like this:
</head>
<body style="margin:0; height: 100%;">
<iframe runat="server" id="signInFrame" style="border: 0; width: 100%; height: 100%; ">
Your browser does not support iframes. Consider upgrading.
</iframe>
</body>
</html>
When the content to display/not display, the content in the iframe will display with about half height. Without, it displays at full height (desired behavior). I've tried to be as thourough as possible, if anyone needs more details, let me know.
Try "positioning" the iframe:
<iframe runat="server" id="signInFrame" style="border: 0; position:absolute; width: 100%; height: 100%; ">
Your browser does not support iframes. Consider upgrading.
</iframe>
The problem is that and iframe with default position (position: static) can't have a "relative" height (i.e. a %), so it ignores the height:100%, and applies the "default" height of an iframe (150px in FF).