I am trying to change the Static Ads on my site to Responsive Ads using the new Responsive Ad Units on Google Adsense
I am stuck and here's my code:
HTML:
<div class="g-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive-Forum-Bot -->
<ins class="adsbygoogle g-ad-in"
style="display:inline-block"
data-ad-client="ca-pub-client"
data-ad-slot="adnumber"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
CSS:
#media (min-width:500px){
.g-ad, .g-ad-in{
width:468px
}
.g-ad-in{
height:60px
}
}
#media (min-width:800px){
.g-ad, .g-ad-in{
width:728px
}
.g-ad-in{
height:90px
}
}
My problem is that the container changes width but the advertisement it self doesn't.
Am I doing something wrong? I used the guide on the top and followed it..
Thanks in advanced,
Din.
Two things:
1) You need to specify height for the css class "g-ad", since the container div has that class.
2) AdSense responsive ads aren't 100% responsive: the ad does not adapts to it's container on window resize, after you resize the window you have to refresh the page in order to see the ads in their new sizes.
Google is adapting the ads according to the ads container width and height when the page loads, of course we(the developers) are not 'too happy' about it, I read on AdSense blog that they plan to fix that.
Related
I want to create a chart from google sheet. I export the chart from the spreadsheet, I take a URL. But I cannot make it responsive because of the cors problem. So, I thought the whole iframe responsive by transform: scale? But it couldn't be a good solution. Have you any idea to make this iframe responsive?
Below is my snippet:-
<div
class="responsive"
>
<iframe
width="698.1827830188679"
height="305.5"
seamless
frameborder="0"
scrolling="no"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQuSWCpXJIwSPNJEE6iqzsJTxkPdSiL6uZaqph-CtMXh5QDw8Z9pESPB_0VenmhF4Dx6H5GLylHztAO/pubchart?oid=1827562470&format=interactive"
></iframe>
</div>
Also, you can check fiddle below,
https://jsfiddle.net/qtro2Lz5/
I am also facing this issue for this Google Spreadsheet published chart. Btw, your title is misleading, that's not Google Chart, which is another different product from Google to create truly proper web chart, which also can be responsive, and also using Spreadsheets data.
Back to the problem, the "Google Spreadsheet published chart" content itself is not responsive, it's not about how to make the iframe itself to be responsive.
Iframe can be responsive, but we cannot modify chart content from published Google Spreadsheet to be responsive, afaik.
I already trying some trick like these, which works great only for video and some responsive content website.
http://jsfiddle.net/marhensa/g9op54wx/
Also there's some other neat trick like this
https://codepen.io/alxfyv/pen/QEjEbp
but the problem is the iframe content must be also responsive.
If you simply want this to work and really simple, dont use iframe, use simple image responsive, simply change the end of your published Google Spreadsheet chart URL from format=interactive to format=image
The correct method to solve this problem is sadly only SCALING, like you said to transform/scale it in your question. If the content of wrapper is not responsive and you want dynamically resize it (text also will be smaller) like this
recorded example, then scaling it is. That example is a HTML text and some graphic page by the way, it behave like SVG / image file when it scaled.
Explained here: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript
Also done in Angular here: https://stackblitz.com/edit/angular-vagpoq
EDIT: If you can live with scaling and smaller text / thin lines, the working solution is using this JS + JQuery Scaling method in HTML head section, this written by yazzz here, kudos to her/him in that link, not in here.
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
// this script is written by yazzz https://stackoverflow.com/a/35819751/9894532
$(function() {
$("#wrapper").each(function() {
var $wrap = $(this);
function iframeScaler(){
var wrapWidth = $wrap.width(); // width of the wrapper
var wrapHeight = $wrap.height();
var childWidth = $wrap.children("iframe").width(); // width of child iframe
var childHeight = $wrap.children("iframe").height(); // child height
var wScale = wrapWidth / childWidth;
var hScale = wrapHeight / childHeight;
var scale = Math.min(wScale,hScale); // get the lowest ratio
$wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" }); // set scale
};
$(window).on("resize", iframeScaler);
$(document).ready( iframeScaler);
});
});
</script>
</head>
<body>
<p>Responsive and Dynamic Iframe Scaling of Published Chart from Google Spreadsheet</p>
<p>Courtesy of yazzz from Javascript StackOverflow</p>
<div id="wrapper">
<iframe width="500" height="294" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4wPFarqsHWgk0ubQ6bH3YC5iwvDayAkrDg0iNPipAAszBA26QnFaPC1Xk5g8XF1ixP7jnsxiaMzL/pubchart?oid=1495533449&format=interactive"></iframe>
</div>
</body>
Also you can view his/her implementation of my sample here in JS Fiddle
https://jsfiddle.net/marhensa/10radjqo
if i have fixed Navbar on the site, the Adsense appears over the top bar which is incorrect, if i have position relative the anchor ad appears above it, how to fix it?
Adsense has given a code to disable anchor ad from the top of your website and display it at the bottom. However, this code did not work for me.
from Disable anchor ads at the top of your page
Example
<head>
<script async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?
client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1234567890123456",
enable_page_level_ads: true,
overlays: {bottom: true}
});
</script>
</head>
Note: If you're using the AdSense code, you'll need to replace your ad code with the old Auto ads code shown in this example.
<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>
Even after changing width to 100%, it doesn't make it responsive. I am embedding this graph on WordPress website.
Put div around that iframe (as parent element), and set CSS "transform: scale(0.5)" to that div.
<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>
It will resize whole frame, including its content.
I have done a bit of looking around on the web for you and have several solutions. One of the most popular seems to be to use JQuery in order to resize the iFrame correctly.
A link to the script is found here: jQuery Responsive iFrame's
<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
var ri = responsiveIframe();
ri.allowResponsiveEmbedding();
</script>
<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
;(function($){
$(function(){
$('#myIframeID').responsiveIframe({ xdomain: '*'});
});
})(jQuery);
</script>
From there just make the iFrame have an ID of myIframeID or simply change the text in the script above to accommodate this.
Should this not work for you I would suggest using my Google Search string to finding other possible solutions: responsive iframe width
Good Luck!
In my facebook iframe application, my home page is little long (about 1500px) but the secondary pages are smaller in height.
I see there is a lot of white space between my footer and the facebook's footer in the secondary pages.
I checked the iframe source and found the height property is set correctly, but there is another height value inside style tag which is retaining the homepage height.
<iframe class="canvas_iframe_util noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="600px" style="height: 1566px; overflow-y: hidden; "></iframe>
Below is the code I am using to resize the frame (which is in the master page)
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId: 'my app',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true// parse XFBML
});
FB.Canvas.setAutoResize(7);
</script>
My secondary pages are dynamic in size, so I can not use a fixed height.
Any help to get ride the extra white space on my secondary pages are highly appreciated.
Thanks
I did a Facebook Canvas App the other day and I wrote this little code to take care of the height issue.
<script>
FB.Canvas.setSize({ height: document.getElementById('wrapper').offsetHeight });
</script>
Of course this code demands a <div id="wrapper"></div> to wrap the whole page.
You have to make sure all the things in the DOM has loaded before you fire it tho. That's why I put it just before the </body>. But there can sometimes be a bit of a problem with images with unspecified height. So either you specify the height of all your images or you could fire it with the help of jQuery and document.ready().
You could/should switch to using FB.Canvas.setAutoGrow(), since FB.Canvas.setAutoResize() will be deprecated shortly.
Then set the canvas height option in the app settings to: Settable (Default: 800px)
In your app, you can use FB.Canvas.setAutoGrow() without any parameters. I know this is essentially what you're doing already, but in my experience this has served me well. This also solves any problems when the height of your page changes after the initial page load.
How can I maximize the size of the div that plays the role of "content"?
I recognize that this may simply be a basic CSS question, but it feels like it is tied to CSS in jQueryMobile.
I'm placing a Google Map in the content div and I'd like the map to fill the available verticle space on the mobile browser. Instead, it's a fixed size of about 10px (give or take).
<div data-role="page">
<div data-role="header" class="ui-header ui-bar-a">Header</div>
<div data-role="content" class="ui-body ui-content">
<div id="divMap">google map via javascript</div>
</div>
<div data-role="footer">footer</div>
In this case, jQueryMobile always creates the minimal size for its contents, and I always want it to be 80% of the available page.
You could probably use jQuery (I haven't worked with jQuery mobile, though, so this might not work directly):
$(document).ready(
function(){
$('#content').height($(window).height()*0.8);
}
);
JS Fiddle demo