`How can the background color be altered based on specific conditions?`

Question

`How can the background color be altered based on specific conditions?`

I am attempting to modify the background color. My goal is to change every odd result to a light green (#f0f5f5) to avoid a large white space when the result ends in an even number. I would also like to change the background color of the pagination section to light green when the result ends in an even number. The search results only display 5 results, so it could be the 2nd and 4th ones.

search.addWidgets([
  instantsearch.widgets.searchBox({
    container: '#searchbox',
  }),
  instantsearch.widgets.hits({
    container: '#Algolia_Result',
    transformItems: function (items) {
      return items.map(function (item) {
        if (item.objectType === 'Startup') {
          item._isDescription = isNotNull(item.description);
  
        } else if (item.objectType === 'NEWS') {
          item._isSource = isNotNull(item.source);

        } else if (item.objectType === 'Comment') {
            
          item._isComment = isNotNull(item.comment);
         
     
        return item;
      });
    },
     templates: {
      empty: '<div id="empty">No results have been found for {{ query }}.</div><br>',
      item: `
        <a href="{{linkUrl}}" target="_blank">
        <div class="algolia_container">
            <div class="item1">
                <div id="images"><img src="{{logoUrl}}" alt="{{hits-image}}" id="hits-image"></div>
                <div id="objTyeps"><span class="objectType {{objectCss}}">{{objectType}}</span></div>
            </div>
            <div class="item2">
                <div id="objectTitle">
                <span id="titleForDisplay">{{#helpers.highlight}}{ "attribute": "titleForDisplay" }{{/helpers.highlight}}</span>
                </div>
            </div>
            <div class="item3">


                {{#_isLocation}}
                    <div id="location">{{#helpers.highlight}}{ "attribute": "location" }{{/helpers.highlight}}</div>
                {{/_isLocation}}
                
            </div>
        </div></a>
      `, 
    },
  }),
  instantsearch.widgets.pagination({
    container: '#pagination',
  }),
]);

#Algolia_Result > div > div > ol > li:nth-child(odd){background-color: #f0f5f5;}

.ais-Pagination-item {
    display:inline;
    padding: 5px;
    margin: 0 5px;
    border: 1px solid #E8E8E8;
    border-radius:5px;
    font-size:18px;
}

.ais-Pagination-list {
    text-align: center;
    height:45px;
    padding-top: 10px;
}

.ais-Pagination-item:hover {
  background-color: #DCDCDC;
  transition: background-color .2s;
}

.ais-Pagination-item--selected{
  background-color: #E8E8E8;
}

<div id="searchbox"></div>      
    <div id="results">
        <div id="Algolia_Result"></div>
        <div id="pagination"></div>
    </div>

This is acceptable

This needs to be addressed, as the background color of the pagination area must match the last result, indicating it must be green

This is the console output that I am seeing.

javascript html css

Answer 1

Answer №1

To change the background color of the pagination row, you can use JavaScript to count the number of results and apply a color if the result count is even.

Take a look at the example provided below.

Example 1 contains an odd number of result rows, and the CSS styling works correctly, as in your working example.

Example 2 has an even number of result rows and applies the pagination background color using JavaScript.

// Count the rows
let numRows = document.querySelectorAll('#example-2 .row').length
// If the number of rows is even
if (numRows % 2 == 0) {
  // Apply the background color to the pagination row
  document.querySelector('#example-2 .pagination').style.backgroundColor = '#eee'
}

.container {
  border: 1px solid #000;
  margin-bottom: 5px;
}

.row:nth-child(odd) {
  background-color: #eee;
}

Example 1
<div id="example-1" class="container">
  <div>
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
    <div class="row">Row 3</div>
  </div>
  <div>
    <div class="pageination">Pagination Row</div>
  </div>
</div>

Example 2
<div id="example-2" class="container">
  <div>
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
  <div>
  <div>
    <div class="pagination">Pagination Row</div>
  </div>
</div>

EDIT: In your scenario, you should include the following JavaScript code.

<script>
  let numRows = document.querySelectorAll('.ais-Hits-item').length
  if (numRows % 2 == 0) {
    document.querySelector('.ais-Pagination-list').style.backgroundColor = '#eee'
  }
</script>

EDIT 2: After reviewing your code sandbox, it appears that the issue arises because the JavaScript that calculates the row count is executed before the rows are rendered by Algolia.

To resolve this, we need to place our row counting JavaScript within an Algolia callback function that runs after the rows have been rendered. This can be achieved using the algolia search.on('render', ...) event callback.

Try the following code:

search.on('render', () => {
  let numRows = document.querySelectorAll('.algolia_container').length;
  if (numRows % 2 === 0) {
    document.querySelector('#pagination').style.backgroundColor = 'red';
  } else {
    document.querySelector('#pagination').style.backgroundColor = 'transparent';
  }
});

Answer 2

To change the background color of the pagination row, you can use JavaScript to count the number of results and apply a color if the result count is even.

Take a look at the example provided below.

Example 1 contains an odd number of result rows, and the CSS styling works correctly, as in your working example.

Example 2 has an even number of result rows and applies the pagination background color using JavaScript.

// Count the rows
let numRows = document.querySelectorAll('#example-2 .row').length
// If the number of rows is even
if (numRows % 2 == 0) {
  // Apply the background color to the pagination row
  document.querySelector('#example-2 .pagination').style.backgroundColor = '#eee'
}

.container {
  border: 1px solid #000;
  margin-bottom: 5px;
}

.row:nth-child(odd) {
  background-color: #eee;
}

Example 1
<div id="example-1" class="container">
  <div>
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
    <div class="row">Row 3</div>
  </div>
  <div>
    <div class="pageination">Pagination Row</div>
  </div>
</div>

Example 2
<div id="example-2" class="container">
  <div>
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
  <div>
  <div>
    <div class="pagination">Pagination Row</div>
  </div>
</div>

EDIT: In your scenario, you should include the following JavaScript code.

<script>
  let numRows = document.querySelectorAll('.ais-Hits-item').length
  if (numRows % 2 == 0) {
    document.querySelector('.ais-Pagination-list').style.backgroundColor = '#eee'
  }
</script>

EDIT 2: After reviewing your code sandbox, it appears that the issue arises because the JavaScript that calculates the row count is executed before the rows are rendered by Algolia.

To resolve this, we need to place our row counting JavaScript within an Algolia callback function that runs after the rows have been rendered. This can be achieved using the algolia search.on('render', ...) event callback.

Try the following code:

search.on('render', () => {
  let numRows = document.querySelectorAll('.algolia_container').length;
  if (numRows % 2 === 0) {
    document.querySelector('#pagination').style.backgroundColor = 'red';
  } else {
    document.querySelector('#pagination').style.backgroundColor = 'transparent';
  }
});

`How can the background color be altered based on specific conditions?`

Answer №1

Similar questions

Do you know of any HTML Validators that are compatible with Maven?

The criteria is not fulfilled by either item.area_partition.homepage_show or item.area_partition.name in accordance with my needs

What is the best way to import and export modules in Node.js when the module names and directories are given as strings?

Exploring Event Listening in HTML5 Programming

How can I get video playback in IOS to work with Videogular2 using HLS?

Property '{}' is not defined in type - Angular version 9.1.1

"Retrieve a specific object from a JSON file using NextJS based on its ID

Managing State in a React Drawer Interface

Transmitting OfficeJS 2D Array via an Ajax Call

Creating an array of items in an HTML template to generate a PDF using Node.js

Converting MSK time to SST time using JavaScript: A Handy Guide

In order to utilize Next.js with pkg, you must enable one of the specified parser plugins: 'flow' or 'typescript'

Is there a way to create a footer that seamlessly integrates with the borders of a website?

Accessing deeply nested JSON objects in AngularJS

Unable to initiate the server in a new window due to the absence of a specified terminal application

Leverage the Nuxeo client SDK with Angular 6 for seamless integration with RESTClient in

Implementing dynamic attribute id addition to select option

Sorting arrays in JavaScript can become tricky when dealing with arrays that contain values from two different arrays

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Exploring the possibilities of utilizing a Kendo grid within an ASP.NET Web API