Hide container if DFP ad not loaded - javascript

I want to hide container based on google DFP ad is not loaded or not. I get Iframe body blank as shown below when ad is not loaded.
<iframe id="google_ads_iframe_/1009127/<id>_0__hidden__" name="google_ads_iframe_/1009127/<id>_0__hidden__" width="0" height="0" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border: 0px; vertical-align: bottom; visibility: hidden; display: none;" src="javascript:"<html><body style='background:transparent'></body></html>""></iframe>

You are looking to the collapseEmptyDivs method - this should do what you want.
This page should tell you everything you need to know: https://support.google.com/dfp_premium/answer/3072674?hl=en

Related

Iframe fullscreen instead of scrolling?

I did search to see if there was already an answer and there are some related answers but the code is different. I'm honestly not sure if this is HTML or Javascript. I have no experience with web development.
So this is what is pasted to my WordPress website.
<iframe src="https:"some address" style="border:none; min-height: 700px; width: 1px; min-width: 100%; *width: 100%;" name="site" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%" referrerpolicy="unsafe-url" allowfullscreen></iframe>
scrolling
Try adding scrolling (scrolling="no") attribute to remove scrolling.
<iframe src="https://stackoverflow.com/" style="border:none; height:100vh; width: 100%;" name="site" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%" referrerpolicy="unsafe-url" scrolling="no" allowfullscreen></iframe>
as scrolling is deprecated I guess then we should go with CSS.
you can add this in your styleSheet or inside <style> tag in HTML page
iframe {
overflow-x:hidden;
overflow-Y:hidden;
}

Javascript: How can I get ancestor element of a dynamically written iframe from within the iframe?

I have a div on a page that is used by Google to write out a child div and child iframe ad inside of it.
<div id="ads-pos-111" class="module ad ad-111" data-pos="922"></div>
When the iframe ad is written, the DOM looks like this:
<div id="ads-pos-111" class="module ad ad-111" data-pos="922">
<div id="google_ads_iframe_/123456/consumer/hco_3__container__" style="border: 0pt none;">
<iframe id="google_ads_iframe_/123456/consumer/hco_3" title="3rd party ad content" name="google_ads_iframe_/123456/consumer/hco_3" width="1" height="8" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" srcdoc="" style="border: 0px; vertical-align: bottom; width: 100%; height: 578px; margin: 0px;"></iframe>
</div>
</div>
I want to write Javascript code inside the iframe that can traverse its ancestors to get the value of the data-pos attribute two ancestors above. I would like to use something like jQuery.closest('.data-pos').
I cannot use the iframe name as an anchor point as the name is generated dynamically by Google. Nor can I use the parent div ID, as there are potentially multiple ads on the page. So,I can't use code like window.parent.$('#google_ads_iframe_/123456/consumer/hco_3') as I won't know the ID. Each iframe needs to "self-detect" what "data-pos" it is located in.
Has anybody encountered this situation?
(iframes are served on same domain as parent page)

positioning pop-up iframe according scrollTop of top window

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>

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.

Safari iframe visibility hidden not working

I have an iframe and it's code is:
<iframe page_id="3" allowtransparency="true" src="https://www.mysite.com/" name="custom-frame" id="custom-frame-2044963" class="custom-frame" style="visibility: hidden; height: 1014px; width: 1060px;" scrolling="no" frameborder="0" width="100%" height="0" content_height="217"></iframe>
For some reason visibility: hidden is not working in Safari yet it is in Chrome and FF. I've never come across this before. It seems to be a new issue since this code is very very old. Any ideas?
I am not toggling display to avoid some other issues.
EDIT It looks like a Safari bug? http://jsfiddle.net/y2V3T/ v7.0.4
If visibility: hidden is not working you can also use opacity: 0;
The code would look like this:
<iframe page_id="3" allowtransparency="true" src="https://www.example.com/" name="custom-frame" id="custom-frame-2044963" class="custom-frame" style="opacity: 0; height: 1014px; width: 1060px;" scrolling="no" frameborder="0" width="100%" height="0" content_height="217"></iframe>
Let's see if this is a legit bug, as I think it is:
https://bugs.webkit.org/show_bug.cgi?id=134774

Categories