We Keep Coding

Create text and put it on page when it's loaded

I'm having a little problem with task for my new company. I need to write a script that basicly creates a html text and puts it on site using class selector (after a div to be sepcific). The problem is that we're using a custom CMS without any JS library so it has to be plain and the other obstacle I need to run only when element is loaded on page already (some kind of WaitForElement function is needed). JS noob here - can someone suggest a solution?
Thank you in advance
I've tried a simple solution:
node = document.getElementsByClassName('class1 class2');
node.insertAdjacentHTML('afterend', '<p>text</p>');
And I've put something like this:
function waitForElement(elementId, callBack) { window.setTimeout(function() { var element = document.querySelectorAll(elementId); if (element.length) { callBack(elementId, element);} else { waitForElement(elementId, callBack); }}}
However I'm struggling to merge those two and running them on site.

what CMS are you using?
Could you control the element?
I think you can use the MutationObserver API like this.
or call the function after the element loaded

How do I accurately insert my HTML into a Shopify shop via Script Tags?

I want to insert my block of HTML into a Shopify shop after a certain section but the problem is that each shop can use one of thousands of different themes, each one having a different DOM structure.
I can create the Script Tag and I can try to insert my HTML like this:
(function() {
var child = document.createElement("div");
var text = document.createTextNode("This is a test message");
child.appendChild(text);
var parent = document.getElementByClassName("ProductSection");
parent.appendChild(child);
})();
And this will work if the theme has a section with a class name of ProductSection but it won't for the majority of them that don't. Let's say I have an image gallery I'd like to show but only on Product pages and after the product description, what's the best way to select the product description DOM node so that I can insert my image gallery after it?
I found a couple threads with similar problems:
https://community.shopify.com/c/Shopify-APIs-SDKs/Using-Script-tag-to-add-dynamic-content-to-product-template/m-p/457855
https://community.shopify.com/c/Shopify-APIs-SDKs/Need-to-add-a-button-to-the-Product-page-via-a-Script-Tag/m-p/413919
and they seem to come to a similar conclusion, yet there are apps on the Shopify app market that do exactly this, and I wonder how do they do it?

As suggested in the links shared by you, it is not possible to correctly identify the DOM element in all the cases. However, there are couple of different approaches that can be used.
1) One is to ask merchant to add some specific element to markup that you can later use for rendering your content via JavaScript.
2) Try to guess the DOM element via some specific tag or href value, but allow merchants to override the DOM element selector via some JavaScript variable.
3) Use approach 2 with a combination of pre-determined info. Saw this approach used by AfterPay. They have a pre-defined array of popular themes along with their selectors. Then they use the theme name property from Shopify.theme.name
and get the relevant selectors. This solution may not work in all cases, so do allow the merchant to override DOM selector via some JavaScript variable.
Afterpay.supportedThemes = {
alchemy: {
product: {
"2017-12-14": {
selector: ".quadd-wrapper"
}
}
}
}
AfterPay JS Source Code
If you know of any other plugins, you can inspect the JavaScript and have a look how they identify the selectors.

Double Menu when Scrolling (More specifically YAML)

this is my first StackOverflow post. So I hope my question fits the standards.
I'm working on creating my own website using the YAML CSS Framework. ( http://www.yaml.de/docs/index.html )
On that page, they have it so as you scroll, the navigation menu stays at the top of the screen.
When I downloaded the framework, I found the below code in their domscript.js file.
So I understand that they added a class so it would stick.
What I would like to do is have a second menu of the same kind with different links right below it.
I copied and pasted the html code for the menu right below it and a second one did appear.
But as I scroll down, only the first one stays.
Any ideas on how I can get the second one to stay as well?
if (hOffset < top) {
if (nav.data(stickyClass) !== true) {
nav.addClass(stickyClass).data(stickyClass,true);
}
} else {
if (nav.data(stickyClass) !== false) {
nav.removeClass(stickyClass).data(stickyClass,false);
}
}

Yes, because an ID can use only once. If you want to this type of menu you have to create another id & copy the .js file & change the ID in that .js file.
I think this will work.

Best way to move html content from .js file to .html file - completed

I have links such that when the user clicks on them, the DOM is quckly updated using the methods below.
Basically, I just set the innerHTML document to the text and the page updates.
However I would like html code with other html code when applicable. This is the only place in my .js file that has a significant amount of text. How do I move this?
/*
link - quick dom links - would like to find a way to move this into xhtml where it belongs
*/
function o2(a,b)
{
return document.getElementById(a).innerHTML=b;
}
function l1()
{
........

I would recommend putting all of the possible HTML into your HTML file. Assign a unique id to each element and use CSS to hide them all or all but one by default (using 'display: none'). Then your javascript function can simply change CSS based on which html fragment you need to be visible.

how can I detect page when I compile all javascript to one file

I compile all my javascript for different pages into one file, so I have to identify page for my all.js. I can put a hidden element in my pages and let javascript detect this element, but I don't like this solution, are there any other ways to do this?

You could go by the url using location.href (or another field from the location object).
However, a better approach is using a data- attribute on the body tag, e.g. <body data-page="whatever"> and then using $('body').data('page') to retrieve the value.

If you script is based on pages, then compiling them into one script is a bad idea, load the file separately, it will be lighter and definately increase some performace.

I am not sure, why do you need this, but in general it is not good practice to change dynamicaly change content of javascript file, since you are disabling javascript cacheing, what can be performance issue later.
Any way, you can solve it from other side, what about using all.js just to detect the page, where are you and then you can use this information, to load right javascript file dynamicaly, like in the following example
document.write('<script src="'+location.pathname+'.js"></script>');
Which will load same file as you are on, just with .js extension. So for example on index.html page it will load index.html.js file

I almost always use MVC frameworks and tend to put my action and controller as classes on the body element
<body class="main_controller index">
Which lets you do things like this:
$(document).ready(function(){
//Only for lessons#search
if (!$(body).hasClass('lessons search')) {
return;
}
function close_style_filter_box() {
$('#style_filter_box').slideUp();
}
});
$(document).ready(function(){
//Only for main_controller#index
if (!$(body).hasClass('main_controller index')) {
return;
}
function do_something_else_on_this_age() {
....
}
});

Another way is using javascript variable:
var PAGE = 'page1';