Add some content before (/after) an html tag

JavaScript
1

So far in my website ads appears only in desktop screens.
I wonder how to show ads even in small screens, with a minimum change of php code.
I.g. I’m wondering if it could be possible to add an ads content (with a php variable) before every h2 tag of a webpage.
I saw this script, but it works clicking a button: how get it working opening a page?

EDIT

I tried unsuccessfully this:

//adding ads in small screen
    var phpads  = "<?php echo "<div id='pubsmall' class='slideshow-container' role='complementary'>$ads_vertical</div>\n"; ?>";
    $(window).on('load', function() {
    $("h2").prepend("phpads");
     });

EDIT

Something like this works on a single attempt-page, but not in my website

<?php
  $adsmall = "<div id='pubsmall' class='slideshow-container' role='complementary'>$ads_verticale_libromese</div>";
 ?>
 <script>
  //adding ads in small screen
  var phpads  = "<?php echo "$adsmall"; ?>";
  $(window).on('load', function() {
  $("h2").prepend(phpads);
  });
 </script>
2

But now I wonder if it would be a good idea to put automatically an ad before every h2…
In some pages it could fit, but others, with many h2 it would be too heavy…
Maybe I should add a css nth: to set only the second and the fourth h2.

EDIT

this code works on a separate page

<?php
 $some_book="<div id='null'><a href='someurl'><img  src='some image'  /></a></div>";
 $prova ="<div id='pubsmall' class='slideshow-container' role='complementary'>$some_book</div>";
?>

<script>
var phpads  = "<?php echo "$prova"; ?>";
$(window).on('load', function() {
  $("h2:nth-of-type(2n+0)").prepend(phpads);
 });
</script>

EDIT

I found the problem (a carousel script). Now, with a “simple” variable php I have a code working.
But I should fix a grafic problem: the div added (via jquery) is within the h2 tag… (quite ugly)

EDIT

Fixed also this problem, using .before instead of .prepend

$("h2:nth-of-type(2n+0)").before(phpads);

3

But to alternate variable (so that be shown alternatively B and B) how should adapt this code?

<?php
  $adsmalls = array($adsmall1,$adsmall2);
  shuffle($adsmalls);
 ?>
 <script>
  var phpads  = "<?php echo "$adsmalls[0]"; ?>";
  $(window).on('load', function() {
  $("h2:nth-of-type(2n+0)").before(phpads);
  });
 </script>

With this code I see always $adsmall1 …

5

Hi @web148, mixing JS and PHP logic is notoriously error prone and hard to reason about. Maybe consider rendering your ad markup in template elements, and then use JS for your actual alternating logic… something like this:

<template class="adsmall">
  <?php echo $adsmall1; ?>
</template>

<template class="adsmall">
  <?php echo $adsmall2; ?>
</template>

<script>
const adsmalls = $('.adsmall')

$('h2:nth-of-type(2n+0)').each(function (index) {
  const current = adsmalls[index % adsmalls.length]
  $(this).prepend(current.content.cloneNode(true))
})
</script>
2 Likes
6

Thank you. I will try it.

EDIT

Uhm… if I understand, to use your code I should put an html element (template) in every place of my webpages where I want to show the ads: shouldn’t I?
But in this way I would have a lot of code to add, while I was seaching a way to automatize with the less code possible the ads in small screens.

EDIT

Therefore I played whth your code:

<script>
 const adsmalls = $('h2')

 $('h2:nth-of-type(2n+0)').each(function (index) {
   const current = adsmalls[index % h2.length]
   $(this).prepend(current.content.cloneNode(true))
 })
</script>

Just my stupid attempt… (don’t working)

1 Like
7

Let me go back to my previous code.

This code works (giving me a random $banner):

$banners = array($banner1, $banner2, $banner3, $banner4, $banner5);
  shuffle($banners);
  echo $banners[0];

My question could be very simple: how should I modify that code to get not a randomized succession (suite), but an ordered one (that is first $banner1, then $banner2, and so on)?

EDIT

Or better that code works, also in this way:

 <?php  $adsmalls = array($adsmall1, $adsmall2);
  shuffle($adsmalls);
 ?>
 <script>
  var phpads  = "<?php echo "$adsmalls[0]"; ?>";
  $(window).on('load', function() {
  $("h2:nth-of-type(2n+0)").before(phpads);
  });
 </script>

… but not in my desired mode: that is, all the ads are the same (in a given moment) and are changed (all together) every refresh.
While I want that any ads be different from others in the same time.
What I want (maybe I’m wrong from from a marketing point of view, I don’t sure) is a php (or css) code that put a different ads in different places of a webpage.

8

So far I choose this solution:

 <script>
  //adding ads in small screen
  var phpads1  = "<?php echo "$adsmall1"; ?>";
  $(window).on('load', function() {
  $("h2:nth-of-type(4n)").before(phpads1);
  });
  var phpads2  = "<?php echo "$adsmall2"; ?>";
  $(window).on('load', function() {
  $("h2:nth-of-type(5n)").before(phpads2);
  });
  var phpads3  = "<?php echo "$adsmall3"; ?>";
  $(window).on('load', function() {
  $("h3:nth-of-type(2n)").before(phpads3);
  });
  var phpads4  = "<?php echo "$adsmall4"; ?>";
  $(window).on('load', function() {
  $("h3:nth-of-type(3n)").before(phpads4);
  });
 </script>

It somehow works …

9

Just once per page and ad. It’s a simple wrapper around your ad markup and shouldn’t be much overhead really.

You’re assigning the first element of the PHP array to a JS variable here, and then adding that very same element to the DOM over and over. In order to loop over the ads, you need a JS collection of those ads, which could be achieved using templates as shown above.

Edit: Not exactly best practice but kinda okay, another way would be to dump the array of ads as JSON like so:

<?php
$adsmalls = json_encode([$adsmall1, $adsmall2]);
echo '<script>window.adsmalls =' . $adsmalls . '</script>';
?>

… which you could then use in your regular JS as before:

<script>
  $('h2:nth-of-type(2n+0)').each(function (index) {
    $(this).prepend(adsmalls[index % adsmalls.length])
  })
</script>
1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.