Join the Voxel Guide Community!
Get Involved
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
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;
}
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');
