Geek Answers Handbook

Applying CSS in an iFrame

I am trying to change the width of my advertising image from pixels to percentages. I use Google DoubleClick or "DFP". It automatically puts your image in an iframe, which makes it very difficult to change the actual size of the image.

So, as I changed the width of the images from pixels to percent, I made a div (this is 90% of the web page) wrapped around the image ad and then set the image width to 100%, so when the width of the wrappers changes when the browser is resized, the image is inside it will always fill the shell. But I do not know how to do all this, since the image is inside the iframe (stupid DFP !!!)

Here are the CSS codes for ... wrappers:

#div-gpt-ad-1362958263281-0 {width:90%; border:1px solid black;}

then the iframe that is in the wrapper:

 iframe {width:100%;}

and then the actual image in which I tried several CSS selectors and different div classes:

 .img_ad, a#aw0, iframe>.img_ad, iframe>#google_image_div>.img_ad {width:100%; display:block; border:1px solid red !important;}

If you test an element in Google Chrome on an ad image, you will see that CSS does not apply to the image. All I would like to do is change the width of the images as a percentage .. as well as the height to auto . Is it really that hard? Is this possible since the image is in an iframe? Is DFP for failure? I just don’t know ... But how would I change the code for the ad code? Any help will really be really appreciated by the guys! :)

Here is jsFiddle: http://jsfiddle.net/EptwH/3/

+1
source share
3 answers

iframe here is in a different domain. You cannot modify its contents using CSS or JS.

+1
source

I found that I can use synchronous loading in conjunction with Google's smart iframe so that I can break the link from my iframe and put it in my DOM.

Please note that I am passing the same identifier for the dfp code to my AdjustGoogleAd method. I was messing around with width / height attributes because we are on a responsive site.

 <script type='text/javascript'> (function () { var useSSL = 'https:' == document.location.protocol; var src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js'; document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>'); })(); </script> <script type='text/javascript'> googletag.defineSlot('{AD SLOT HERE}', [WIDTH, HEIGHT], 'dfp-div-id').addService(googletag.pubads()); googletag.pubads().enableSyncRendering(); googletag.pubads().enableSingleRequest(); googletag.enableServices(); $(function () { AdjustGoogleAd('dfp-div-id'); }); function AdjustGoogleAd(bannerId) { var banner = $('#' + bannerId); var contents = $('#' + bannerId + ' iframe').contents(); contents.find('a').clone().attr('id', bannerId + '_a').appendTo('#' + bannerId); var newLink = $('#' + bannerId + '_a'); newLink.siblings().remove(); newLink.find(".img_ad").removeAttr('height').removeAttr('width'); } </script>

With HTML:

 <div id='dfp-div-id'> <script type='text/javascript'> googletag.display('dfp-div-id'); </script> </div>
+3
source

Here is a jsfiddle example with an example of what I'm sure you want to do ... so yes, is it possible ... does the DFP terms violate another question!

http://jsfiddle.net/e3dUT/ (resize the panels to see that it works, only working 100% in chrome at the moment, but it should just be a matter of setting it up yet.)

 $.dfp({ dfpID: '12589173', afterAllAdsLoaded: function ($adUnits) { $('iframe').attr('width', '100%').attr('height', '100%'); $adUnits.each(function () { $contents = $(this).find('iframe:first').contents(); $contents.find('img').width('100%').height('auto'); }); } });

It uses jQuery DFP , which I created, but with a little work you could implement this in javascript too. >

+2
source

More articles:


All Articles