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.
Related
Is it possible to force an element (lets say a div) atop every single other element as well as fullscreen (from video tag/iframe).
At the moment I'm trying with:
position: absolute
z-index: 2147483647
But it doesn't seem to go over fullscreen. (Tested on Chrome - 61.0.3163.100)
Why do I want to do this?
I want to display a kind of Notification I guess over fullscreen, so when they are watching an embed youtube video on the site, I can show them a notification that they normally wont see and might miss when in fullscreen.
It seems this has changed since recent releases of chrome as other SO answers proceed to give the suggestion I tried above and it has worked for them. Seemingly chrome changed something stopping this from working.
Seems to actually be because im trying to do this with a Angular Material component and for some reason something doesnt allow this to occur.
After checking it seems chrome doesn't even change anything to do with z-index in :-webkit-full-screen yes setting z-index on the fullscreen item and/or the div, wont work still.
Minimal, Complete and Verifiable example:
https://jsfiddle.net/ea3rbmo4/
Updated: https://jsfiddle.net/bw2ytwwb/
This one shows you exactly whats wrong, the red div goes in front, but the md-toast fails to.
<html ng-app="app">
<head>
<!-- AngularJS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<style>
md-toast {
z-index: 2147483647!important;
position: absolute!important;
}
</style>
<!-- Angular Controllers -->
<script>
var app = angular.module('app', ['ngMaterial', 'ngAnimate']);
app.controller('body', ['$scope', '$mdToast', function($scope, $mdToast) {
$mdToast.show(
$mdToast.simple()
.textContent("Test123")
.position('top right')
.hideDelay(999999)
);
}]);
</script>
</head>
<body ng-controller="body" layout="column" layout-align="center center" layout-fill style="background:#22282b">
<video controls="" autoplay="" name="media" type="video/mp4" src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
</body>
</html>
I am using animate.css for my Web site and i used a bootstrap carousel slider it is searched on google and placed in my website. Its working fine But after that my animate.css is not working properly means all animated elements in the HTML page are animating when page loading.
ex: i am using fadeInRight animated class below the page but it is not working when i am going to page down and when i refresh the page at that particular element its working fine. please solve this
please check the site
If you want to Reveal Animations When You Scroll, this is what you're looking for:
http://mynameismatthieu.com/WOW/
CSS animations cannot be delayed based on the scroll position. So, first, you'll need to download and include the wow.min.js file to your page like this:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
And then add the animation to your html element by adding the class 'wow' followed by the animation name in animate.css:
<section class="wow slideInLeft">
</section>
For more advanced options related to timing the delay etc, refer: http://mynameismatthieu.com/WOW/docs.html
You can use wow.js for animating elements when it's on viewport area.
HTML:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
CSS:
<link rel="stylesheet" href="css/animate.css">
js:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
check the jquery plugin wow.js
<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!
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.
I've made a website using WordPress. The problem is the blank slide after the last image. I've checked in Firefox firebug there is not any blank slide or script in code but it is shown in the original site.
Any known solution then help me out.
I just noticed you have this line
<script type="text/javascript" src=".../wp-content/themes/twentyten/js/startstop-slider.js"></script>
and then you have the same code again inside that page
<div id="detail_slider">
<script language="javascript">
...
...
</script>
Try removing that external startstop-slider.js file from the page. Maybe they are interfering with each other.