Code to automatically insert HTML into certain points on the page?

Question

Is there any code that I could add to the header of every page that would insert HTML at 2 or 3 points on a page (probably in the body), spread out evenly? This would be amazing for the platform that I am currently working on.

For example, maybe you wanted to embed a video using this. Ideally, I could put the code in the header, and it'd insert it 2 or 3 times in the body -- spread evenly.

It's possible. How it's done would be quite specific to the HTML in question. — ceejayoz
– ceejayoz, Commented Jul 10, 2016 at 3:18
Doesn't matter what you're injecting. You're going to have to write some custom JS that you put in the header/footer you have access to. What it does will depend on the HTML structure of the pages you're trying to affect. — ceejayoz
– ceejayoz, Commented Jul 10, 2016 at 3:24
Oh sorry, I didn't get what you meant by that. Any suggestions for a page like izzofit.com? — Jared Caputo
– Jared Caputo, Commented Jul 10, 2016 at 3:26

Jeremy Womack · Accepted Answer · 2016-07-10 04:25:15Z

1

Here you go: https://jsfiddle.net/westryder907/808xtyq7/

$(document).ready(function() {

  $('.body > div').each(function(i, el) {
    if (i % 3 === 0) {
      $(this).append(" Inserted text via jQuery 2.2");
      if (i > 3) {
        return false;
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <div class="body">
    <div class="region1">
      Region1
    </div>
    <div class="region2">
      Region2
    </div>
    <div class="region3">
      Region3
    </div>
    <div class="region4">
      Region4
    </div>
    <div class="region5">
      Region5
    </div>
    <div class="region6">
      Region6
    </div>
    <div class="region7">
      Region7
    </div>
    <div class="region8">
      Region8
    </div>
    <div class="region9">
      Region9
    </div>
    <div class="region10">
      Region10
    </div>
  </div>
</div>

edited Jul 10, 2016 at 4:25

answered Jul 10, 2016 at 3:36

Jeremy Womack

607 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jared Caputo Over a year ago

This works very well, thank you. Is there any way to make it only do it 2 or 3 times, though? Also, any way to make it skip a div class or two, or space them out evenly? (reason being the structure of the page has many, many of the same div classes and I would need that for it to work perfectly)

Jared Caputo Over a year ago

This would actually be critical, then it would work absolutely perfectly!

Jared Caputo Over a year ago

Thanks for that. The issue is, they're all <div class="region1">...any ideas for how to deal with this?

Jared Caputo Over a year ago

Oh wait, never mind! It works perfectly! Thanks so much!

Jeremy Womack Over a year ago

The jquery doesn't look at class names it looks at the element which is DIV, which they all are.. It iterates through them an on every odd one up to 3 it inserts new content. the class names are just there because I added them there so it wouldn't look so repetitive.

|

Jeremy Womack · Accepted Answer · 2016-07-10 03:19:33Z

0

Why not just edit your code and manually insert content from an external file with PHP?

I think more information is needed to fully understand why you'd want to approach this with your current method. It just doesn't make much sense to me why you would want to do it like this?

answered Jul 10, 2016 at 3:19

Jeremy Womack

607 bronze badges

1 Comment

Jared Caputo Over a year ago

Sorry for not including more information -- I'm currently investigating using a platform that is too limiting for me to do that. For example, I could go in and modify every single page and add the HTML, but I would have to do that page by page, post by post. I can't edit the code behind everything that's on the front end. But, I can insert code into the headers and footers, which is why I'm exploring this solution. Short: I can't edit CSS and JS and can only edit pages individually -- not like template files -- but can add code to the header and footer for the entire website. Platform = limit

Collectives™ on Stack Overflow

Code to automatically insert HTML into certain points on the page?

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related