Replace Text Character with Image

Hi folks, i’m hoping someone can help me out here. Basically i have a Database Count on my site, which is tied into a Search Filter. So on entering the site it Displays 2,700 Vehicles in Stock. It is then tied in to a set of drop downs to change when a Manufacturer is Chosen and then with Model being chosen.

What i want to do is style each individual Character to make it look like a nice Digital Counter, unfortunately css doesn’t allow individual character styling, and as the Number is generated Dynamically i cannot each individual character, so i am looking for answers …

I stumbled across lettering.js which on first impression gave me exactly what i wanted … Output like below




Unfortunately this only functions on the first page load, but doesn’t apply to the number once it changes. I assume this is because the number changes with ajax and lettering.js requires a page re-load.

So can anybody tell me
(a) An alternative way of achieving individual character replacement with an individual image or
(b) An option for applying lettering.js without a page re-load …

Thanks for any help !!

Sponsor our Newsletter | Privacy Policy | Terms of Service