hmmmmmmm…. tricky!
This might be possible with some cunning CSS nth-child() ::before style selectors to inject the separating character between digit divs. But I think I’d avoid trying that because the current inline styles on digits make that kind of thing a bit of a pain (this is all due to change and become less painful in a future version)
Or, modify the odometer.js javascript something like this:
In odometer.js, look for line 136 that begins digitInfo.push(...
Insert the following code between lines 136 and 137
// inserting a styled separator character after 1st and 4th digits
if (i == 0 || i == 3) {
var separator = document.createElement("div");
// separator character
separator.innerHTML = '.'
// add styles to match digits
separator.style.cssText = style.digits;
var separatorDiv = document.createElement("div");
separatorDiv.style.cssText = style.columns;
separatorDiv.appendChild(separator);
// if we are using the 3d highlight effect, add it
if (!this.disableHighlights) {
for (var j in highlights) {
var hdiv = document.createElement("div");
hdiv.innerHTML="<p></p>";
hdiv.style.cssText = highlights[j];
separatorDiv.appendChild(hdiv);
}
}
odometerDiv.appendChild(separatorDiv);
}
Now that should give you a ‘.’ after the first and fourth digits of the counter like your example (just change the conditions of the first line to alter positions)
You’ll also need to alter line 106 from:
odometerDiv.style.cssText="text-align: left; width:"+(this.digitWidth*this.digits)+"px; height:"+this.digitHeight+"px";
to:
odometerDiv.style.cssText="text-align: left; width:"+(this.digitWidth*(this.digits+2))+"px; height:"+this.digitHeight+"px";
This line just adds extra width to the counter so the new characters fit in, note the (this.digits+2), just change as appropriate if you want more or less separators
Well that’ll either do exactly what you want or be close enough to get you started. Remember any modifications here will effect all counters and the changes will be lost if you update the plugin when a new version comes out.
Have fun and shout out if you get stuck!
