check if an element exist in dom when page change

Question

I'm creating a simple chrome extension. I want to apply some style rules when a certain element is present on the DOM. After an inspection of the website where I want to apply that modification, I saw that the interested element is created only on certain pages and isn't present anywhere on the site. How I can apply these rules using jquery? Here is the code I'm testing but without success:

(function($){ $(document).ready(function(){ var el = $('.e-overlay--adblock'); if(el.length){ el.css({'opacity':'0'}); console.log('Extension Started!'); } }); }(jQuery));

I've also tried with this solution but without success:

I think that the problem is also with the class of the element that is .e-overlay .e-overlay__modal .e-overlay--full .e-overlay--adblock

 $(document).ready(function(){ var el = $('.e-overlay')[0]; // Create an observer instance linked to the callback function var observer = new MutationObserver(function(){ el.css({'opacity':'0'}); console.log('Extension Started!'); }); // Start observing the target node for configured mutations observer.observe(el, config); // Later, you can stop observing observer.disconnect(); });

the mutation observer will give me this error:

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

Where is config declared? Does $('.e-overlay') select more than one element? Please add more information to your question including and example of the HTML so we can see exactly what you are attempting here. Does the target element include ALL of those classes at the same time? Does the element exist upon initial render or is it dynamic and created later thus require something like MutationObserver here? — Mark Schultheiss
– Mark Schultheiss, Commented Jul 7, 2019 at 13:38

agtabesh · Accepted Answer · 2019-07-07 13:27:26Z

(function(win) { 'use strict'; var listeners = [], doc = win.document, MutationObserver = win.MutationObserver || win.WebKitMutationObserver, observer; function ready(selector, fn) { // Store the selector and callback to be monitored listeners.push({ selector: selector, fn: fn }); if (!observer) { // Watch for changes in the document observer = new MutationObserver(check); observer.observe(doc.documentElement, { childList: true, subtree: true }); } // Check if the element is currently in the DOM check(); } function check() { // Check the DOM for elements matching a stored selector for (var i = 0, len = listeners.length, listener, elements; i < len; i++) { listener = listeners[i]; // Query for elements matching the specified selector elements = doc.querySelectorAll(listener.selector); for (var j = 0, jLen = elements.length, element; j < jLen; j++) { element = elements[j]; // Make sure the callback isn't invoked with the // same element more than once if (!element.ready) { element.ready = true; // Invoke the callback with the element listener.fn.call(element, element); } } } } // Expose `ready` win.ready = ready; })(this);

And usage:

ready('.e-overlay--adblock', function(element) { // do something });

It's the same code I'm using now, you removed only the no conflict mode of jquery? The problem is that the element is present only on certain pages of the website.
It's ok. If an element with class e-overlay--adblock exists, the code within if block will run. Could you explain what exactly the problem is?
The problem is that the css rule is not applied. I've found the correct class of the element that is .e-overlay--full, now the console will log the message and to debug I've logged also the element r.fn.init [div.e-overlay.e-overlay__modal.e-overlay--full.e-overlay--adblock, prevObject: r.fn.init(1)], but I need to apply the style. this element has an inline rule I need to override it.
I updated my answer, please take a look. You are update style before it gets initialized.
Tested your code, I got this error jQuery.Deferred exception: ready is not defined

Oshione · Accepted Answer · 2019-07-07 14:44:14Z

I've found a dirt solution to the problem. After some debug and various code alternatives test, I've tried to simply set the display property on none. This worked, but I don't like it as a solution.

(function($){ $(document).ready(function(){ var el = $('.e-overlay--full'); if(el.length){ console.log('Extension Started!'); setTimeout(function(){ el.css({'display':'none'}); }, 1000); } }); }(jQuery));

To be sure that the modal will be not displayed, I've also injected a css rule to remove the opacity:

.e-overlay--full{ opacity: 0 !important; }

Collectives™ on Stack Overflow

check if an element exist in dom when page change

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related