Strawberry Jellyfish

Version 1.4 now features alignment options for both widgets and shortcode counters, no more need for the above.

Shortcodes now exist in the latest version

A timely question!

New version, just released… with full shortcode support!

A summary of how to use shortcodes is in the readme and on the plugin homepage https://strawberryjellyfish.com/wordpress-plugins/jellyfish-backdrop/

There are few different counter examples on that page too, but I’ll be adding some more info / examples in the future to highlight some relatively undocumented new features ??

This is quite easy to do when you know the trick. Just add a couple of new styles to your style sheet:

.widget_counter_widget { text-align: center; }
.odometer-widget { display: inline-block; }

First one just centers content in the counter widget container, the second and most important one will allow the actual counter to be effected by text alignment.

By the way a new version will be out in or week or two that has had a major rewrite, has lots of new features and is easier to customise. The info above is for the current (at the time of writing this) 1.0 release and may not work on the next release…

Glad that worked out for you.

Incidentally, a variation of this feature has made it into the next version of the counter, where you can define a pattern for the counter to include “non counting” parts, such as symbols between digits like you needed, prefixes, postfixes etc.

Currently under test, to be released.. sometime in the not too distant future. (“Sometime” being dependant on my spare time :D)

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!

The counter currently calculates its size in pixels which unfortunately isn’t much use for responsiveness. A new version of the counter is being developed that completely reworks how the counter is generated and styled that will make it much easier to customise and style and generally place nice with responsive layouts…

Although I don’t anticipate the update coming any time soon as it’s quite an extensive rewrite :-/

Now, there are a few ways you could display a $ before the counter, none of them particularly easy for one reason or other. To avoid modifying the plugin code you could try a CSS approach. Something like this in your stylesheet should do the trick:

#odometer-counter_widget-2::before {
    content: "$";
    float: left;
    font-size: 90px;
    padding: 35px 0px;
}

#odometer-counter_widget-2 > div {
    margin-left: 60px;
}

#odometer-counter_widget-2::before inserts a $ before the counter and sets font size etc appropriately (you can customise the look further here)

#odometer-counter_widget-2 > div The second style rule just nudges the actual counter digits over to give room for the inserted $, if this is too small you might see the counter wrap onto another line.

I based this css on how you have the counter set up on your site, so it should work as is and look reasonable.. it’s a good base to start with at least.

The counter needs to have an end value so it cannot be unlimited, but you can approximate the effect by using a really big ending number.

These settings will make a counter similar to the one you mention:

Start Value: 2712712500
End Value: 9999999999
Counter Type: Count Up
? Continuous Counter
Continuous Interval: 0

Number of Digits: 10
? Disable Tenths
? Disable 3D effect
Bustedness: 0
Digit Style: font-family: Arial; color: #000; background-color: transparent;

It sounds like you might have missed setting the counter type. To make a static counter you should just need to set two things in the widget options, then save the widget:

Start Value: 40 (or whatever number you want)

Counter Type: Static

Hope that helps. Let me know if you are still having problems.

Ok, well if you want to make a continuous counter change by a value of 5 on every ‘count’ you just need to change 1 line in jellyfish-counter-widget.php

Look for line 482 (in version 1.0):

if (wholeNumber >= 1) {

And change the 1 to 5 or whatever value you like….

if (wholeNumber >= 5) {

That should work for persistent/continuous counters counting either up or down. Be aware that the counter will still try to animate when it updates and might have unpredictable visual results if it takes longer than the delay interval to update, but in your case, whizzing up by 5 every 1 second should work ok.

This isn’t something that is currently supported via configuration and would require altering the counter JavaScript… although JavaScript changes would effect every instance of the counter which may not be desirable if you need multiple counters with different behavior.

I’m not clear what you mean by JS and CSS mangled together. The main JavaScript class is enqueued with the other js your WordPress theme is using and is normally included at the bottom of the body. Each counter widget does insert some in-line JavaScript at the widget position that it dynamically generates the actual counter, is this what you are referring to?

I’m interested by your statements about ‘moving JS to the footer’. How are you doing that? Can you post a link to an example of where you have tried this?

This plugin has grown to incorporate user feature requests and I’d probably have implemented things differently if starting out with the current feature set in mind. It could probably benefit a complete rewrite version…. maybe in the future, so all feedback is welcome.

Great tip ??

I hadn’t considered having an onclick event. Might look into making this a feature in a future version.

I’ve had a quick look at your site.

I can see that the plugin is running and injecting the javascript for the counter instance but for some reason the additional odometer.js file is not being included on your page. This is why you are getting that error.

It is difficult to diagnose the direct cause from the frontend without more information. What WordPress version, theme and other plugins are you running?

1. You should already be able to do this. Just set up a counter widget with the a static counter type and a start value of whatever you want the counter to display. Whenever you want to manually update the counter just go back to the widget admin, change the start value and hit save. If this isn’t working for you let me know.

2. Embedding in a post/page is not currently supported but may be added in a future version