I'm looking to embed a Google Sheet into a Google Extension. Simple enough — just use the autogenerated embed code and stick it into an html file. This is what I did:
<html>
<link rel="stylesheet" href="extension.css">
<iframe
width="250px"
height="250px"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=true&headers=false">
</iframe>
</html>
The result is this: https://imgur.com/CopCfvL. I just want the table with columns "TEAM" and "SCORE", is there a way to get rid of the Google border (i.e., "Color Wars Scoring : Sheet2" and the tab below)? I've looked for built-in ways to remove it and it seems like there once was, but not any more. That being said, I feel like there should be a simple enough work around, possibly with JavaScript. I just don't know enough to figure it out.
Thank you for your help!
iframe {
margin-top: -30px; /* Cut off top bar */
margin-bottom: -30px; /* Cut off bottom bar */
}
div {
overflow: hidden; /* Makes cutoff work */
border: 2px solid black; /* Just for aesthetics, can be removed */
display: inline-block; /* Fit div to contents */
}
<html>
<link rel="stylesheet" href="extension.css">
<div>
<iframe
width="250px"
height="250px"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=true&headers=false">
</iframe>
</div>
</html>
It's not the most beautiful thing, but I think we can achieve what you want using a container <div> element and negative vertical margins.
You can edit the query string parameters to hide the top and bottom bars.
What you need here is chrome=false (hide the title above) and widget=false (hide the tabs below):
<html>
<iframe
height="170"
width="450"
frameBorder="0"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQhhQM1ag9M_exkDEV8omFWuI5-4tRizOZ5pl0ZzxpAEJ3rHfWzWilEzjgV4jwpyEj2aaTUkfQx6DRK/pubhtml?gid=1478993491&single=true&widget=false&headers=false&chrome=false">
</iframe>
</html>
Details of other options here: Google sheet embed URL documentation
Related
I'm using the Disqus comments plugin on my wordpress site on http://swiftcarbon.com/carocap-the-journey-thus-far/
As you can see it is using a much darker blue (rgb(0,0,238)) than the sites blue (##288ce4), for the underlines, and anchor tags.
I've read the documentation on https://help.disqus.com/customer/portal/articles/545277 , but according to this article Disqus should apply a black colour to those links, which I'd be happy with.
So far I've tried to override the style with !important to change the colour which didn't work. I've even tried, although I know it's a no-no, to inject styles using the Javascript on the $(window).load() method to ensure the Disqus section is loaded before the js runs.
css
#disqus_thread .publisher-anchor-color {
color: black !important;
}
js
$("#disqus_thread .publisher-anchor-color").css("color", "black !important");
or
$("#disqus_thread .publisher-anchor-color").removeClass("publisher-anchor-color);
Has anyone had a similar problem and managed to change the style.s
The disqus thread is get inside an iframe. You can't change the css of the frame content from the parent page. So this need to be resolved on disqus side - maybe there is an api option that you need to set.
Disqus link colors are inherited from your site's "a" defined color, change your css to define new link colors, and it will automatically pick it up
The final working solution :
<html>
<head>
<style>
#disqus_thread a {
color: red;
}
</style>
<script type='text/javascript'>
/* <![CDATA[ */
var embedVars = {
"disqusConfig":{"platform":"wordpress#4.3.1","language":""},
"disqusIdentifier":"5829 http:\/\/swiftcarbon.com\/?p=5829",
"disqusShortname":"swiftcarbon","disqusTitle":"CAROCAP: THE JOURNEY THUS FAR",
"disqusUrl":"http:\/\/swiftcarbon.com\/carocap-the-journey-thus-far\/",
"options":{"manualSync":false},"postId":"5829"};
/* ]]> */
</script>
<script type='text/javascript' src='http://swiftcarbon.com/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.3.1'></script>
</head>
<body>
<div id="disqus_thread">
<iframe id="dsq-app1" name="dsq-app1" allowtransparency="true" frameborder="0" scrolling="no" tabindex="0" title="Disqus" width="100%" height="100%" src="http://disqus.com/embed/comments/?base=default&version=9c6bf8c60a74cf4ced706cfda8a939f7&f=swiftcarbon&t_i=5829%20http%3A%2F%2Fswiftcarbon.com%2F%3Fp%3D5829&t_u=http%3A%2F%2Fswiftcarbon.com%2Fcarocap-the-journey-thus-far%2F&t_e=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_d=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_t=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&s_o=default&l=" style="width: 100% !important; border: 1px solid red !important; overflow: hidden !important; height: 475px !important;" horizontalscrolling="no" verticalscrolling="no"></iframe>
</div>
</body>
</html>
**// UPDATED ** And the debug :
I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle
I have an issue. I'm using this plugin for custom scrollbars, and have set it up to show up in iframe but I can't scroll on neither the Y or X axis. The content just doesn't load. (?) I have used this example and set the height to 100%. This is what I got so far:
<div id="iframecontainer" style="height: 100%; position: relative; overflow-x:hidden;
overflow-y:hidden;">
<iframe src="http://imgur.com/a/LqmeJ?gallery" scrolling="no" width="1000" height="100%" frameborder="0"></iframe>
</div>
//I use this javascript code to run the scrollbar plugin.
//I also include its files in <head> tag.
<script type="text/javascript">
$(window).load(function(){
$('#iframecontainer').mCustomScrollbar({
theme:"minimal-dark", scrollInertia: 0, axis:"yx"
});
});
</script>
I found a workaround for now, I set height to 99999px and I can scroll websites endlessly, but that's okay, because everything else works. It seems that there is no other way to fix that.
My question ... is it possible to embed a PDF in a HTML document where the height is always 100%. The problem is the actual height of the pdf could vary and the layout needs to respond to this.
There are several ways to embed PDF in HTML.
One would be to use PDFObject. The below example works out of the box in firefox, you'll find further instructions for most browsers on their website.
<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="myfile.pdf">click here to
download the PDF file.</a></p>
</object>
Or you could use the google drive viewer to display any PDF (and quite a few more file types):
<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>
Using the drive viewer your visitors don't need any additional software/plugin to view the files.
You can then adjust the height of the PDF container with css. i.e
#yourcontainer { height: 100vh; }
None of the above answers worked for me.
The following worked across every platform I needed it to (ie, I didn't test IE).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
</head>
<body>
<object data="pdf.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>
</body>
</html>
You must to set width\height a container
<div style="width: 100%; height: 100%">
<embed id="frPDF" height="100%" width="100%" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
</div>
Look example
body {
margin: 0; /* Reset default margin */
}
iframe {
display: block; /* iframes are inline by default */
background: #000;
border: none; /* Reset default border */
height: 100vh; /* Viewport-relative units */
width: 100vw;
}
<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>
Make sure you use <object> - EMBED vs. OBJECT
<object data="file.pdf" type="application/pdf" width="100%" height="100%"></object>
I like the functionality that comes with the html objects for PDFs as opposed to some libraries like PDF.js for light projects. This is definitely not the best answer but I'm currently using JQuery with Bootstrap in an Angular 6 app so I modify height after the the view loads.
I set
<object id="pdf" data="path.pdf" type="application/pdf" width="100%"></object>
then in my component I adjust the height based on the ratio of the width to height.
For example, an 8 x 11.5 document would give the height 1.4375 x the width.
ngAfterViewInit(): void {
var width = $("#pdf").width();
$("#pdf").prop("height", width * 1.4375 + "px");
}
Saw this post and figured I would post. Hope this helps and please correct me if you think this is bad coding practices.
I have a problem with a custom scrollbar appearing twice in an iframe.
The scrollbar looks OK in IE, but not in Chrome, Firefox and Safari.
Here you can have a look to the page:
http://tenforty.ch/index.php/setlist
I have the following code in my iframe:
<style>
iframe {
overflow:hidden;
}
</style>
<iframe scrolling="no" width="690" height="680" frameborder="0"
src="templates/musicband/setlist.html"></iframe>
Here is the code in my html file:
<style type="text/css" id="page-css">
/* Styles specific to this particular page */
.scroll-pane
{
width: 690px;
height: 680px;
overflow: hidden;
}
</style>
I tried out with different widths and hights, tried also 100%. But it looks even worse when changing this.
Here you can see a printscreen how it sould look like (taken in Internet Explorer):
http://www.tenforty.ch/scrollbar.jpg
Can you help me out?
Thanks!
Swiz
The reason you get two scrollbars is because the page you link to in the iframe (http://tenforty.ch/templates/musicband/setlist.html) is also creating a scrollbar:
$(function() {
$('.scroll-pane').jScrollPane();
});