Prevent the clustering of advertisements using jQuery

Question

Prevent the clustering of advertisements using jQuery

jQuery(document).ready(function(){
    var insertionTemplate = jQuery(".hiddenAdBox").eq(0).html(),
        insertionTarget = jQuery('ul'),
        insertionTargetChildren = insertionTarget.find('li'),
        insertionFrequency = 2;

    var random;
    for (var i = 0; i < insertionFrequency; i++) {
        random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
        insertionTargetChildren.eq(random).after(insertionTemplate);
    } 

});

I have a list of items and want to display ads randomly when the page is refreshed. However, with an ad count of 2 (insertionFrequency = 2), there are times when they appear close together. How can I prevent this and ensure that ads do not show up near each other?

Here are screenshots for reference: https://i.sstatic.net/O3d9J.jpg

https://i.sstatic.net/DWZuK.jpg

javascript jquery html css ads

Answer 1

Answer №1

If you want to prevent advertisements from appearing horizontally on your website, you can use the following code snippet:

for (var i = 0; i < insertionFrequency; i++) {
    random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
    if(insertionTargetChildren.eq(random).next('.placeforad').length || insertionTargetChildren.eq(random).prev('.placeforad').length) 
    //check whether its previous li or next li has ad with class .placeforad
    {
        i--; //decrease the count so as to come up with separate random number
    }
    else
       insertionTargetChildren.eq(random).after(insertionTemplate);
}

View DEMO

Preventing ads from displaying vertically can be trickier, especially when dealing with rows of different sizes. If each row has an equal number of squares, there are methods that can help achieve vertical prevention as well.

Update:

To ensure 3 blocks appear in a row and avoid both horizontal and vertical ad placement issues, consider using this code snippet:

Check out the DEMO

for (var i = 0; i < insertionFrequency; i++) {
        random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
        var currentElement=insertionTargetChildren.eq(random);
        var addedElement=$('li.placeforad:visible');
        if(currentElement.next('.placeforad').length || currentElement.prev('.placeforad').length)
        {
            i--;
        }
        else
        {
            if(i!=0)
            {
                if(addedElement.index() > currentElement.index() &&
                (addedElement.index() - currentElement.index())==3)
                {
                   i--;
                }
                else if(currentElement.index() - (addedElement.index()-1)==3)  
                {
                   i--;
                }
                else
                {
                   insertionTargetChildren.eq(random).after(insertionTemplate);
                }
            }
            else
                insertionTargetChildren.eq(random).after(insertionTemplate);
    }
}

Answer 2

If you want to prevent advertisements from appearing horizontally on your website, you can use the following code snippet:

for (var i = 0; i < insertionFrequency; i++) {
    random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
    if(insertionTargetChildren.eq(random).next('.placeforad').length || insertionTargetChildren.eq(random).prev('.placeforad').length) 
    //check whether its previous li or next li has ad with class .placeforad
    {
        i--; //decrease the count so as to come up with separate random number
    }
    else
       insertionTargetChildren.eq(random).after(insertionTemplate);
}

View DEMO

Preventing ads from displaying vertically can be trickier, especially when dealing with rows of different sizes. If each row has an equal number of squares, there are methods that can help achieve vertical prevention as well.

Update:

To ensure 3 blocks appear in a row and avoid both horizontal and vertical ad placement issues, consider using this code snippet:

Check out the DEMO

for (var i = 0; i < insertionFrequency; i++) {
        random = Math.floor(Math.random() * insertionTargetChildren.length) + 0;
        var currentElement=insertionTargetChildren.eq(random);
        var addedElement=$('li.placeforad:visible');
        if(currentElement.next('.placeforad').length || currentElement.prev('.placeforad').length)
        {
            i--;
        }
        else
        {
            if(i!=0)
            {
                if(addedElement.index() > currentElement.index() &&
                (addedElement.index() - currentElement.index())==3)
                {
                   i--;
                }
                else if(currentElement.index() - (addedElement.index()-1)==3)  
                {
                   i--;
                }
                else
                {
                   insertionTargetChildren.eq(random).after(insertionTemplate);
                }
            }
            else
                insertionTargetChildren.eq(random).after(insertionTemplate);
    }
}

Prevent the clustering of advertisements using jQuery

Answer №1

Similar questions

Is it possible to target the sibling of the currently selected or focused element with CSS?

Generate a blank image using the canvas.toDataURL() method

Checking if the current time falls within a specific time range, without taking the year into account, using Javascript

Creating a uniform mobile version for all smartphones on a website

The output of VueJs hooks shows a blank refs object first, followed by the referenced elements

Can you explain the difference between the <li> and <div> elements in HTML? How are they used differently

React Native View will automatically resize to accommodate its content when it is centered

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2

The connection between an HTML form and PHP is not being established

How can I dynamically update the URL parameter based on the selected option in a dropdown list?

Please ensure that the menu is included within the HTML file

Adding a variety of data types to a MongoDB collection through Node.js

Display the LOADING indicator until the entire page has finished loading

What is the method for adding a new value to an array stored in a data attribute using square brackets around a text input?

Exploring pathways in Ruby on Rails: navigating the world of web

Attempting to utilize Ajax to save a file in Laravel, however unsure of what may be causing the issue in my code

What is the best way to implement sorting in a table using react virtualized?

Can a substring within a string be customized by changing its color or converting it into a different HTML tag when it is defined as a string property?

Issue with having Clipboard.js function not properly executing within the jQuery.get() method's done

What is the best way to include a specific stylesheet for Blackberry Curve devices based on certain conditions