snippets/adsplacement-test at master · websitecareio/snippets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<div class="floatingads left" style="width:300px;height:600px;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1181981315600718"
     crossorigin="anonymous"></script>
<!-- Responsiv Lodret -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1181981315600718"
     data-ad-slot="2179840543"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<div class="floatingads right" style="width:300px;height:600px;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1181981315600718"
     crossorigin="anonymous"></script>
<!-- Responsiv Lodret -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1181981315600718"
     data-ad-slot="2179840543"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>


<script>
jQuery(document).ready(function($) {
  $(window).resize(resizeAds);
  resizeAds();

  function resizeAds() {

	  // Get the widths
	  var browserWidth = $(this).width();
	  var browserHeight = $(this).height();
	  var siteContentWidth = $('.site-content').width();
	  var availableSpace = browserWidth-siteContentWidth-20; // Available space minus 10px around sides
	  var offsetHeight = $('.site-header').height()+40;

	   $('.floatingads').css('top', offsetHeight);

	  // If creensize is lower than 1600px, then hide the sticky ads.
    if (browserWidth < 1600) {
      $('.floatingads').hide();
    } else {
      $('.floatingads').show();

		var leftSpace = (browserWidth - siteContentWidth) / 2;
      var rightSpace = (browserWidth - siteContentWidth) / 2;
	 var maxAdWidth = 300;

		if(leftSpace > maxAdWidth) {
      $('.floatingads.left').css('width', maxAdWidth);
      $('.floatingads.left').css('left', (leftSpace-maxAdWidth)/2);
		} else {
      $('.floatingads.left').css('width', leftSpace);
      $('.floatingads.left').css('left', 0);
		}

	 $('.floatingads.left').css('height', browserHeight);


	if(rightSpace > maxAdWidth) {
      $('.floatingads.right').css('width', maxAdWidth);
      $('.floatingads.right').css('right', (rightSpace-maxAdWidth)/2);
		} else {
      $('.floatingads.right').css('width', (rightSpace-maxAdWidth)/2);
      $('.floatingads.right').css('right', 0);
		}

		$('.floatingads.right').css('height', browserHeight);

    }
  }
});

</script>
		<style>
		.floatingads {
  position: fixed;
  z-index: 1;
  top:0;
}


@media only screen and (max-width: 1500px) {
  .floatingads {
    display: none;
  }
}

		</style>