Please Help AdSense disappears

[osmartbm]

Hello, I need your help. I'm trying to put some Google DFP Adsense Banners in a sidebar, but when the sticky begins, all the banners disappear!!!.

The banner code is wrapped by

I dont know why, please i need your expertise.

[Mithgol]

There's nothing displayed after “The banner code is wrapped by” you wrote.

Please use syntax highlight marks (triple backticks) around the code you are quoting:

https://help.github.com/articles/github-flavored-markdown#syntax-highlighting

Update:   Now it looks fine.

[sarceda]

I'm having the exact same problem. It's weird, I couldn't found a possible cause.

I think it could be something about the iframes, because I also have troubles with a "Facebook Like Box" that "reloads" on scrolling when I use stick_in_parent(); on the sidebar where it is...

Any idea on what could be happening?

[sarceda]

It's definitely something with the iframes. In the case of the Facebook Like Box, when the surrounding DIV is attached (e.g. <div style="position: static; width: 0px; height: 2289px; display: block; vertical-align: baseline; float: right;">) the iFrame is reloaded.

In the case of DFP iframes, they simply load with an empty body.

Edit: I have found similar issues with DOM manipulation, like: https://github.com/ROMB/jquery-dialogextend/issues/8

I think it has something to do with this: "Browser function appendChild only copies DOM parameters and not content. Because of this modifying DOM position of iframe forcing lose it's content. Then browser reloads iframe to restore content."

[ehoch]

Has anyone found a fix for this?

[LouisDea]

Hey guys, I had the same problem...

What I did is adding the css property : -webkit-transform: translateZ(0) to the .sticky class.

It worked like a charm!

[ghost]

I have the same problem and translateZ solution didn't work for me.

[enfolded]

Same problem, roughly. My AdSense doesn't disappear, but it refreshes the ads when the parent gets stuck, and again when it goes back to original place. Seems like iFrames are reloaded when the plugin does its stuff? Any possible fix? Was previously using another sticky plugin that didn't do this, but it was very big and more complicated.

[trongrg]

I got the same problem and found the solution:

I have to wrap the sticky element with a wrapper, and pass that wrapper as spacer option. As the wrapper is the parent of sticky element, I also need to pass parent option in.

<div class="content">
  <div class="sidebar-wrapper">
    <div class="sidebar">
      This is a sticky column
      <iframe src="google-adsense.html" />
    </div>
  </div>
  <div class="main">
    This is the main column
    <p class="sub">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id
      leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam
      dignissim, augue at consectetur pellentesque, metus ipsum interdum
      sapien, quis ornare quam enim vel ipsum.
    </p>
    <p class="sub">
      In congue nunc vitae magna
      tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante,
      at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales
      venenatis. Curabitur nec est condimentum, blandit tellus nec, semper
      arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien
      nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut
      semper nisl.
    </p>
  </div>
</div>
<script type="text/javascript">
  $('.sidebar').stick_in_parent({parent: '.content', spacer: '.sidebar-wrapper'});
</script>

The offending code is at https://github.com/leafo/sticky-kit/blob/master/jquery.sticky-kit.coffee#L58 and https://github.com/leafo/sticky-kit/blob/master/jquery.sticky-kit.coffee#L127

[bogdangi]

We had the same errors with our specific ads.

So I do not add new wrapper I just set parent and add spacer.

<div id="content">
  <div id="sidebar">
    <div class="inner">
      This is a sticky column
      <iframe src="google-adsense.html" />
    </div>
  </div>
  <div id="main">
    This is the main column
    <p class="sub">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id
      leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam
      dignissim, augue at consectetur pellentesque, metus ipsum interdum
      sapien, quis ornare quam enim vel ipsum.
    </p>
    <p class="sub">
      In congue nunc vitae magna
      tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante,
      at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales
      venenatis. Curabitur nec est condimentum, blandit tellus nec, semper
      arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien
      nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut
      semper nisl.
    </p>
  </div>
</div>
<script type="text/javascript">
  $('#sidebar > .inner').after('<div class="sticky-content-spacer"/>');
  $('#sidebar > .inner').stick_in_parent({parent: '#content', spacer: '.sticky-content-spacer'});
</script>

[martynchamberlin]

I was having this exact problem and inserting a spacer div did the trick. Not 100% sure what the spacer even does (the documentation could be better for it) but glad to know this is the solution. Thanks @trongrg!

[sitegoals]

@bogdangi Fixed my issue, thank you!

[ghost]

@bogdangi @trongrg Had the same problem with Facebook Like box iframe and fixed it with your help. Thanks!

[skillmatic-co]

This method works, my ads no longer disappear, but now my offset_top option does not work. Any ideas?

[leafo]

Typically ads stop working because by default sticky kit has to move the iframe out and back in to the dom to create the spacer element. If you provide your own spacer element then that step is unnecessary. See the spacer option on http://leafo.net/sticky-kit/#reference

[ImranBug]

@bogdangi @trongrg You guys have no idea how many jobs you save :+1:

[davincho]

In my case spacer: false solved the issue.

[etoxin]

+1 spacer: false

[Probablybest]

+1 spacer: false This worked great for me. Thanks for all the information on this though. This thread saved me a lot of time.

[aaaa0441]

Thanks @trongrg. Specifying 'spacer' and 'parent' solved my issue!

[grund3g]

+1 spacer: false

[ricerc1]

+1 spacer: false

[meandkareem]

+1 spacer: false

[waqarit]

+1 spacer: false, thanks

[chupzzz]

spacer: false - works, but for my layout sidebar was jumping left-right because of changing position by plugin.

My sidebars has float: left and float: right. So when it gets to position: fixed my right sidebar jumping left because needs exact value for left. I added this small snippets for this case, maybe it will be useful for somebody with same problem.

First, we have to cache left value of sidebar:

$(".sidebar-2").each(function(){
      var $this = $(this);
      $this.data('fixed', $this.offset().left); // Left value for fixed position 
      $this.data('absolute', $this.position().left); // Left value for absolute (on bottom)
}); 

Then init sticky-kit with event handlers:

$(".sidebar-2").stick_in_parent({ spacer: false })
      .on("sticky_kit:stick sticky_kit:unbottom", function(e) {
      var $el = $(e.target);
      $el.css({ 'left': $el.data('fixed') });
})
    .on("sticky_kit:bottom", function(e) {
        var $el = $(e.target);
        $el.css({ 'left': $el.data('absolute') });
});

This is not a perfect code but can give you main idea and save your time.

[Pikamander2]

Another solution:

If your sticky sidebar has a unique class/ID that distinguishes it from a non-sticky sidebar, then you can just wait for it to appear:

<div id='sidebar_ad'></div>

<script>

function load_sticky_sidebar_ad()
{
	let sidebar_ad_container = document.querySelector('#sidebar_ad');

	if (sidebar_ad_container === null || sidebar_ad_container.closest('.theiaStickySidebar') === null)
	{
		(function(){window.setTimeout(load_sticky_sidebar_ad, 50);})();
	}
	
	else
	{
		googletag.cmd.push(function()
		{
			googletag.display('sidebar_ad');
		});
	}
}

(function(){window.setTimeout(load_sticky_sidebar_ad, 50);})();

</script>

Some modification might be needed depending on how your exact sticky sidebar works, but the general logic there should work for just about any sticky sidebar.