CODEWITHSUNDEEP
javascriptjquerywordpresstimewoocommerce
Артем
Артем

Reputation: 119

Get time numbers inside div with JQuery

Im building e-commerce website on wordpress and I want to style woocommerce preorder countdown. Countdown is created with jQuery Countdown by Keith Wood. What I need is to style only numbers: change their size and background. Im not familiar with Jquery and i dont know how to split text or something like this. Also, I dont know is that really possible. 

<div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000">  6 Days 22 Hours 58 Minutes 12 Seconds</div>

Upvotes: 1

Views: 81

Answers (2)

solanki...
solanki...

Reputation: 5098

var txt = $('.hasCountdown').text();
var splited = txt.split('');
var flag = true;
var man = '';
var st = '';
for (var i = 0; i < splited.length; i++) {
  if ((48 >= splited[i].charCodeAt(0)) || (splited[i].charCodeAt(0) <= 57)) {
    st += splited[i];
    flag = false;
  } else {
    flag = true;
  }
  if (flag && st) {
    man += '&nbsp<span style="font-size:40px;background:red">' + st + '</span>&nbsp' + splited[i];
    st = '';
  } else {
    if (flag && !st) {
      man += splited[i];
    }
  }
}
$('.hasCountdown').html(man);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>

Upvotes: 2

Cat
Cat

Reputation: 4246

Here's a vanilla-flavored solution that grabs the contents of the div, wraps each number is a styled span element, and overwrites the div contents with the new version.

You can choose your preferred size and color by changing the values of sizeMultiplier and background variables. It'd be cleaner to use a CSS class to provide the formatting (and the script would just apply the CSS class) but I didn't know how easy it would be for you to modify the CSS files.

See the in-code comments for some further explanation.

let
  // Options -- these determine the number formatting
  sizeMultiplier = 1.5,
  background = "lightskyblue";

const
  // Identifies HTML elements
  element = document.getElementById("my-div"),
  tempDiv = document.createElement("div"),
  btn = document.querySelector('button');

// Makes button work for demo
btn.addEventListener('click', formatNums);

// Replaces HTML in element with formatted version
function formatNums(){
  // Makes array from div contents, then converts item to DOM nodes
  const tokens = element.textContent.split(" ");
  const nodes = tokens.map( (token) =>
    // Numbers get formatted, other text is left as-is
    isNum(token)
      ? numSpan(token, sizeMultiplier, background)
      : textNode(token)
  );
  // Puts all the nodes into an empty div
  nodes.forEach( (node, i) => {
    tempDiv.appendChild(node);
    tempDiv.insertAdjacentHTML("beforeend",
      i < nodes.length - 1 ? " " : ""
    );
  });
  // Replaces contents of original element
  element.innerHTML = tempDiv.innerHTML;
}

// Tests whether each item is a number
function isNum(token){
  return parseFloat(token) < Infinity
}

// Makes basic nodes for regular text
function textNode(word){
  return document.createTextNode(word);
}
// Makes a styled span for a number
function numSpan(num, size, color){
  const span = document.createElement("span");
  span.style.fontSize = size +"em";
  span.style.padding = size/4 + "ch"; // Makes background wider than num
  span.style.backgroundColor = color;
  span.textContent = num;
  return span;
}
button{ margin: 10px; border-radius: 0.3em; }
<button>APPLY FORMATTING</button>
<div id="my-div"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>

Upvotes: 1

Related Questions