Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Watch elements as page loads
const targets = ["#top-header", "#main-header"];
const config = {
attributes: true,
attributeOldValue: true,
subtree: true,
childList: true,
};
function logAllEvents(target, myElement) {
console.log(`Monitoring ${target}`, myElement);
var observer2 = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation);
if (mutation.type === "childList") {
mutation.addedNodes.forEach(node => logAllEvents("child", jQuery(node).get(0)));
}
});
});
observer2.observe(myElement, config);
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type !== "childList") return;
targets.forEach(target => {
mutation.addedNodes.forEach(node => {
if (node.nodeType !== 1) return;
if (node.matches(target)) {
var targetElement = jQuery(node).get(0);
console.log("My Element Is Ready!", targetElement);
logAllEvents(target, targetElement);
}
});
});
});
});
observer.observe(document.documentElement, {
childList: true,
subtree: true,
});
console.log(`Ready State: ${document.readyState}`);
document.addEventListener("readystatechange", () => console.log(`Ready State: ${document.readyState}`));
const targets = ["#top-header", "#main-header"];
function isElementVisible(elm, evalType) {
evalType = evalType || "visible";
try {
var vpH = jQuery(window).height(), // Viewport Height
st = jQuery(window).scrollTop(), // Scroll Top
y = jQuery(elm).offset().top,
elementHeight = jQuery(elm).height();
if (evalType === "visible") return y < vpH + st && y > st - elementHeight;
if (evalType === "above") return y < vpH + st;
} catch (err) {
return false;
}
}
function elementsFromPoint(x, y) {
var elements = [];
var display = [];
var item = document.elementFromPoint(x, y);
while (item && item !== document.body && item !== window && item !== document && item !== document.documentElement) {
elements.push(item);
display.push(item.style.display);
item.style.display = "none";
item = document.elementFromPoint(x, y);
}
// restore display property
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = display[i];
}
return elements;
}
function getDetails(el) {
const ret = [];
ret.push(`left=${el.offsetLeft},top=${el.offsetTop}`);
ret.push(`Visible: ${jQuery(el).is(':visible')}, offsetWidth=${el.offsetWidth}, height:${el.offsetWidth}`);
ret.push([el.tagName, el.id, el.attributes, el.classList]);
return ret;
}
const handler = e => {
let logo = document.getElementById("logo");
console.log(`Event ${e.type}: `);
targets.forEach(target => {
let el = jQuery(target)[0];
var visible = jQuery(target).is(':visible');
const elems = elementsFromPoint(logo.offsetLeft, logo.offsetTop);
console.log(`${target} is now ${visible ? "visible" : "hidden"} at ${logo.offsetLeft},${logo.offsetTop} by `, elems);
});
const details = [];
while (logo) {
details.push(getDetails(logo));
if (logo.id === "page-container") break;
logo = logo.parentNode;
}
console.log(`Parents of logo: `, details);
};
setTimeout(() => handler({ type: "timer " + (i + 1) + "s" }), 8000);
setTimeout(() => handler({ type: "timer " + (i + 1) + "s" }), 12000);
//jQuery
// jQuery(window).on("DOMContentLoaded load resize scroll", handler);
console.log(`Ready State: ${document.readyState}`);
document.addEventListener("readystatechange", () => console.log(`Ready State: ${document.readyState}`));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.