Free Sidebar Gadgets for Windows 11/10/8.1/7 Desktop

TRANSLATE

Dear users. Some time ago, accuweather.com stopped providing data in XML format for the gadget. All of your gadgets are showing an Internet connection error. I'm working on it. Unfortunately, with constant air raids and missile strikes on my city (I live in Ukraine), the work is proceeding extremely slowly and I have no confidence that it will ever be completed. Thanks for understanding.

Can anybody help me to translate few my gadgets to other languages (Korean, Thai, Vietnamese, etc.)? If you’re that person, please call me using the contact form.

Try our new tools: Geomagnetic Storms Sidebar Gadgets Recent Indicator, Hocus pocus Sidebar Gadgets Recent Indicator, Write your name in nautical flags, Write your name in Old Norse viking runes.

The utilization of Mutation Observer in conjunction with the data-ad-status attribute

The Mutation Observer provides an excellent opportunity for you to unleash your creativity and achieve remarkable levels of customization. You might have come across empty spaces on websites where advertisements are supposed to appear. However, due to factors like a shortage of ads that meet your specific criteria, Google AdSense may fail to display ads within your ad container. Thankfully, there are numerous ways to detect such occurrences, allowing you to implement necessary solutions and significantly enhance the user experience on your website.

If you’re eager to take customization to the next level and want to closely monitor any changes to the data-ad-status attribute for AdSense ad units, the JavaScript Mutation Observer is the perfect tool for you. By utilizing this feature, you can detect and respond to modifications in real-time, enabling you to implement various fixes and deliver an enhanced browsing experience to your website visitors. So, if you’re looking to add a touch of uniqueness and excitement to your ads container, the Mutation Observer is the key to unlock a world of limitless possibilities.

How Setting Up Mutation Observer

It’s important to understand that there are several methods available to eliminate empty spaces left by unfilled ads. While a CSS approach can be utilized, the most effective solution involves leveraging JavaScript. By employing JavaScript techniques and DOM manipulation, you gain the ability to customize any element based on attribute changes, providing you with a wide range of additional customization options.

In this article, we will focus on monitoring attribute changes as a means to customize ad containers. Specifically, we will target the “data-ad-status” attribute. To achieve this, we will utilize the built-in Mutation Observer object, which enables us to detect real-time changes within the DOM tree. We will verify its functionality by using the “console.log()” method to log the detected changes.

To begin, we need to assign an ID to the “ins” tag representing the AdSense ad unit. This allows us to conveniently access the element. Subsequently, we will initialize the element using this ID, declare the Mutation Observer object, and observe the desired attribute. By utilizing the “console.log()” method within the observer’s callback function, we can gather valuable information such as the mutations, attribute names, and corresponding values.

Now, let’s delve into the HTML and JS code required to set up the mutation observer and perform these tasks.

By following these steps, we will be able to actively listen for attribute changes in order to customize ad containers effectively.

HTML

<div class="adcontainer">

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?
client=ca-pub-xxxxxxxxxxxxxxxx" crossorigin="anonymous"></script>
<!-- My AD -->
<ins class="adsbygoogle"
	id="adunit"
	style="display:block"
	data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
	data-ad-slot="xxxxxxxxxx"
	data-full-width-responsive="true"
	data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

CSS

.adcontainer{
	position: relative;
	width:336px;
	height:306px;
	padding:6px;
	margin-right:20px;
	top:-10px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-khtml-border-radius:4px;
	border-radius:4px;
	-webkit-box-shadow:3px 3px 10px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow:3px 3px 10px 0px rgba(0, 0, 0, 0.1);
	box-shadow:3px 3px 10px 0px rgba(0, 0, 0, 0.1);
 }

JS

document.addEventListener("DOMContentLoaded", observingchange);

function observingchange(){
 //Mutation Observer code
 const checkid = document.getElementById("adunit");
 const observer = new MutationObserver (mutations => { 
  console.log(mutations); 
  mutations.forEach (record => { 
   if (record.type === "attributes"){
    const attrname = record.attributeName;
    const attrvalue = record.target.getAttribute(attrname);
    //check on the console
    console.log("attribute-name = ", attrname);
    console.log("attribute-value = ", attrvalue);
   }
  });
 });
 observer.observe(checkid, {attributes : true, attributeFilter : ["data-ad-status"]});
}

Checking Specific IDs

Having initialized our mutation observer with an element’s ID, let’s proceed by adding two additional elements. Feel free to include as many elements as needed. Alternatively, you can use the querySelector method to select multiple elements.

Now, we will check for the “data-ad-status” attribute with the value of “filled” (which can also be “unfilled”). To ensure accuracy, we should include an additional condition within the if statement to verify the specific element (in this case, the “ins” tag). When the attribute has the value “filled” and corresponds to the targeted ID, the code inside the if statement will be executed.

