Facebook Page Feed - Full Height - html

Just like the title says. I want to insert a FB page feed that stretches to the end of the window. Is this possible? 800px is the highest it wants to go I think, when I set it on iframe. And I've searched everywhere for an answer, but no luck.
I've used Facebook page plugin, of course. And here's the outline of my code, using Bootstrap 4.
.card {
position: fixed;
width: 340px;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card p-0">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FMercedesAMG&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
Thanks!

The default height can be set through your app dashboard (on the Facebook Developers website). setting it to 'fluid' should allow you to resize it on the fly.
Then you should apply a 100% height to the iframe itself and set a min-height to your container.

Related

Embed an html web-page inside another one and scroll it using the parent scollbar

I would like to have the contents of an html webpage displayed in another (parent) html webpage, stretch the embedded webpage to the width of the parent and also remove the scroll bar of the embedded webpage while being able to scroll down the contents of the embedded webpage using the the scroll bar of the main page as the height of the embedded contents are too long to fit. I tried using code from answers to similar problems including this:
<iframe style='overflow:hidden; width:100%; height:100%' scrolling = "no" src="annotated list of courses.html" frameborder="0" width="100%" height="100%"> </iframe>
but I cannot achieve the desired outcome. I would like is to be able to scroll the contents of the embedded webpage using the scrollbar of the parent page. It is possible (with no need to copy code form the embedded HTML to the parent one instead) and how? Thanks.
I solved the problem by specifying a specific height for the embedded webpage which is greater than or equal to the height of the webpage like this:
<div id="content" class="content content-full" style="margin-top: -40px;">
<iframe style='overflow-y:hidden; width:100%; height:17560px' src="annotated list of courses.html" frameborder="0" width="100%" height="17560px" type="text/html"> </iframe>
</div>
I hope this can solve the problem also for others and any better or different slolution is also appreciated.
ps: You have to specify a height that is at least equal to the height of the contents of the embedded webpage or element for the scrollbar to disappear.
I've solved it by using two DIVs, one inside the other.
<div style="overflow-y: hidden; border: 2px solid black; width: 300px; height: 300px; position:absolute; left: 100px; top: 100px">
<div style="margin-top: -100px; width: 300px; height: 400px">
<iframe scrolling="no" style='pointer-events: none; width:100%; height: 100%' src="https://earth.nullschool.net/#current/wind/surface/level/orthographic=-325.19,32.21,3000/loc=35.073,31.923" frameborder="0" type="text/html"></iframe>
</div>
</div>
I've disabled The scrollbars by setting scrolling="no"
I've diasbled user clicks by setting style='pointer-events: none;'
Here is a working sample - https://jsfiddle.net/q46L1ynv/

Height equal to 100% is not working for IFrame

Following by some topics on Stack Overflow like:
Full-screen iframe with a height of 100%
How do you give iframe 100% height [duplicate]
Make Iframe to fit 100% of container's remaining height
I wanted to nest iframe on my web page. I am using bootstrap to style web page, so I used following code:
<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
<iframe id="iFrame1" src="<test_link_here>" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</div>
Unfortunately my iframe is not resized to full height. I would like somehow to resize it automatically to full height.
Do you know how I can acheive it?
What you want could actually be done by changing the height : 100%; value to height : 100vh;.The vh is a unit called ViewHeight, and your full screen height is actually 100vh;
Here is a post about length units from the Mozilla team.
Try this code :
<div class="col-sm-6" style="margin:0px;padding:0px;overflow:hidden">
<iframe id="iFrame1" src="http://www.stackoverflow.com" frameborder="0" style="overflow:hidden;height:100vh;width:100%; border : 1px solid red;"></iframe>
</div>

Position and spacing with inline-block elements

I'm sure for most of you this is an easy one, however, I cannot seem to get my code to render correctly. I have three elements # 330px wide each, which I am trying to place "side by side" within a 1050px content area. Only one of the elements is rendering on the correct "block" with the other two appearing below. I am simply trying to place the three together spaced evenly across the content area with adequate space between them. Due to the fact that one element(rss feed) will only render on my site, please look at my test page to further explain what I am talking about: http://www.realtimehockey.net/testing.html
Thank you in advance for any help you may be able to offer.
My Code
CSS
.box {
display: inline-block;
float: left;
}
HTML
<div class="box">
<div class="feedgrabbr_widget" id="fgid_882d7000d9e4e2c5832cdb9c6"
float="right"></div>
<script> if (typeof(fg_widgets)==="undefined") fg_widgets = new
Array();fg_widgets.push("fgid_882d7000d9e4e2c5832cdb9c6");</script>
<script src="http://www.feedgrabbr.com/widget/fgwidget.js"></script>
<iframe
src="https://scorestream.com/widgets/iframe?widgetId=16476"
style="padding:0px;border:0px;width:330px;height:600px;max-height:600px;
display:inline-block"
title="Realtime sports scoreboard widget"
scrolling="no" frameBorder="0">
</iframe>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F
%2Fwww.facebook.com%2Frealtimehockey&width=330&height=600&
amp;colorscheme=dark&show_faces=false&header=false&
amp;stream=true&show_border=true" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; display:inline-block; width:330px;
height:600px;" allowTransparency="true"></iframe>
</div>
Add this to your CSS
.feedgrabbr_widget {
width: 330px;
display: inline-block;
}
This should correct the width and display for the first box which was actually rendering as a block element with a width of 663px from the chrome inspector.

How to embed PDF file with responsive width

I'm embedding pdf files using something like this:
<div class="graph-outline">
<object style="width:100%;" data="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf">
<embed src="path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type="application/pdf" />
</object>
</div>
It works but I want to set the pdf width to match the width of the containing div. Currently it shows up like an iframe with scrollbars, so to view the entire pdf, you have to scroll right to left. I want the pdf to fit the width of the container.
How do I fix this? I'm supporting IE8 and up.
Here is a jsfiddle: http://jsfiddle.net/s_d_p/KTkcj/
Simply do this:
<object data="resume.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="resume.pdf">click here to
download the PDF file.</a></p>
</object>
If you're using Bootstrap 3, you can use the embed-responsive class and set the padding bottom as the height divided by the width plus a little extra for toolbars. For example, to display an 8.5 by 11 PDF, use 130% (11/8.5) plus a little extra (20%).
<div class='embed-responsive' style='padding-bottom:150%'>
<object data='URL.pdf' type='application/pdf' width='100%' height='100%'></object>
</div>
Here's the Bootstrap CSS:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
I did that mistake once - embedding PDF files in HTML pages. I will suggest that you use a JavaScript library for displaying the content of the PDF. Like https://github.com/mozilla/pdf.js/
<embed src="your.pdf" type="application/pdf#view=FitH" width="actual-width.px" height="actual-height.px"></embed>
Check this link for all PDF Parameters: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=7
Chrome has its own PDF reader & all parameter don't work on chrome.
Mozilla is worst for handling PDFs.
<html>
<head>
<style type="text/css">
#wrapper{ width:100%; float:left; height:auto; border:1px solid #5694cf;}
</style>
</head>
<div id="wrapper">
<object data="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf" width="100%" height="100%">
<p>Your web browser doesn't have a PDF Plugin. Instead you can <a href="http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf"> Click
here to download the PDF</a></p>
</object>
</div>
</html>
Seen from a non-PHP guru perspective, this should do exactly what us desired to:
<style>
[name$='pdf'] { width:100%; height: auto;}
</style>

IFrame scroll bars not coming on Chrome

I am using an IFrame to make show some content from some other domain. The problem is that I can use a specified height and width (which I am using) and the content inside the IFrame cannot be accommodated completely in the IFrame. Hence, I need scrollbars.
I used the following html code -
**<iframe style = "overflow-x:scroll; overflow-y:scroll;" src = "http://shopsocial.ly/merchant/fanpage?merchant_name=cafepress"
height = "400" width = "500">**
This works fine in Firefox. But in Chrome I'm not getting any scrollbar in the IFrame. I have searched this problem and have tried many things all of which did not solve my problem. Can someone help me with this?
In your iframe content add inline:
<body style="overflow:auto;">
or in the css file attached to the iframe
html, body {
overflow:auto;
}
and of course as recommended by Tom make sure you use scrolling="yes" and style="overflow:visible;" on the iframe:
<iframe scrolling="yes" src="http://example.com" style="overflow:visible;"></iframe>
If it still does not work then try to wrap the iframe like this:
<div style="overflow:visible; height:400px;">
<iframe scrolling="yes" src="http://example.com" style="overflow:visible; height:2000px;"></iframe>
</div>
Instead of using the CSS style you could use the scrolling property of the iframe and set it to yes (i.e. always display scrollbars):
<iframe scrolling="yes" src="http://domain.com" height="400" width="500"></iframe>
Yap Tom is absolutely right you can use
<iframe style="overflow:visible; width:400px; height:400px;" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="yourfile.html"></iframe>
and it should be work as i have tested.
If it still does not work then update Chrome to latest version. :)
To make this scrollable on all mobile devices (specially iPhone devices), you will need to add CSS to the div around the iframe:
<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;">
<iframe scrolling="yes" src="http://example.com" height="400" width="500">Loading...</iframe>
</div>