Displaying pictures under specific conditions

Question

Displaying pictures under specific conditions

I've recently completed the coding and CSS for my website after working on it for quite some time. Now, I want to enhance it by incorporating new features. The website is fully operational and generates revenue primarily through Google AdSense. I am interested in displaying different images based on whether Adblock is active or not.

Here is the method I found for detecting AdSense activity:

JS (saved as advertisement.js)

document.write('<div id="TestAdBlock" style="display:none;">an advertisement</div>');

The part of HTML code:

<div id="adblockFrame">
    <script type="text/javascript" src="js/advertisement.js"></script>
    <script type="text/javascript">
        if (document.getElementById("TestAdBlock") != undefined)
        {
            document.write('<img src="image1.jpg" alt="Image A">');
        }
        else
        {
            document.write('<img src="image2.jpg" alt="Image B">');
        }
   </script>
</div>

CSS:

#adblockFrame {
    visibility: hidden;
}

I am seeking assistance from someone who can help me modify the JS code to display images instead of text. My understanding of JS is limited, so any support would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

To start, I would generate an empty div to serve as the target:

<div id="adDetectionContainer"></div>

  <script type="text/javascript">
        if (document.getElementById("AdBlockTest") != undefined)
        {
            document.getElementById('adDetectionContainer').innerHTML="<img src='noAdBlockFound.jpg' alt='No ad blocker detected' />";
        }
        else
        {
            document.getElementById('adDetectionContainer').innerHTML="<img src='adBlockDetected.jpg' alt='Adblock detected!' />";
        }
   </script>

Answer 2

To start, I would generate an empty div to serve as the target:

<div id="adDetectionContainer"></div>

  <script type="text/javascript">
        if (document.getElementById("AdBlockTest") != undefined)
        {
            document.getElementById('adDetectionContainer').innerHTML="<img src='noAdBlockFound.jpg' alt='No ad blocker detected' />";
        }
        else
        {
            document.getElementById('adDetectionContainer').innerHTML="<img src='adBlockDetected.jpg' alt='Adblock detected!' />";
        }
   </script>

Answer 3

Answer №2

If you're using jquery, and I'm assuming you are based on the tag:

Here's how you can add a div element:

<div id="wheretoappend"></div>

Here is the javascript code:

var whereToAppend = '#wheretoappend';
 var myDiv = $('<div/>', {id: 'mydiv'});
 ($('#adblockFrame').length)
 ? myDiv.addClass('hasit').appendTo(whereToAppend)
 : myDiv.addClass('doesnt').appendTo(whereToAppend);

And the corresponding CSS:

.hasit  {background: url('hasit.png');}
.doesnt {background: url('doesnt.png');}

Answer 4

If you're using jquery, and I'm assuming you are based on the tag:

Here's how you can add a div element:

<div id="wheretoappend"></div>

Here is the javascript code:

var whereToAppend = '#wheretoappend';
 var myDiv = $('<div/>', {id: 'mydiv'});
 ($('#adblockFrame').length)
 ? myDiv.addClass('hasit').appendTo(whereToAppend)
 : myDiv.addClass('doesnt').appendTo(whereToAppend);

And the corresponding CSS:

.hasit  {background: url('hasit.png');}
.doesnt {background: url('doesnt.png');}

Answer 5

Answer №3

It is highly recommended not to use the document.write method in your code.

To add content to your page, utilize DOM methods or the .innerHTML property.
If you need to detect AdBlock, create a global variable in a file called advertisement.js.

Here is an example setup:

advertisement.js:

window.TestAdBlock = true;

Your webpage:

<div id="adblockFrame">
    <img id="TestAdBlock" alt="AdBlock Detected???" />
    <script type="text/javascript" src="js/advertisement.js"></script>
    <script type="text/javascript">
    (function() {
        var AdBlockImg = document.getElementById('TestAdBlock');
        if (window.TestAdBlock)
        {
            AdBlockImg.src = "/images/AdBlockDetected.jpg";
            AdBlockImg.alt = "AdBlock Detected!";
        }
        else
        {
            AdBlockImg.src = "/images/AdBlockNOTDetected.jpg";
            AdBlockImg.alt = "AdBlock NOT Detected!";
        }
        AdBlockImg.title = AdBlockImg.alt;
    });
   </script>
</div>

Answer 6

It is highly recommended not to use the document.write method in your code.

To add content to your page, utilize DOM methods or the .innerHTML property.
If you need to detect AdBlock, create a global variable in a file called advertisement.js.

Here is an example setup:

advertisement.js:

window.TestAdBlock = true;

Your webpage:

<div id="adblockFrame">
    <img id="TestAdBlock" alt="AdBlock Detected???" />
    <script type="text/javascript" src="js/advertisement.js"></script>
    <script type="text/javascript">
    (function() {
        var AdBlockImg = document.getElementById('TestAdBlock');
        if (window.TestAdBlock)
        {
            AdBlockImg.src = "/images/AdBlockDetected.jpg";
            AdBlockImg.alt = "AdBlock Detected!";
        }
        else
        {
            AdBlockImg.src = "/images/AdBlockNOTDetected.jpg";
            AdBlockImg.alt = "AdBlock NOT Detected!";
        }
        AdBlockImg.title = AdBlockImg.alt;
    });
   </script>
</div>

Answer 7

Answer №4

One should avoid using document.write in their code as it is considered bad practice. Here's an approach using jquery that I would recommend:

<div id="adblockFrame>
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
    var adsAllowed = adsAllowed || false;
    var src = adsAllowed ? '/images/myAd.png' : '/images/noAd.png';

    $('#ad').attr('src',src);
</script>
<img id="ad"/>
</div>

advertisement.js

var adsAllowed = true;

Answer 8

One should avoid using document.write in their code as it is considered bad practice. Here's an approach using jquery that I would recommend:

<div id="adblockFrame>
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
    var adsAllowed = adsAllowed || false;
    var src = adsAllowed ? '/images/myAd.png' : '/images/noAd.png';

    $('#ad').attr('src',src);
</script>
<img id="ad"/>
</div>

advertisement.js

var adsAllowed = true;

Displaying pictures under specific conditions

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Implementing line breaks in JSON responses in an MVC application

Creating clones of <li> elements using JQuery and appending them to the end of a <ul> list

Comparing strings in AngularJS

Adding JSON data to an array in Node.JS

Is there a way to transform a JavaScript array into JSON format in order to use it as the returned data from a RESTful API

Challenges regarding OAuth2 and the angular-auth2-oidc Library - Utilizing PKCE Code Flow

What is the best way to incorporate a sliding effect into my cookie form?

Troubleshooting problem with CSS alignment within Bootstrap framework

Load the React component asynchronously while waiting for the data to be fetched

AngularJs can manipulate the visibility of elements by showing or hiding them based

Comparison: NumberFormatter versus NumberFormat in PHP and JavaScript

How to Make Your Site/Content Fade In with jQuery Upon Loading?

What's the best way to execute multiple actions within a single gulp task?

Finding web page links from competition rankings using pattern matching

Inserting HTML content into a DIV with the help of jQuery

"Troubleshooting: Why isn't my Tailwindcss box shadow

How can I create a box-shaped outline using Three.js?

jQuery encountering error when uploading multiple files upon loading

Using JavaScript, include a child class into a parent class

vue-router incorrectly updates parameters upon reload