positioning pop-up iframe according scrollTop of top window - javascript

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>

Related

How to force < iframe> to be sticky in on side on the HTML page?

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>

How to change the size of this iframe?

I want to embed this iframe into my webpage:
<iframe height="600px" width="600px" src="https://ionicabizau.github.io/github-profile-languages/api.html?damienAllonsius" frameborder="0"></iframe>
EDIT
I get this cool result but unfortunately the iframe is too big.
So how can I rescale it ? Let's say I want it 50% smaller.
When I change attributes height and width from 600 to 300, I get this result
How can I fix that ? Changing the width and heigh with a CSS class does not change the result. Any idea ?
Just apply CSS properties transform and transform-origin to the iframe:
transform will change the size of the whole DOM object tree (Also font size and so on)
transform-origin will specify that the resize should start from top left. Otherwise, it would resize from the center and the resized iframe would flow in the middle.
#frame {
border: 1px solid black;
transform: scale(0.5);
transform-origin: top left;
}
<iframe id="frame" src="http://google.at" frameborder="0"></iframe>
You may take one div and try to put iframe inside that div.
Apply width:50% to newly created div.
.container-wrapper {
width:50%;
}
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<div class="container-wrapper">
<iframe src="https://ionicabizau.github.io/github-profile-languages/" height="100%" width="100%">
</iframe>
</div>
</body>
</html>
Your iframe content should be responsive enough to display.

iframe loads outside parent window

I am loading a content from another site in iframe window, but when I select any link it opens the parent site in the window. I need everything to be opened in the same iframe? How to fix that?
The code:
<div class="calculator" style="display: block;width: 900px; height: 440px; overflow: hidden; ">
<iframe src="http://www.avtosojuz.ua/technical_service/" align="middle" width="962" height="100%" scrolling="no" frameborder="0" style="margin-top: -440px;
"></iframe>
</div>
This question has been asked before: How to open a iframe link within the same iframe?. It appears that it is not possible to control this when referencing an external website.

iframe disable scrolling on tab

I have an iframe that looks like this:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" style = 'height:100px;width:200px;' scrolling = 'no'>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
so when I press tab in the iframe, it traverses through all the links , automaticall scrolling all the way to the bottom of the site that's in the iframe. What I want to do is make the iframe so that tab only within the rectangle box where height = 100px, width = 200px and ignore everything else on the site...basically clip everything else that doesn't fit into this rectangle...
I tried setting height and width and also overflow:hidden, but that doesn't seem to do the trick.
This blocks user from being able to click on anything in the iframe but for some reason, you can still click inside and tab through :-( fiddle
<div id="IframeWrapper" style="position: relative;">
<div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width: 400px; height: 200px"></div>
<iframe src="http://www.w3schools.com" style='height:200px;width:400px;' scrolling='no'>
<p>Your browser does not support iframes.</p>
</iframe>
</div>
You can't do anything about it, but instead you can run a JS on iframe load which cam hide the html contents from your iframe which you don't want to be displayed
you can refer to these similar questions to get the idea:
Changing div in iframe using Jquery
jQuery, select element inside iframe, which is inside an iframe
And there's a similar discussion on jQuery forums here: https://forum.jquery.com/topic/changing-elements-in-an-iframe

How Can I Position a Clickable Image to Top of Browser in jQuery

Obviously I am a novice coder :( This seems like it should be easy, but I can't figure it out.
CSS
div {
display: none;
}
BODY
<div id="div" style="width:100%;height:1750px;z-index:1;">
<iframe src="mypage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
</div>
<iframe src="http://www.website.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
jQuery
$('#hover').mouseenter(function() {
$('#div').show();
}).click(function(e) {
e.preventDefault();
$('#div').hide();
});
This webpage code displays the clickable image "30x1800clear.gif" at the top of the page that opens the "mypage.html" iframe content on hover and closes the ifame content on clicking the image. Which is exactly what I want it to do.
I want the image to stay fixed at the top of the page on scroll. If I try to use ANY styling at all, or surround the code in a DIV with any position styling the image disappears completely.
Can someone show me how to make the image stay fixed at the top of the browser window on scrolling the page?
add position is fixed to image tag. like this
<img src="30x1800clear.gif" width="100%" height="20px" border="0" alt="" style="position: fixed;">
There are several issues here:
You have a div with id div. This is very confusing, so lets change the id to mydiv. In your css, you apply your display:none to div, so to all divs. I guess you want to apply it only to the div in question, so yo should change it to:
#mydiv {
display: none;
}
You're mixing inline style and separate file for the same element, so let's combine everything into the css file:
#mydiv {
width:100%;
height:1750px;
z-index:1;
}
And the first line of your html becomes:
<div id="mydiv">
Now, for the real question: You want to fix the position of the image to the top. Let's add this lines to the #mydiv css block:
position: fixed;
top: 4px; /* You can change this to any number of pixels you want, including 0 */
left: 4px; /* Same thing */

Categories