I'm trying to add an iframe (of one page on my site) to another page of my site. I've figured out the code for the iframe and used div to take a portion of it. Now I'd like to shrink the entire webpage (within the iframe) to fit within the page I'm adding it to. How do I change the following code to do that?
<div style="border:0; overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://www.tryary.com/forums/topic/21/best-law-of-attraction-books/post-create?" style="border: 0px none; margin-left: -0px; height: 1000px; margin-top: -333px; width: 726px;">
</iframe>
</div>
If you want only to fit the size of the iframe then check this below code in html
HTML
<div id="output" style="width:500px;height:400px;">
<iframe src="www.google.com" style="width:100%;height:100%;" id="ifrm"></iframe>
</div>
If you want the content also to be shrinked, then use the css transform as below
CSS
#ifrm {
-ms-transform: scale(0.5); /* IE 9 */
-webkit-transform: scale(0.5); /* Safari */
transform: scale(0.5);
}
Related
I'm trying to make with google maps reference stick on the right side of my page I've tried this code still scrolls with the rest of the page
#map{
position: -webkit-sticky;
position: sticky;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
You are looking for position:fixed:
#map {
position: fixed;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
Elements with position:fixed will stay in place when their parent element is scrolled.
This should stick your map to the top (I've added a div to be able to scroll down):
#map {
position: -webkit-sticky;
position: sticky;
top: 0;
}
div {
background-color: yellow;
height: 2000px;
}
<iframe class="map" id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317715.71193692513!2d-0.38178583985785625!3d51.528735196048615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sae!4v1589590348452!5m2!1sen!2sae" width="600" height="700" frameborder="0" style="border:0; width: 100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<div>Extra Space</div>
If you want to the right, right: amount should do the trick. left for left and bottom for bottom.
#Edit - I've found that setting right does not seem to be working. I've searched around and seems like there are several rules when it comes for something to be sticky. I haven't used sticky yet so I don't know if I'm just missing something. I apologize as my comment is most likely useless in your case.
You might want to check Interneting Is Hard if you want to learn more about positioning, though it does not have sticky, it should have enough for your needs without the use of sticky.
add
top:0;
in #map. this will stick the page at the top. This way you can user css position.
Make a sticky div before you insert your iframe in.
<div style="position:sticky; top:3vh;">
<iframe src="page.html"></iframe>
</div>
Here is my Iframe editor, I want to change some css inside editor , when I want to try to apply css, iframe css doesn't get.
<div id="editor" style="flex: 1 1 0%;">
<iframe src="https://editor.unlayer.com/1.0.55/editor.html" frameborder="0" width="100%" height="100%" style="min-width: 1024px; min-height: 100%; height: 100%; width: 100%; border: 0px;">
</iframe>
</div>
so , How can I apply css by using DOM?
DEMO: https://codesandbox.io/s/busy-ride-nbrj6
You have to link the style sheet inside the iframe, or on the source page would be better.
I'm developing plugin which has some pop-up. Plugin is included on some page like iframe but with different domain. There is not allowed to do any other changes on that page except to add this iframe.
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>
Pay attention that scrolling="no" and height is much bigger then heigh of page.
Pop-up should be vertically centered on the page when it appears, doesn't matter how much user scrolled down the page. See the pic
I tried $(top.window).scrollTop() but there is Cross-domain problem.
Is there any css trick to do this?
Thank you in advance.
You can try with transform: translate() function CSS
iframe {
top: 50%;
position: absolute;
transform: translateY(-50%);
}
<iframe class="frame" style="width:100%" src="another-domain.com" frameborder="0" scrolling="no" height="4500px"></iframe>
I have an iframe on my site wrapped in a div.
If I enter only one character in the telephone box it doesn't validate so red warning text appears.
If I then click in the email box and press tab twice, on the second tab the form shifts to the left so I can no longer see the question text.
How can I horizontally fix the form so it doesn't move to the left?
IFrame code:
<div style="border: 0px solid #a1a1a1; width: 450px; border-radius: 25px; background: #83aeff; overflow: hidden;"> <iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="490px" height="330px" frameborder="0" scrolling="no">
</iframe></div>
URL: http://content.workbooks.com/free-trial-workbooks-crm
This happens because iframe width you've chosen is too small (I think this is due to the Industry select box). Just increase both div and iframe width and the shift disappears.
<div style="border: 0px solid #a1a1a1; width:540px; border-radius: 25px; background: #83aeff; overflow: hidden;"> <iframe style="overflow: hidden;" src="https://secure.workbooks.com/process/=QzM/Workbooks_Signup_Form?edition=trial" width="500px" height="330px" frameborder="0" scrolling="no">
</iframe></div>
Fiddle
EDIT
To dynamically adapt iframe height, you can use this jquery library. Upload iframeResizer.contentWindow.min.js script to your server and include it from iframe page:
<script type="text/javascript" src="iframeResizer.contentWindow.min.js"></script>
Then upload iframeResizer.min.js, include it from the page with the div that contains iframe and invoke the proper function to resize iframe:
<script type="text/javascript" src="iframeResizer.min.js"></script>
<script type="text/javascript">iFrameResize();</script>
This should do the trick. For more details, refer to the GitHub page linked above.
I am wondering if anyone can help me which this problem, I have an iframe to a URL(on a subdomain). The page in the iframe has a button to another page. I would like to be able to resize iframe when the user moves to the other page in the iframe. Below is how I am sizing the first page.
$disp = '<div style="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 50px auto; max-width: 300px;">
<iframe scrolling="no" src="https://something.com" style="border: 0px none; margin-right: 188px;height: 1036px; margin-top: -380px; width: 297px;">
</iframe>
</div>';
echo $disp;
Using onLoad you can tell if the iframe source changes, as explained here:
iFrame src change event detection?
The gist is
<iframe src="http://www.google.com/" onLoad="yourJsFunc();"></iframe>
or, with jQuery
$('#iframeid').load(function()
{
alert('frame has (re)loaded');
});