Voxel WordPress LIVE Q/A!! May 11, 2024 - 10pm HKT/10am EDT

Vew More

Home

Discover

Hire

Progress Bar Below Description Field

Description/Instructions

Want to add a progress bar to the bottom of the description field when adding a listing?

This relies on two things:

1. You are actually using a character limit, otherwise this is pointless
2. You can make tiny amendments to the code

Instructions

This is the styling elements.  These need to go into the child theme CSS file or in "Appearance >> Customise >> Additional CSS".

/* adds styling back to the description text area box */


.ts-form-group.field-key-description .mce-content-body {
    border: 1px solid #ccc;
    border-top-left-radius: 11px;
border-top-right-radius: 11px;
    padding: 15px;
border-bottom: none;
}


 


/* character counter progress bar */


.progress-bar {
    width: 100%;
    height: 10px; /* Adjust height as needed */
    background-color: #eee;
    border-bottom-right-radius: 11px;
border-bottom-left-radius: 11px;
    overflow: hidden;
}


.progress-bar-fill /*this is the main fill as you type */ {
    height: 100%;
    background-color: #011A3B;
    transition: width 0.3s ease;
}


.orange .progress-bar-fill {
    background-color: orange;
}


.deep-red .progress-bar-fill {
    background-color: #a30000; /* Adjust deep red color as needed */
}


.red .progress-bar-fill {
    background-color: red;
}
  • CSS
Copy Code

Instructions

This needs to be pasted into the child theme "Functions.php" file of voxel child (or whatever your child theme may be called).  You're going to need to do some maths here.  This is based off the description field being max of 1500 characters.  If yours is less / more, adjust the following.

1.  var maxCharCount = 1500
2. if (charCount >= 1425  - change this to whatever 95% is, or whenever you want it to turn deep red
3. else if (charCount >= 1200 - change this to the number you want it to go from the regular fill to orange

function add_character_count_script() {
?>


document.addEventListener('DOMContentLoaded', function() {
var field = document.querySelector('.field-key-description .mce-content-body');
var container = document.createElement('div');
container.classList.add('char-count-container');
field.parentNode.insertBefore(container, field.nextSibling);


var progressBar = document.createElement('div');
progressBar.classList.add('progress-bar');
container.appendChild(progressBar);


var progressBarFill = document.createElement('div');
progressBarFill.classList.add('progress-bar-fill');
progressBar.appendChild(progressBarFill);


function updateCharCount() {
var charCount = field.textContent.trim().length;
var maxCharCount = 1500;
var percentage = (charCount / maxCharCount) * 100;


progressBarFill.style.width = percentage + '%';


if (charCount >= 1425 && charCount < maxCharCount) { // Changed threshold to 95%
progressBar.classList.remove('red', 'orange');
progressBar.classList.add('deep-red');
} else if (charCount >= 1200 && charCount < maxCharCount) {
progressBar.classList.remove('red');
progressBar.classList.add('orange');
} else if (charCount >= maxCharCount) {
progressBar.classList.remove('orange', 'deep-red');
progressBar.classList.add('red');
} else {
progressBar.classList.remove('orange', 'red', 'deep-red');
}
}


field.addEventListener('input', updateCharCount);
field.addEventListener('paste', function() {
setTimeout(updateCharCount, 0);
});


updateCharCount();
});


<?php
}


add_action('wp_footer', 'add_character_count_script');
  • PHP
Copy Code

Let's Chat About this Snippet