JS

document.addEventListener("DOMContentLoaded", observingchange);

function observingchange(){
 //Mutation Observer code
 const checkid = document.getElementById("adunit");
 const checkid1 = document.getElementById("adunit1");
 const checkid2 = document.getElementById("adunit2");
 const observer = new MutationObserver (mutations => { 
  console.log(mutations); 
  mutations.forEach (record => { 
   if (record.type === "attributes"){
    const attrname = record.attributeName;
    const attrvalue = record.target.getAttribute(attrname);
    //check on the console
    console.log("attribute-name = ", attrname);
    console.log("attribute-value = ", attrvalue);
    if (attrvalue === "filled" && record.target.id === "adunit"){
     //changes border for specific "adunit" ID only
     document.getElementById("adcontainer").style.border = "#9875BB 3px solid";
    }
   }
  });
 });
 observer.observe(checkid, {attributes : true, attributeFilter : ["data-ad-status"]});
 observer.observe(checkid1, {attributes : true, attributeFilter : ["data-ad-status"]});
 observer.observe(checkid2, {attributes : true, attributeFilter : ["data-ad-status"]});
}

Remove Ad When It’s Unfilled

After successfully modifying the background color of our ad container when the ad unit is filled, we will now implement a different action when the ad unit has a “data-ad-status” of “unfilled”. In this case, we will set the display property of the container element to “none” using inline styling. This action will effectively remove the div or element containing the ad unit from the DOM tree.

By eliminating the element from the DOM, we can free up memory and space, thereby improving page performance and enhancing the overall user experience. To achieve this functionality, we will leverage the power of JavaScript and the Mutation Observer, enabling us to detect and respond to attribute changes in real-time.

JS

document.addEventListener("DOMContentLoaded", observingchange);

function observingchange(){
 //Mutation Observer code
 const checkid = document.getElementById("adunit");
 const observer = new MutationObserver (mutations => { 
  console.log(mutations); 
  mutations.forEach (record => { 
   if (record.type === "attributes"){
    const attrname = record.attributeName;
    const attrvalue = record.target.getAttribute(attrname);
    //check on the console
    console.log("attribute-name = ", attrname);
    console.log("attribute-value = ", attrvalue);
    if (attrvalue === "unfilled" && record.target.id === "adunit"){
     //hides container where place AD with specific "adunit" ID
     document.getElementById("adcontainer").style.display = "none";
    }
   }
  });
 });
 observer.observe(checkid, {attributes : true, attributeFilter : ["data-ad-status"]});
}

Further and Additional Customization As Needed

The remarkable aspect of utilizing JavaScript is the level of control it provides over the DOM. Unlike CSS methods such as styling the ad-container, JavaScript empowers you to exert precise influence. By employing a Mutation Observer, you can incorporate additional conditions within an if statement. For instance, you can target specific screen sizes and dynamically adjust borders, paddings, backgrounds, and more accordingly. We are merely demonstrating the potential here; ultimately, you have the freedom to explore and experiment extensively with these capabilities.

JS

document.addEventListener("DOMContentLoaded", observingchange);

function observingchange(){
 //Mutation Observer code
 const checkid = document.getElementById("adunit");
 const observer = new MutationObserver(mutations => { 
  mutations.forEach(record => { 
   if (record.type === "attributes"){
    const attrname = record.attributeName;
    const attrvalue = record.target.getAttribute(attrname);
    if (attrvalue === "filled" && record.target.id === "adunit" && window.matchMedia("(min-width:768px)").matches){
     document.getElementById("adcontainer").style.backgroundColor = "#F26324";
     document.getElementById("adcontainer").style.border = "#9875BB 3px solid";
     document.getElementById("adcontainer").style.backgroundImage = "linear-gradient(to top, #FF9800 0%, #F26324 50%, #E65100 100%)";
    }
    if (attrvalue === "unfilled" && record.target.id === "adunit" && window.matchMedia("(max-width:767px)").matches){
     document.getElementById("adcontainer").style.display = "none";
    }
   }
  });
 });
 observer.observe(checkid, {attributes: true, attributeFilter: ["data-ad-status"]});
}

Final Words

The Mutation Observer object is a highly potent tool that we highly recommend delving into and learning more about. To gain additional insights into mutation observers, we suggest referring to this link, which provides comprehensive information on various aspects, including disconnecting observers and other relevant topics. While researching and familiarizing ourselves with this subject, we encountered certain complexities, particularly with the author’s demonstration of its usage. However, our aim is to present it to you in a simplified and functional manner that is easy to comprehend and apply. We think we have taken great care to ensure that our explanation is straightforward, enabling you to grasp the concept effortlessly and put it into practice.