Manipulating body without using jquery

Helpdesk Website Builder
1

Hey guys. so basically i want to add a feature using 3rd party. for this case i want to add a page loader. but to do that i need to add a 1 html line of code and adding a body class. to do this i have to do a jquery code so it would add the said two lines. but the problem is that sitejet wont load and add when all the files and necessary conditions are loaded first. so the code for the said feature of the page loader would be loaded last as the file will be loaded at the end. I asked the support and told me that i can’t manipulate the body as it was fixed. and i can’t edit the body / html itself as it is {{content}} inside so if you added those lines of code, it would be inside and it would be loaded at the end. also i can’t add the conditions of the jquery to load first as the file will be loaded last.

So can you help me guys on other ideas on how will i manipulate the body at the end?

Thank you so much in advance in helping me

2

Hi! I don’t know if I understood exactly what you are describing, but I think I’ve identified 2 main pain points:

  1. Adding content inside the body tag

This is easy to do in SiteJet, basically you can control everything inside the body tag.

First, I think we need to clarify what the {{content}} means. The {{content}} is a placeholder for the content (that is) generated by the CMS Editor inside the body tag.

You can add additional HTML elements (inside the body tag) before or after the content through Asset manager → HTML

Here is an example:

<!-- I can have anything before content -->
<div id="my-loader"></div>
{{content}}
<!-- I can have anything after content -->
<script>
    console.log("I'm before the body close tag")
</script>

Everything that is inside the {{content}} can be controlled/edited using the visual user interface of CMS Editor. If you want to add additional (custom) HTML or JS scripts inside the {{content}} you can use (drag & drop) the HTML Element (Elements → HTML).

  1. Adding a class to the body tag

You can’t add directly a class to the body tag, but I don’t think you need it. If you want to select the body tag you can do it thought the tag itself in CSS or JS(jQuery).

Here is how to select the body tag in CSS

body {
  backround-color: red; // this is just an example
}

Here is how to select the body tag in JS(jQuery)

$('body').hide(); //this will hide the body

Hope this helps

3

hello @Lucian_Dinu . i understand what you mean. yes that would be easy if you’re adding the content inside the body. but apparently that’s not seem to be the problem as the issue was adding a class inside Body tag before it loads. not the other way around.

1
11490×950 162 KB

as you can see on the image the problem was that the body class would be added before it loads and apparently that was the default class sitejet has.

3
31379×726 35.7 KB

this was the code injected to the site. as you can see your advice and my code are the same but apparently the last one that the class has will not load. as mentioned above i tried adding that in the jquery file but it didn’t worked that way.

4
4884×729 334 KB

As mentioned also above, the class on the body the was injected thru would be loaded After everything necessary codes, files and animations are loaded. Thank you very much for your idea. maybe you have some more so i can try it.

4

Hi Hilarion, I understand that you want to add a class to the body tag, and you want to add this class before the page finish loading (if I’m wrong let me know).
I don’t know why you need this for a page loader, but here it is (you can try this code and see if works for you):

<div class="pageloader is-active"></div>
<div class="infraloader"></div>
<script>
document.body.classList.add("class_two");
</script>

{{content}}